diff options
Diffstat (limited to 'subprojects/frontend/src/theme/ThemeStore.ts')
-rw-r--r-- | subprojects/frontend/src/theme/ThemeStore.ts | 64 |
1 files changed, 14 insertions, 50 deletions
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts index ffaf6dde..ded1f29a 100644 --- a/subprojects/frontend/src/theme/ThemeStore.ts +++ b/subprojects/frontend/src/theme/ThemeStore.ts | |||
@@ -1,64 +1,28 @@ | |||
1 | import { makeAutoObservable } from 'mobx'; | 1 | import { makeAutoObservable } from 'mobx'; |
2 | import { | ||
3 | Theme, | ||
4 | createTheme, | ||
5 | responsiveFontSizes, | ||
6 | } from '@mui/material/styles'; | ||
7 | 2 | ||
8 | import { | 3 | import EditorTheme from './EditorTheme'; |
9 | EditorTheme, | ||
10 | EditorThemeData, | ||
11 | DEFAULT_THEME, | ||
12 | EDITOR_THEMES, | ||
13 | } from './EditorTheme'; | ||
14 | 4 | ||
15 | export class ThemeStore { | 5 | export default class ThemeStore { |
16 | currentTheme: EditorTheme = DEFAULT_THEME; | 6 | currentTheme: EditorTheme = EditorTheme.Default; |
17 | 7 | ||
18 | constructor() { | 8 | constructor() { |
19 | makeAutoObservable(this); | 9 | makeAutoObservable(this); |
20 | } | 10 | } |
21 | 11 | ||
22 | toggleDarkMode(): void { | 12 | toggleDarkMode(): void { |
23 | this.currentTheme = this.currentThemeData.toggleDarkMode; | 13 | switch (this.currentTheme) { |
24 | } | 14 | case EditorTheme.Light: |
25 | 15 | this.currentTheme = EditorTheme.Dark; | |
26 | private get currentThemeData(): EditorThemeData { | 16 | break; |
27 | return EDITOR_THEMES[this.currentTheme]; | 17 | case EditorTheme.Dark: |
28 | } | 18 | this.currentTheme = EditorTheme.Light; |
29 | 19 | break; | |
30 | get materialUiTheme(): Theme { | 20 | default: |
31 | const themeData = this.currentThemeData; | 21 | throw new Error(`Unknown theme: ${this.currentTheme}`); |
32 | const materialUiTheme = createTheme({ | 22 | } |
33 | palette: { | ||
34 | mode: themeData.paletteMode, | ||
35 | background: { | ||
36 | default: themeData.background, | ||
37 | paper: themeData.background, | ||
38 | }, | ||
39 | primary: { | ||
40 | main: themeData.primary, | ||
41 | }, | ||
42 | secondary: { | ||
43 | main: themeData.secondary, | ||
44 | }, | ||
45 | error: { | ||
46 | main: themeData.secondary, | ||
47 | }, | ||
48 | text: { | ||
49 | primary: themeData.foregroundHighlight, | ||
50 | secondary: themeData.foreground, | ||
51 | }, | ||
52 | }, | ||
53 | }); | ||
54 | return responsiveFontSizes(materialUiTheme); | ||
55 | } | 23 | } |
56 | 24 | ||
57 | get darkMode(): boolean { | 25 | get darkMode(): boolean { |
58 | return this.currentThemeData.paletteMode === 'dark'; | 26 | return this.currentTheme === EditorTheme.Dark; |
59 | } | ||
60 | |||
61 | get className(): string { | ||
62 | return this.currentThemeData.className; | ||
63 | } | 27 | } |
64 | } | 28 | } |