[Bug]: CSS vars in theme throw errors with "Show Code"

[UltimateGG]

Describe the bug

When using CSS vars in the docs container theme, everything works fine until you click 'Show Code' and an error is thrown, the page goes blank.

Reproduction link

https://stackblitz.com/edit/github-lyvshn-myigje?file=.storybook%2Fpreview.tsx

Reproduction steps

1. Go to a story
2. Observe the orangeish background color
3. Click "Show Code" on a story, check the console

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-interactions: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-links: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-onboarding: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/blocks: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/react: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/react-vite: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/test: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    storybook: ^8.3.0-alpha.3 => 8.3.0-alpha.3

Additional context

No response

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue with CSS vars in the theme throwing errors when 'Show Code' is clicked, ensure that the theme object passed to Storybook's theming API does not contain any CSS variables directly. Instead, resolve the CSS variables to their actual values before passing them to the theme. Update your theme configuration in .storybook/YourTheme.js to use static values or resolve the CSS variables programmatically.

References

/.github/DISCUSSION_TEMPLATE/help.yml /.github/comments/invalid-link.md /.github/DISCUSSION_TEMPLATE/ideas.yml /code/core/src/server-errors.ts /code/core/src/manager/components/notifications/NotificationItem.tsx /docs/_snippets/configure-mock-provider-with-story-parameter.md /code/core/src/preview-errors.ts /.github/DISCUSSION_TEMPLATE/rfc.yml /.github/comments /code/addons/docs/template/stories/docspage /code/core/src/manager/components/sidebar/Brand.tsx /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts /docs/_snippets/storybook-canvas-doc-block-story.md /code/core/scripts/helpers/modifyThemeTypes.ts /code/core/src/theming/convert.ts /docs/configure/user-interface/theming.mdx /docs/_snippets/your-theme.md /test-storybooks/server-kitchen-sink/stories/html_content/styles.stories.json /code/renderers/server/template/cli/button.stories.json /code/core/src/theming/themes/light.ts /code/addons/interactions/src/components/InteractionsPanel.tsx /docs/_snippets/storybook-preview-extended-theme-variables.md /code/addons/themes/package.json /code/core/src/preview-api/Errors.stories.tsx /code/core/src/components/components/Modal/Modal.styled.tsx

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[UltimateGG]

Even stranger, the error ONLY happens when basing off of the dark theme. ...themes.dark line 13 of preview.tsx being set as light theme will not cause it.