Open Nabil-MEDIOUNI opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically To address the flickering issue when switching stories, you can try the following steps:
preview.tsx
: Ensure that the backgrounds
parameter is set correctly to avoid conflicts with the dark mode addon. Modify the parameters
object in preview.tsx
to include the backgrounds
options:export const parameters = {
backgrounds: {
default: 'light',
values: [
{ name: 'light', value: '#ffffff' },
{ name: 'dark', value: '#000000' },
],
},
darkMode: {
current: 'light',
dark: darkTheme,
light: lightTheme,
},
// other parameters...
};
main.ts
: Ensure that the storybook-dark-mode
addon is correctly listed in the addons
array:const config: StorybookConfig = {
// other configurations...
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-a11y',
'@storybook/addon-interactions',
'storybook-dark-mode',
],
// other configurations...
};
preview.tsx
, make sure the theme is applied consistently across all stories. You can use a decorator to wrap all stories with the theme provider:const decorators = [
(Story) => (
<ThemeDecorator>
<Story />
</ThemeDecorator>
),
];
export const preview = {
parameters,
decorators,
};
These steps should help mitigate the flickering issue when switching stories.
/.github/DISCUSSION_TEMPLATE/help.yml /test-storybooks/server-kitchen-sink/stories/addons/backgrounds.stories.json /.github/DISCUSSION_TEMPLATE/ideas.yml /code/presets/server-webpack/src/lib/compiler/testfixtures/backgrounds.json /code/.storybook /docs/_snippets/storybook-backgrounds-addon-default-params.md /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /.github/comments/invalid-link.md /code/renderers/server/template/cli/button.stories.json /code/frameworks/angular/src/builders/build-storybook/schema.json /code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts /test-storybooks/external-docs/.storybook /code/lib/cli/src/automigrate/fixes/vta.ts /code/addons/onboarding/CHANGELOG.md /code/core/src/manager/components/sidebar/Brand.tsx /docs/_snippets/storybook-main-disable-addon.md /code/lib/cli/src/automigrate/fixes/sb-binary.ts /docs/_snippets/storybook-main-js-md-files.md /code/core/src/server-errors.ts /code/lib/cli/src/automigrate/fixes/cra5.ts /code/addons/docs/template/stories/docspage /code/addons/backgrounds/template/stories/parameters.stories.ts /code/core/src/telemetry/storybook-metadata.test.ts /code/lib/cli/src/automigrate/fixes/addon-postcss.ts
Describe the bug
Hi @shilman I'm using Storybook V8.0.10 along with storybook-dark-mode v4.0.0.
Here's the present scenario: upon initially navigating to a story after clearing the cache, the screen flickers between dark and light modes. However, if I've previously visited that particular story, this flashing behavior doesn't occur.
Untitled_ May 9, 2024 10_19 PM.webm
main.ts
preview.jsx
Reproduction link
N/A
Reproduction steps
No response
System
Additional context
No response