aboutsummaryrefslogtreecommitdiffstats
path: root/subprojects/frontend/src/theme/ThemeStore.ts
diff options
context:
space:
mode:
Diffstat (limited to 'subprojects/frontend/src/theme/ThemeStore.ts')
-rw-r--r--subprojects/frontend/src/theme/ThemeStore.ts64
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 @@
1import { makeAutoObservable } from 'mobx'; 1import { makeAutoObservable } from 'mobx';
2import {
3 Theme,
4 createTheme,
5 responsiveFontSizes,
6} from '@mui/material/styles';
7 2
8import { 3import EditorTheme from './EditorTheme';
9 EditorTheme,
10 EditorThemeData,
11 DEFAULT_THEME,
12 EDITOR_THEMES,
13} from './EditorTheme';
14 4
15export class ThemeStore { 5export 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}