diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-28 17:12:58 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:15:27 +0100 |
| commit | 60c49f18389ff625177a57277ef8f292a31097bf (patch) | |
| tree | 76b0f1f1792b57659e54d282f93df70088446e3c /.storybook/preview.tsx | |
| parent | 05f1dfc6896d3affa7c494a1b955f230d836a4b7 (diff) | |
refactor(providers,hooks): rewrite PrismThemeProvider & usePrismTheme
* reuse Theme provider logic
* move DOM mutation from provider to hook
* add a script to init theme before page load
Diffstat (limited to '.storybook/preview.tsx')
| -rw-r--r-- | .storybook/preview.tsx | 31 |
1 files changed, 20 insertions, 11 deletions
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d5cc8cc..f36013c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl'; import { AckeeProvider, MotionProvider, + PrismThemeProvider, ThemeProvider, } from '../src/utils/providers'; import '../src/styles/globals.scss'; @@ -33,18 +34,26 @@ const withAllProviders: Decorator = (Story) => { return ( <IntlProvider locale="en"> <ThemeProvider attribute="theme" storageKey="theme"> - <MotionProvider attribute="reduced-motion" storageKey="reduced-motion"> - <AckeeProvider - domainId="any" - server="https://example.com" - storageKey="ackee" - tracking="full" + <PrismThemeProvider + attribute="data-prismjs-color-scheme-current" + storageKey="prismjs-color-scheme" + > + <MotionProvider + attribute="reduced-motion" + storageKey="reduced-motion" > - <ThemeWrapper> - <Story /> - </ThemeWrapper> - </AckeeProvider> - </MotionProvider> + <AckeeProvider + domainId="any" + server="https://example.com" + storageKey="ackee" + tracking="full" + > + <ThemeWrapper> + <Story /> + </ThemeWrapper> + </AckeeProvider> + </MotionProvider> + </PrismThemeProvider> </ThemeProvider> </IntlProvider> ); |