2024-05-24 19:53:37 +03:00
|
|
|
import { useEffect } from 'react';
|
2024-04-11 18:28:12 +03:00
|
|
|
import { ThemeProvider } from '@emotion/react';
|
|
|
|
import { Preview } from '@storybook/react';
|
|
|
|
import { useDarkMode } from 'storybook-dark-mode';
|
|
|
|
|
2024-06-12 19:36:25 +03:00
|
|
|
import {
|
|
|
|
THEME_DARK,
|
|
|
|
THEME_LIGHT,
|
|
|
|
ThemeContextProvider,
|
|
|
|
} from '../src/theme/index';
|
2024-04-11 18:28:12 +03:00
|
|
|
|
|
|
|
const preview: Preview = {
|
|
|
|
decorators: [
|
|
|
|
(Story) => {
|
|
|
|
const mode = useDarkMode() ? 'Dark' : 'Light';
|
|
|
|
|
|
|
|
const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
|
2024-05-24 19:53:37 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
document.documentElement.className = mode === 'Dark' ? 'dark' : 'light';
|
|
|
|
}, [mode]);
|
|
|
|
|
2024-04-11 18:28:12 +03:00
|
|
|
return (
|
|
|
|
<ThemeProvider theme={theme}>
|
2024-06-12 19:36:25 +03:00
|
|
|
<ThemeContextProvider theme={theme}>
|
|
|
|
<Story />
|
|
|
|
</ThemeContextProvider>
|
2024-04-11 18:28:12 +03:00
|
|
|
</ThemeProvider>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
export default preview;
|