diff options
Diffstat (limited to 'subprojects/frontend/src/theme')
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 65 |
1 files changed, 50 insertions, 15 deletions
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index cf18e21c..1b8e49f0 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -5,27 +5,70 @@ import { | |||
5 | ThemeProvider as MaterialUiThemeProvider, | 5 | ThemeProvider as MaterialUiThemeProvider, |
6 | } from '@mui/material/styles'; | 6 | } from '@mui/material/styles'; |
7 | import { observer } from 'mobx-react-lite'; | 7 | import { observer } from 'mobx-react-lite'; |
8 | import React, { type ReactNode } from 'react'; | 8 | import React, { type CSSProperties, type ReactNode } from 'react'; |
9 | 9 | ||
10 | import { useRootStore } from '../RootStore'; | 10 | import { useRootStore } from '../RootStore'; |
11 | 11 | ||
12 | import EditorTheme from './EditorTheme'; | 12 | import EditorTheme from './EditorTheme'; |
13 | 13 | ||
14 | interface HighlightStyles { | ||
15 | number: CSSProperties['color']; | ||
16 | parameter: CSSProperties['color']; | ||
17 | occurences: { | ||
18 | read: CSSProperties['color']; | ||
19 | write: CSSProperties['color']; | ||
20 | }; | ||
21 | } | ||
22 | |||
23 | declare module '@mui/material/styles' { | ||
24 | interface Palette { | ||
25 | selection: Palette['primary']; | ||
26 | highlight: HighlightStyles; | ||
27 | } | ||
28 | |||
29 | interface PaletteOptions { | ||
30 | selection: PaletteOptions['primary']; | ||
31 | highlight: HighlightStyles; | ||
32 | } | ||
33 | } | ||
34 | |||
14 | function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions { | 35 | function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions { |
15 | switch (currentTheme) { | 36 | switch (currentTheme) { |
16 | case EditorTheme.Light: | 37 | case EditorTheme.Light: |
17 | return { | 38 | return { |
18 | palette: { | 39 | palette: { |
19 | primary: { | 40 | mode: 'light', |
20 | main: '#56b6c2', | 41 | primary: { main: '#0097a7' }, |
42 | selection: { | ||
43 | main: '#c8e4fb', | ||
44 | contrastText: '#000', | ||
45 | }, | ||
46 | highlight: { | ||
47 | number: '#1976d2', | ||
48 | parameter: '#6a3e3e', | ||
49 | occurences: { | ||
50 | read: '#ceccf7', | ||
51 | write: '#f0d8a8', | ||
52 | }, | ||
21 | }, | 53 | }, |
22 | }, | 54 | }, |
23 | }; | 55 | }; |
24 | case EditorTheme.Dark: | 56 | case EditorTheme.Dark: |
25 | return { | 57 | return { |
26 | palette: { | 58 | palette: { |
27 | primary: { | 59 | mode: 'dark', |
28 | main: '#56b6c2', | 60 | primary: { main: '#56b6c2' }, |
61 | selection: { | ||
62 | main: '#3e4453', | ||
63 | contrastText: '#fff', | ||
64 | }, | ||
65 | highlight: { | ||
66 | number: '#6188a6', | ||
67 | parameter: '#c8ae9d', | ||
68 | occurences: { | ||
69 | read: 'rgba(255, 255, 255, 0.15)', | ||
70 | write: 'rgba(255, 255, 128, 0.4)', | ||
71 | }, | ||
29 | }, | 72 | }, |
30 | }, | 73 | }, |
31 | }; | 74 | }; |
@@ -36,19 +79,11 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions { | |||
36 | 79 | ||
37 | function ThemeProvider({ children }: { children?: ReactNode }) { | 80 | function ThemeProvider({ children }: { children?: ReactNode }) { |
38 | const { | 81 | const { |
39 | themeStore: { currentTheme, darkMode }, | 82 | themeStore: { currentTheme }, |
40 | } = useRootStore(); | 83 | } = useRootStore(); |
41 | 84 | ||
42 | const themeOptions = getMUIThemeOptions(currentTheme); | 85 | const themeOptions = getMUIThemeOptions(currentTheme); |
43 | const theme = responsiveFontSizes( | 86 | const theme = responsiveFontSizes(createTheme(themeOptions)); |
44 | createTheme({ | ||
45 | ...themeOptions, | ||
46 | palette: { | ||
47 | mode: darkMode ? 'dark' : 'light', | ||
48 | ...(themeOptions.palette ?? {}), | ||
49 | }, | ||
50 | }), | ||
51 | ); | ||
52 | 87 | ||
53 | return ( | 88 | return ( |
54 | <MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider> | 89 | <MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider> |