feat: sync light/dark mode with theme

storybookjs · Jan 15, 2025 · 686b102 · 686b102
1 parent 1a656bc
commit 686b102
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
 import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useChannel, useParameter } from 'storybook/internal/manager-api';
-import { ignoreSsrWarning, styled } from 'storybook/internal/theming';
+import { ignoreSsrWarning, styled, useTheme } from 'storybook/internal/theming';
 
 import { Source, type SourceParameters } from '@storybook/blocks';
 
@@ -30,6 +30,7 @@ addons.register(ADDON_ID, (api) => {
     render: ({ active }) => {
       const parameter = useParameter(PARAM_KEY, {
         source: { code: '' } as SourceParameters,
+        theme: 'dark',
       });
 
       const [codeSnippet, setSourceCode] = React.useState<{
@@ -43,14 +44,17 @@ addons.register(ADDON_ID, (api) => {
         },
       });
 
+      const theme = useTheme();
+      const isDark = theme.base !== 'light';
+
       return (
         <AddonPanel active={!!active}>
           <SourceStyles>
             <Source
               {...parameter.source}
               code={parameter.source.code || codeSnippet.source}
               format={parameter.source.format || codeSnippet.format}
-              dark
+              dark={isDark}
             />
           </SourceStyles>
         </AddonPanel>

diff --git a/code/addons/docs/template/stories/codePanel/index.stories.tsx b/code/addons/docs/template/stories/codePanel/index.stories.tsx
@@ -3,6 +3,9 @@ export default {
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },
+    docs: {
+      codePanel: true,
+    },
   },
 };