diff options
author | 2022-08-16 21:14:50 +0200 | |
---|---|---|
committer | 2022-08-16 21:14:50 +0200 | |
commit | 19cd11118cde7160cd447c81bc965007c0437479 (patch) | |
tree | 5fea613e7a46d69380995368a68cc72f186078a4 /subprojects/frontend/src/theme | |
parent | chore(deps): bump frontend dependencies (diff) | |
download | refinery-19cd11118cde7160cd447c81bc965007c0437479.tar.gz refinery-19cd11118cde7160cd447c81bc965007c0437479.tar.zst refinery-19cd11118cde7160cd447c81bc965007c0437479.zip |
refactor(frondend): improve editor store and theme
Also bumps frontend dependencies.
Diffstat (limited to 'subprojects/frontend/src/theme')
-rw-r--r-- | subprojects/frontend/src/theme/EditorTheme.ts | 7 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 85 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeStore.ts | 26 |
3 files changed, 48 insertions, 70 deletions
diff --git a/subprojects/frontend/src/theme/EditorTheme.ts b/subprojects/frontend/src/theme/EditorTheme.ts deleted file mode 100644 index a16b4c3b..00000000 --- a/subprojects/frontend/src/theme/EditorTheme.ts +++ /dev/null | |||
@@ -1,7 +0,0 @@ | |||
1 | enum EditorTheme { | ||
2 | Light, | ||
3 | Dark, | ||
4 | Default = EditorTheme.Dark, | ||
5 | } | ||
6 | |||
7 | export default EditorTheme; | ||
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 ( |
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts index ded1f29a..11391b06 100644 --- a/subprojects/frontend/src/theme/ThemeStore.ts +++ b/subprojects/frontend/src/theme/ThemeStore.ts | |||
@@ -1,28 +1,16 @@ | |||
1 | import { makeAutoObservable } from 'mobx'; | 1 | import { action, makeObservable, observable } from 'mobx'; |
2 | |||
3 | import EditorTheme from './EditorTheme'; | ||
4 | 2 | ||
5 | export default class ThemeStore { | 3 | export default class ThemeStore { |
6 | currentTheme: EditorTheme = EditorTheme.Default; | 4 | darkMode = true; |
7 | 5 | ||
8 | constructor() { | 6 | constructor() { |
9 | makeAutoObservable(this); | 7 | makeObservable(this, { |
8 | darkMode: observable, | ||
9 | toggleDarkMode: action, | ||
10 | }); | ||
10 | } | 11 | } |
11 | 12 | ||
12 | toggleDarkMode(): void { | 13 | toggleDarkMode(): void { |
13 | switch (this.currentTheme) { | 14 | this.darkMode = !this.darkMode; |
14 | case EditorTheme.Light: | ||
15 | this.currentTheme = EditorTheme.Dark; | ||
16 | break; | ||
17 | case EditorTheme.Dark: | ||
18 | this.currentTheme = EditorTheme.Light; | ||
19 | break; | ||
20 | default: | ||
21 | throw new Error(`Unknown theme: ${this.currentTheme}`); | ||
22 | } | ||
23 | } | ||
24 | |||
25 | get darkMode(): boolean { | ||
26 | return this.currentTheme === EditorTheme.Dark; | ||
27 | } | 15 | } |
28 | } | 16 | } |