diff options
Diffstat (limited to 'packages/renderer/src/components/ThemeProvider.tsx')
-rw-r--r-- | packages/renderer/src/components/ThemeProvider.tsx | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx new file mode 100644 index 0000000..8be4f6a --- /dev/null +++ b/packages/renderer/src/components/ThemeProvider.tsx | |||
@@ -0,0 +1,26 @@ | |||
1 | import { observer } from 'mobx-react-lite'; | ||
2 | import { | ||
3 | unstable_createMuiStrictModeTheme as createTheme, | ||
4 | ThemeProvider as MuiThemeProvider, | ||
5 | } from '@mui/material/styles'; | ||
6 | import React from 'react'; | ||
7 | |||
8 | import { useStore } from './StoreProvider'; | ||
9 | |||
10 | export const ThemeProvider = observer(({ children }: { | ||
11 | children: JSX.Element | JSX.Element[], | ||
12 | }): JSX.Element => { | ||
13 | const { shared: { shouldUseDarkColors } } = useStore(); | ||
14 | |||
15 | const theme = createTheme({ | ||
16 | palette: { | ||
17 | mode: shouldUseDarkColors ? 'dark' : 'light', | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | return ( | ||
22 | <MuiThemeProvider theme={theme}> | ||
23 | {children} | ||
24 | </MuiThemeProvider> | ||
25 | ); | ||
26 | }); | ||