diff options
-rw-r--r-- | subprojects/frontend/index.html | 16 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeStore.ts | 42 |
2 files changed, 50 insertions, 8 deletions
diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html index e14e8d30..a3e52ef9 100644 --- a/subprojects/frontend/index.html +++ b/subprojects/frontend/index.html | |||
@@ -10,8 +10,8 @@ | |||
10 | <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96"> | 10 | <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96"> |
11 | <link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" sizes="180x180"> | 11 | <link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" sizes="180x180"> |
12 | <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99"> | 12 | <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99"> |
13 | <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#21252b"> | 13 | <meta name="theme-color" media="(prefers-color-scheme:light)" content="#fafafa"> |
14 | <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"> | 14 | <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b"> |
15 | <style> | 15 | <style> |
16 | @import '@fontsource/jetbrains-mono/variable.css'; | 16 | @import '@fontsource/jetbrains-mono/variable.css'; |
17 | @import '@fontsource/jetbrains-mono/variable-italic.css'; | 17 | @import '@fontsource/jetbrains-mono/variable-italic.css'; |
@@ -270,8 +270,16 @@ | |||
270 | } | 270 | } |
271 | 271 | ||
272 | body { | 272 | body { |
273 | color: #ebebff; | 273 | color: #35373e; |
274 | background: #282c34; | 274 | background: #ffffff; |
275 | font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; | ||
276 | } | ||
277 | |||
278 | @media (prefers-color-scheme: dark) { | ||
279 | body { | ||
280 | color: #ebebff; | ||
281 | background: #282c34; | ||
282 | } | ||
275 | } | 283 | } |
276 | </style> | 284 | </style> |
277 | </head> | 285 | </head> |
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts index 11391b06..6fbd9f90 100644 --- a/subprojects/frontend/src/theme/ThemeStore.ts +++ b/subprojects/frontend/src/theme/ThemeStore.ts | |||
@@ -1,16 +1,50 @@ | |||
1 | import { action, makeObservable, observable } from 'mobx'; | 1 | import { action, computed, makeObservable, observable } from 'mobx'; |
2 | |||
3 | export enum ThemePreference { | ||
4 | System, | ||
5 | PreferLight, | ||
6 | PreferDark, | ||
7 | } | ||
2 | 8 | ||
3 | export default class ThemeStore { | 9 | export default class ThemeStore { |
4 | darkMode = true; | 10 | preference = ThemePreference.System; |
11 | |||
12 | systemDarkMode: boolean; | ||
5 | 13 | ||
6 | constructor() { | 14 | constructor() { |
15 | const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); | ||
16 | this.systemDarkMode = mediaQuery.matches; | ||
17 | mediaQuery.addEventListener('change', (event) => { | ||
18 | this.systemDarkMode = event.matches; | ||
19 | }); | ||
7 | makeObservable(this, { | 20 | makeObservable(this, { |
8 | darkMode: observable, | 21 | preference: observable, |
22 | systemDarkMode: observable, | ||
23 | darkMode: computed, | ||
9 | toggleDarkMode: action, | 24 | toggleDarkMode: action, |
10 | }); | 25 | }); |
11 | } | 26 | } |
12 | 27 | ||
28 | get darkMode(): boolean { | ||
29 | switch (this.preference) { | ||
30 | case ThemePreference.PreferLight: | ||
31 | return false; | ||
32 | case ThemePreference.PreferDark: | ||
33 | return true; | ||
34 | default: | ||
35 | return this.systemDarkMode; | ||
36 | } | ||
37 | } | ||
38 | |||
13 | toggleDarkMode(): void { | 39 | toggleDarkMode(): void { |
14 | this.darkMode = !this.darkMode; | 40 | if (this.darkMode) { |
41 | this.preference = this.systemDarkMode | ||
42 | ? ThemePreference.PreferLight | ||
43 | : ThemePreference.System; | ||
44 | } else { | ||
45 | this.preference = this.systemDarkMode | ||
46 | ? ThemePreference.System | ||
47 | : ThemePreference.PreferDark; | ||
48 | } | ||
15 | } | 49 | } |
16 | } | 50 | } |