diff options
Diffstat (limited to 'packages/renderer/src/components/ThemeProvider.tsx')
-rw-r--r-- | packages/renderer/src/components/ThemeProvider.tsx | 82 |
1 files changed, 45 insertions, 37 deletions
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx index 2ea2186..0273234 100644 --- a/packages/renderer/src/components/ThemeProvider.tsx +++ b/packages/renderer/src/components/ThemeProvider.tsx | |||
@@ -23,48 +23,56 @@ import { | |||
23 | ThemeProvider as MuiThemeProvider, | 23 | ThemeProvider as MuiThemeProvider, |
24 | } from '@mui/material/styles'; | 24 | } from '@mui/material/styles'; |
25 | import { observer } from 'mobx-react-lite'; | 25 | import { observer } from 'mobx-react-lite'; |
26 | import React from 'react'; | 26 | import React, { type ReactNode } from 'react'; |
27 | 27 | ||
28 | import { useStore } from './StoreProvider'; | 28 | import type RendererStore from '../stores/RendererStore'; |
29 | 29 | ||
30 | export default observer( | 30 | function ThemeProvider({ |
31 | ({ children }: { children: JSX.Element | JSX.Element[] }) => { | 31 | children, |
32 | const { | 32 | store: { |
33 | shared: { shouldUseDarkColors, writingDirection }, | 33 | shared: { shouldUseDarkColors, writingDirection }, |
34 | } = useStore(); | 34 | }, |
35 | 35 | }: { | |
36 | const theme = createTheme({ | 36 | children?: ReactNode; |
37 | direction: writingDirection, | 37 | store: RendererStore; |
38 | palette: shouldUseDarkColors | 38 | }) { |
39 | ? { | 39 | const theme = createTheme({ |
40 | mode: 'dark', | 40 | direction: writingDirection, |
41 | divider: 'rgba(255, 255, 255, 0.22)', | 41 | palette: shouldUseDarkColors |
42 | } | 42 | ? { |
43 | : { | 43 | mode: 'dark', |
44 | mode: 'light', | 44 | divider: 'rgba(255, 255, 255, 0.22)', |
45 | divider: 'rgba(0, 0, 0, 0.24)', | 45 | } |
46 | }, | 46 | : { |
47 | components: { | 47 | mode: 'light', |
48 | MuiBadge: { | 48 | divider: 'rgba(0, 0, 0, 0.24)', |
49 | styleOverrides: { | 49 | }, |
50 | standard: { | 50 | components: { |
51 | // Reduce badge with to make the unread message badge with "99+" unread messages | 51 | MuiBadge: { |
52 | // fit within the sidebar. Applied for all badges for consistency. | 52 | styleOverrides: { |
53 | paddingLeft: 4, | 53 | standard: { |
54 | paddingRight: 4, | 54 | // Reduce badge with to make the unread message badge with "99+" unread messages |
55 | }, | 55 | // fit within the sidebar. Applied for all badges for consistency. |
56 | paddingLeft: 4, | ||
57 | paddingRight: 4, | ||
56 | }, | 58 | }, |
57 | }, | 59 | }, |
58 | MuiIconButton: { | 60 | }, |
59 | styleOverrides: { | 61 | MuiIconButton: { |
60 | sizeMedium: { | 62 | styleOverrides: { |
61 | padding: 6, | 63 | sizeMedium: { |
62 | }, | 64 | padding: 6, |
63 | }, | 65 | }, |
64 | }, | 66 | }, |
65 | }, | 67 | }, |
66 | }); | 68 | }, |
69 | }); | ||
67 | 70 | ||
68 | return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>; | 71 | return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>; |
69 | }, | 72 | } |
70 | ); | 73 | |
74 | ThemeProvider.defaultProps = { | ||
75 | children: undefined, | ||
76 | }; | ||
77 | |||
78 | export default observer(ThemeProvider); | ||