Check if dark mode is enabled and toggle
Storybook components are wrapped using a decorator in the storybook config. When rendering, useDarkMode() will let the component know which theme (dark/light) to thoose.
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
import React from 'react';
|
||||
import { addDecorator } from '@storybook/react';
|
||||
import { lightTheme } from '@backstage/theme';
|
||||
import { lightTheme, darkTheme } from '@backstage/theme';
|
||||
import { CssBaseline, ThemeProvider } from '@material-ui/core';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
|
||||
addDecorator(story => (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
|
||||
<CssBaseline>{story()}</CssBaseline>
|
||||
</ThemeProvider>
|
||||
));
|
||||
|
||||
Reference in New Issue
Block a user