diff options
author | 2022-08-21 00:32:39 +0200 | |
---|---|---|
committer | 2022-08-21 00:32:39 +0200 | |
commit | 567c66ff87833fcc5404e7bb65d736c5796b5861 (patch) | |
tree | 6f051ba7b51e986f6509ab0eec97da62d042da26 /subprojects/frontend/src | |
parent | refactor(frontend): inline CSS and minify HTML (diff) | |
download | refinery-567c66ff87833fcc5404e7bb65d736c5796b5861.tar.gz refinery-567c66ff87833fcc5404e7bb65d736c5796b5861.tar.zst refinery-567c66ff87833fcc5404e7bb65d736c5796b5861.zip |
feat(frontend): try to match OS theme
Diffstat (limited to 'subprojects/frontend/src')
-rw-r--r-- | subprojects/frontend/src/theme/ThemeStore.ts | 42 |
1 files changed, 38 insertions, 4 deletions
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 | } |