[Bug]: Dark theme not work properly.

[ashoksinarewai]

Describe the bug

I have update stroybook version in 8.2.6 , in that have added elements and components , in a storybook when i will go to element and check the element in dark theme , in a dark theme that element not show proper.

Reproduction link

https://rlmibbjgjygithub-xojb--6006--adbcd1bf.local-credentialless.webcontainer.io/?path=/story/example-page--logged-out&globals=backgrounds.value:!hex(333333)

Reproduction steps

No response

System

Use this command to latest project 
npx storybook@latest init

Additional context

No response

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To address the dark theme issue in Storybook, follow these steps:

1. Locate the theme configuration: Open the file lib/theming/src/themes/dark.ts.
2. Adjust the theme properties: Ensure that the color properties are correctly set for dark mode. For example, check and update the background and text color properties.

export const dark: ThemeVars = {
  base: 'dark',
  colorPrimary: '#1EA7FD',
  colorSecondary: '#DDDDDD',
  // UI
  appBg: '#333333',
  appContentBg: '#2f2f2f',
  appBorderColor: '#444444',
  appBorderRadius: 4,
  // Text colors
  textColor: '#FFFFFF',
  textInverseColor: 'rgba(255,255,255,0.9)',
  // Toolbar default and active colors
  barTextColor: '#999999',
  barSelectedColor: '#FFFFFF',
  barBg: '#444444',
  // Form colors
  inputBg: '#3c3c3c',
  inputBorder: '#666666',
  inputTextColor: '#FFFFFF',
  inputBorderRadius: 4,
};

3. Update the preview configuration: Open the file .storybook/preview.js and ensure the dark theme is applied correctly.

import { themes } from '@storybook/theming';

export const parameters = {
  docs: {
    theme: themes.dark,
  },
  darkMode: {
    current: 'dark',
  },
};

4. Check component styles: Ensure that the components are styled correctly for dark mode. Open the file lib/components/src/your-component/your-component.tsx and verify the styles.

const YourComponent = styled.div`
  background-color: ${({ theme }) => theme.background.app};
  color: ${({ theme }) => theme.color.text};
`;

These steps should help resolve the dark theme display issue.

References

/.github/DISCUSSION_TEMPLATE/help.yml /.github/comments/invalid-link.md /.github/DISCUSSION_TEMPLATE/ideas.yml /docs/_snippets/configure-mock-provider-with-story-parameter.md /.github/comments /docs/_snippets/storybook-preview-docs-dark-theme.md /code/renderers/server/template/cli/button.stories.json /docs/_snippets/csf-2-example-primary-dark-story.md /code/core/src/manager/components/sidebar/Brand.tsx /docs/contribute/how-to-reproduce.mdx /docs/_snippets/storybook-backgrounds-addon-default-params.md /.github/DISCUSSION_TEMPLATE/rfc.yml /code/core/src/manager/components/notifications/NotificationItem.tsx /docs/_snippets/test-runner-no-index-json.md /code/addons/docs/template/stories/docspage/extract-description.stories.ts /code/addons/storysource/README.md /code/presets/server-webpack/src/lib/compiler/testfixtures/backgrounds.json /code/core/src/theming/README.md /code/addons/themes/docs/getting-started/postcss.md /test-storybooks/ember-cli/ember-output/storybook-docgen /code/core/scripts/helpers/modifyThemeTypes.ts /code/presets/server-webpack/src/lib/compiler/testfixtures/kitchen_sink.snapshot /docs/_snippets/storybook-preview-with-angular-polyfills.md /test-storybooks/server-kitchen-sink/stories/addons/backgrounds.stories.json /docs/_snippets/storybook-canvas-doc-block-story.md

#### 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)

[ashoksinarewai]

Above code is not working from my side. In our project there are many elements and components, all have same issue of dark theme, for the storybook version 8.2

Dark Theme

Light Theme

[ashoksinarewai]

It will be great if I get any alternative solution for dark theme issue of storybook version 8.2.

[ashoksinarewai]

Any Update ?