fix: component multi-theme support (#87)

fix: component multi-theme support

fixes issue where multi-theme support doesn't work when used with the
component

add testing for component

update readme with light-dark() support

fix: react types

Author: AVGVSTVS96

.changeset/mean-boats-tap.md

@@ -0,0 +1,5 @@
+---
+"react-shiki": patch
+---
+
+fix multi-theme support in component

package/README.md

@@ -217,7 +217,57 @@ const highlightedCode = useShikiHighlighter(
 );
 ```
 
-See [shiki's documentation](https://shiki.matsu.io/docs/themes) for more information on dual and multi theme support, and for the CSS needed to make the themes reactive to your site's theme.
+#### Making Themes Reactive
+
+There are two approaches to make multi-themes reactive to your site's theme:
+
+##### Option 1: Using `light-dark()` Function (Recommended)
+
+Set `defaultColor="light-dark()"` to use CSS's built-in `light-dark()` function. This automatically switches themes based on the user's `color-scheme` preference:
+
+```tsx
+// Component
+<ShikiHighlighter
+  language="tsx"
+  theme={{
+    light: "github-light",
+    dark: "github-dark",
+  }}
+  defaultColor="light-dark()"
+>
+  {code.trim()}
+</ShikiHighlighter>
+
+// Hook
+const highlightedCode = useShikiHighlighter(code, "tsx", {
+  light: "github-light",
+  dark: "github-dark",
+}, {
+  defaultColor: "light-dark()"
+});
+```
+
+Ensure your site sets the `color-scheme` CSS property:
+```css
+:root {
+  color-scheme: light dark;
+}
+
+/* Or dynamically with a class */
+* {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+```
+
+##### Option 2: CSS Theme Switching
+
+For broader browser support or more control, add CSS snippets to your site to enable theme switching with media queries or class-based switching. See [Shiki's documentation](https://shiki.matsu.io/guide/dual-themes) for the required CSS snippets.
+
+> **Note**: The `light-dark()` function requires modern browser support. For older browsers, use the manual CSS variables approach.
 
 ### Custom Themes
 

package/package.json

@@ -59,9 +59,19 @@
     "check": "tsc && biome check ."
   },
   "peerDependencies": {
+    "@types/react": ">=16.8.0",
+    "@types/react-dom": ">=16.8.0",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "clsx": "^2.1.1",
     "dequal": "^2.0.3",

package/src/__tests__/multi-theme.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import { useShikiHighlighter } from '../index';
+import { useShikiHighlighter, ShikiHighlighter } from '../index';
 
 // Test component with configurable options
 const TestComponent = ({
@@ -106,3 +106,84 @@ describe('Multi-theme support', () => {
     });
   });
 });
+
+describe('ShikiHighlighter Component Multi-theme support', () => {
+  const code = 'console.log("test");';
+  const language = 'javascript';
+  const themes = { light: 'github-light', dark: 'github-dark' };
+
+  test('component with multi-themes should render CSS variables for non-default theme', async () => {
+    const { container } = render(
+      <ShikiHighlighter language={language} theme={themes}>
+        {code}
+      </ShikiHighlighter>
+    );
+
+    await waitFor(() => {
+      const shikiContainer = container.querySelector('[data-testid="shiki-container"]');
+      expect(shikiContainer).toBeInTheDocument();
+
+      const pre = shikiContainer?.querySelector('pre');
+      expect(pre).toBeInTheDocument();
+      expect(pre).toHaveClass('shiki');
+
+      // Find spans with CSS variables
+      const spans = container.querySelectorAll('span[style*="--shiki-"]');
+      expect(spans.length).toBeGreaterThan(0);
+
+      // When no defaultColor is specified, light is default, so we should have --shiki-dark
+      const span = spans[0];
+      const style = span?.getAttribute('style');
+      expect(style).toContain('--shiki-dark');
+      expect(style).not.toContain('--shiki-light'); // light is the default, so no CSS variable
+    });
+  });
+
+  test('component with multi-themes and defaultColor=dark should show light variables', async () => {
+    const { container } = render(
+      <ShikiHighlighter
+        language={language}
+        theme={themes}
+        defaultColor="dark"
+      >
+        {code}
+      </ShikiHighlighter>
+    );
+
+    await waitFor(() => {
+      const spans = container.querySelectorAll('span[style*="--shiki-"]');
+      expect(spans.length).toBeGreaterThan(0);
+
+      // When defaultColor=dark, dark is default, so we should have --shiki-light
+      const span = spans[0];
+      const style = span?.getAttribute('style');
+      expect(style).toContain('--shiki-light');
+      expect(style).not.toContain('--shiki-dark'); // dark is the default, so no CSS variable
+    });
+  });
+
+  test('component with multi-themes and custom cssVariablePrefix should work', async () => {
+    const { container } = render(
+      <ShikiHighlighter
+        language={language}
+        theme={themes}
+        cssVariablePrefix="--custom-"
+        defaultColor="light"
+      >
+        {code}
+      </ShikiHighlighter>
+    );
+
+    await waitFor(() => {
+      const spans = container.querySelectorAll('span[style*="--custom-"]');
+      expect(spans.length).toBeGreaterThan(0);
+
+      // When defaultColor=light, light is default, so we should have --custom-dark
+      const span = spans[0];
+      const style = span?.getAttribute('style');
+      expect(style).toContain('--custom-dark');
+      expect(style).not.toContain('--custom-light'); // light is the default, so no CSS variable
+      expect(style).not.toContain('--shiki-');
+    });
+  });
+});

package/src/lib/component.tsx

@@ -104,73 +104,80 @@ export const createShikiHighlighterComponent = (
     options?: HighlighterOptions
   ) => React.ReactNode
 ) => {
-  return forwardRef<HTMLElement, ShikiHighlighterProps>(({
-    language,
-    theme,
-    delay,
-    transformers,
-    defaultColor,
-    cssVariablePrefix,
-    addDefaultStyles = true,
-    style,
-    langStyle,
-    className,
-    langClassName,
-    showLanguage = true,
-    showLineNumbers = false,
-    startingLineNumber = 1,
-    children: code,
-    as: Element = 'pre',
-    customLanguages,
-    ...shikiOptions
-  }, ref) => {
-    // Destructure some options for use in hook
-    const options: HighlighterOptions = {
-      delay,
-      transformers,
-      customLanguages,
-      showLineNumbers,
-      startingLineNumber,
-      ...shikiOptions,
-    };
-
-    // Use resolveLanguage to get displayLanguageId directly
-    const { displayLanguageId } = resolveLanguage(
-      language,
-      customLanguages
-    );
-
-    const highlightedCode = useShikiHighlighterImpl(
-      code,
-      language,
-      theme,
-      options
-    );
-
-    return (
-      <Element
-        ref={ref}
-        data-testid="shiki-container"
-        className={clsx(
-          'relative',
-          'not-prose',
-          addDefaultStyles && 'defaultStyles',
-          className
-        )}
-        style={style}
-        id="shiki-container"
-      >
-        {showLanguage && displayLanguageId ? (
-          <span
-            className={clsx('languageLabel', langClassName)}
-            style={langStyle}
-            id="language-label"
-          >
-            {displayLanguageId}
-          </span>
-        ) : null}
-        {highlightedCode}
-      </Element>
-    );
-  });
+  return forwardRef<HTMLElement, ShikiHighlighterProps>(
+    (
+      {
+        language,
+        theme,
+        delay,
+        transformers,
+        defaultColor,
+        cssVariablePrefix,
+        addDefaultStyles = true,
+        style,
+        langStyle,
+        className,
+        langClassName,
+        showLanguage = true,
+        showLineNumbers = false,
+        startingLineNumber = 1,
+        children: code,
+        as: Element = 'pre',
+        customLanguages,
+        ...shikiOptions
+      },
+      ref
+    ) => {
+      // Destructure some options for use in hook
+      const options: HighlighterOptions = {
+        delay,
+        transformers,
+        customLanguages,
+        showLineNumbers,
+        defaultColor,
+        cssVariablePrefix,
+        startingLineNumber,
+        ...shikiOptions,
+      };
+
+      // Use resolveLanguage to get displayLanguageId directly
+      const { displayLanguageId } = resolveLanguage(
+        language,
+        customLanguages
+      );
+
+      const highlightedCode = useShikiHighlighterImpl(
+        code,
+        language,
+        theme,
+        options
+      );
+
+      return (
+        <Element
+          ref={ref}
+          data-testid="shiki-container"
+          className={clsx(
+            'relative',
+            'not-prose',
+            addDefaultStyles && 'defaultStyles',
+            className
+          )}
+          style={style}
+          id="shiki-container"
+        >
+          {showLanguage && displayLanguageId ? (
+            <span
+              className={clsx('languageLabel', langClassName)}
+              style={langStyle}
+              id="language-label"
+            >
+              {displayLanguageId}
+            </span>
+          ) : null}
+          {highlightedCode}
+        </Element>
+      );
+    }
+  );
 };