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:
Himanshu Mishra
2020-04-20 17:19:13 +09:00
parent fe972b1e21
commit c2e2c9363f
+3 -2
View File
@@ -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>
));