diff options
Diffstat (limited to 'subprojects/frontend/src/theme/ThemeProvider.tsx')
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 85 |
1 files changed, 41 insertions, 44 deletions
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 9a8fdd44..dd4f5bb8 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -11,13 +11,17 @@ import React, { type ReactNode } from 'react'; | |||
11 | 11 | ||
12 | import { useRootStore } from '../RootStore'; | 12 | import { useRootStore } from '../RootStore'; |
13 | 13 | ||
14 | import EditorTheme from './EditorTheme'; | 14 | interface OuterPalette { |
15 | background: string; | ||
16 | border: string; | ||
17 | } | ||
15 | 18 | ||
16 | interface HighlightStyles { | 19 | interface HighlightPalette { |
17 | number: string; | 20 | number: string; |
18 | parameter: string; | 21 | parameter: string; |
19 | comment: string; | 22 | comment: string; |
20 | activeLine: string; | 23 | activeLine: string; |
24 | selection: string; | ||
21 | occurences: { | 25 | occurences: { |
22 | read: string; | 26 | read: string; |
23 | write: string; | 27 | write: string; |
@@ -26,19 +30,17 @@ interface HighlightStyles { | |||
26 | 30 | ||
27 | declare module '@mui/material/styles' { | 31 | declare module '@mui/material/styles' { |
28 | interface Palette { | 32 | interface Palette { |
29 | divider2: string; | 33 | outer: OuterPalette; |
30 | selection: Palette['primary']; | 34 | highlight: HighlightPalette; |
31 | highlight: HighlightStyles; | ||
32 | } | 35 | } |
33 | 36 | ||
34 | interface PaletteOptions { | 37 | interface PaletteOptions { |
35 | divider2: string; | 38 | outer: OuterPalette; |
36 | selection: PaletteOptions['primary']; | 39 | highlight: HighlightPalette; |
37 | highlight: HighlightStyles; | ||
38 | } | 40 | } |
39 | } | 41 | } |
40 | 42 | ||
41 | function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions { | 43 | function getMUIThemeOptions(darkMode: boolean): ThemeOptions { |
42 | const components: Components = { | 44 | const components: Components = { |
43 | MuiButton: { | 45 | MuiButton: { |
44 | styleOverrides: { | 46 | styleOverrides: { |
@@ -67,32 +69,8 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions { | |||
67 | }, | 69 | }, |
68 | }; | 70 | }; |
69 | 71 | ||
70 | switch (currentTheme) { | 72 | return darkMode |
71 | case EditorTheme.Light: | 73 | ? { |
72 | return { | ||
73 | components, | ||
74 | palette: { | ||
75 | mode: 'light', | ||
76 | primary: { main: '#0097a7' }, | ||
77 | selection: { | ||
78 | main: '#c8e4fb', | ||
79 | contrastText: '#000', | ||
80 | }, | ||
81 | divider2: '#d7d7d7', | ||
82 | highlight: { | ||
83 | number: '#1976d2', | ||
84 | parameter: '#6a3e3e', | ||
85 | comment: alpha('#000', 0.38), | ||
86 | activeLine: '#f5f5f5', | ||
87 | occurences: { | ||
88 | read: '#ceccf7', | ||
89 | write: '#f0d8a8', | ||
90 | }, | ||
91 | }, | ||
92 | }, | ||
93 | }; | ||
94 | case EditorTheme.Dark: | ||
95 | return { | ||
96 | components, | 74 | components, |
97 | palette: { | 75 | palette: { |
98 | mode: 'dark', | 76 | mode: 'dark', |
@@ -111,34 +89,53 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions { | |||
111 | disabled: '#4b5263', | 89 | disabled: '#4b5263', |
112 | }, | 90 | }, |
113 | divider: alpha('#abb2bf', 0.16), | 91 | divider: alpha('#abb2bf', 0.16), |
114 | divider2: '#181a1f', | 92 | outer: { |
115 | selection: { | 93 | background: '#21252b', |
116 | main: '#3e4453', | 94 | border: '#181a1f', |
117 | contrastText: '#fff', | ||
118 | }, | 95 | }, |
119 | highlight: { | 96 | highlight: { |
120 | number: '#6188a6', | 97 | number: '#6188a6', |
121 | parameter: '#c8ae9d', | 98 | parameter: '#c8ae9d', |
122 | comment: '#6b717d', | 99 | comment: '#6b717d', |
123 | activeLine: '#21252b', | 100 | activeLine: '#21252b', |
101 | selection: '#3e4453', | ||
124 | occurences: { | 102 | occurences: { |
125 | read: 'rgba(255, 255, 255, 0.15)', | 103 | read: 'rgba(255, 255, 255, 0.15)', |
126 | write: 'rgba(255, 255, 128, 0.4)', | 104 | write: 'rgba(255, 255, 128, 0.4)', |
127 | }, | 105 | }, |
128 | }, | 106 | }, |
129 | }, | 107 | }, |
108 | } | ||
109 | : { | ||
110 | components, | ||
111 | palette: { | ||
112 | mode: 'light', | ||
113 | primary: { main: '#0097a7' }, | ||
114 | outer: { | ||
115 | background: '#f5f5f5', | ||
116 | border: '#d7d7d7', | ||
117 | }, | ||
118 | highlight: { | ||
119 | number: '#1976d2', | ||
120 | parameter: '#6a3e3e', | ||
121 | comment: alpha('#000', 0.38), | ||
122 | activeLine: '#f5f5f5', | ||
123 | selection: '#c8e4fb', | ||
124 | occurences: { | ||
125 | read: '#ceccf7', | ||
126 | write: '#f0d8a8', | ||
127 | }, | ||
128 | }, | ||
129 | }, | ||
130 | }; | 130 | }; |
131 | default: | ||
132 | throw new Error(`Unknown theme: ${currentTheme}`); | ||
133 | } | ||
134 | } | 131 | } |
135 | 132 | ||
136 | function ThemeProvider({ children }: { children?: ReactNode }) { | 133 | function ThemeProvider({ children }: { children?: ReactNode }) { |
137 | const { | 134 | const { |
138 | themeStore: { currentTheme }, | 135 | themeStore: { darkMode }, |
139 | } = useRootStore(); | 136 | } = useRootStore(); |
140 | 137 | ||
141 | const themeOptions = getMUIThemeOptions(currentTheme); | 138 | const themeOptions = getMUIThemeOptions(darkMode); |
142 | const theme = responsiveFontSizes(createTheme(themeOptions)); | 139 | const theme = responsiveFontSizes(createTheme(themeOptions)); |
143 | 140 | ||
144 | return ( | 141 | return ( |