Adds theming to Storybook (#37562)

This commit is contained in:
Echo 2026-01-21 16:54:52 +01:00 committed by GitHub
parent 22e438d7bd
commit 6897475f9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -50,9 +50,19 @@ const preview: Preview = {
dynamicTitle: true,
},
},
theme: {
description: 'Theme for the story',
toolbar: {
title: 'Theme',
icon: 'circlehollow',
items: [{ value: 'light' }, { value: 'dark' }],
dynamicTitle: true,
},
},
},
initialGlobals: {
locale: 'en',
theme: 'light',
},
decorators: [
(Story, { parameters, globals, args, argTypes }) => {
@ -135,6 +145,13 @@ const preview: Preview = {
</IntlProvider>
);
},
(Story, { globals }) => {
const theme = (globals.theme as string) || 'light';
useEffect(() => {
document.body.setAttribute('data-color-scheme', theme);
}, [theme]);
return <Story />;
},
(Story) => (
<MemoryRouter>
<Story />