Open ashoksinarewai opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically To address the dark theme issue in Storybook, follow these steps:
lib/theming/src/themes/dark.ts
.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,
};
.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',
},
};
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.
/.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
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
It will be great if I get any alternative solution for dark theme issue of storybook version 8.2.
Any Update ?
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
Additional context
No response