diff options
Diffstat (limited to 'overlays/spm/frontend/src/app/color-scheme.service.ts')
-rw-r--r-- | overlays/spm/frontend/src/app/color-scheme.service.ts | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/overlays/spm/frontend/src/app/color-scheme.service.ts b/overlays/spm/frontend/src/app/color-scheme.service.ts new file mode 100644 index 00000000..c56e9c23 --- /dev/null +++ b/overlays/spm/frontend/src/app/color-scheme.service.ts | |||
@@ -0,0 +1,62 @@ | |||
1 | import { Injectable, Renderer2, RendererFactory2 } from '@angular/core'; | ||
2 | import { MediaMatcher } from '@angular/cdk/layout'; | ||
3 | import { LocalStorage } from 'ngx-webstorage'; | ||
4 | |||
5 | type ColorScheme = "dark" | "light"; | ||
6 | |||
7 | @Injectable({ | ||
8 | providedIn: 'root' | ||
9 | }) | ||
10 | export class ColorSchemeService { | ||
11 | private renderer: Renderer2; | ||
12 | matcher!: MediaQueryList; | ||
13 | |||
14 | @LocalStorage('prefers-color-scheme') | ||
15 | public colorSchemeOverride: ColorScheme; | ||
16 | |||
17 | public activeColorScheme: BehaviorSubject<ColorScheme> = new BehaviorSubject("light"); | ||
18 | |||
19 | constructor(rendererFactory: RendererFactory2, | ||
20 | mediaMatcher: MediaMatcher | ||
21 | ) { | ||
22 | // Create new renderer from renderFactory, to make it possible to use renderer2 in a service | ||
23 | this.renderer = rendererFactory.createRenderer(null, null); | ||
24 | this.matcher = mediaMatcher.matchMedia('(prefers-color-scheme: dark)'); | ||
25 | |||
26 | this._listener = this._listener.bind(this); | ||
27 | } | ||
28 | |||
29 | init() { | ||
30 | this.matcher.addEventListener('change', this._listener); | ||
31 | this.load(); | ||
32 | } | ||
33 | |||
34 | _listener(event: { matches: any; }) { | ||
35 | this.activeColorScheme.next(event.matches ? 'dark' : 'light'); | ||
36 | } | ||
37 | |||
38 | destroy() { | ||
39 | this.matcher.removeEventListener('change', this._listener); | ||
40 | } | ||
41 | |||
42 | _getColorScheme() { | ||
43 | if (this.colorSchemeOverride) { | ||
44 | this.colorSchemeOverride | ||
45 | } else { | ||
46 | this.matcher.matches ? 'dark' : 'light' | ||
47 | } | ||
48 | } | ||
49 | |||
50 | load() { | ||
51 | this.activeColorScheme.next(this._getColorScheme()); | ||
52 | } | ||
53 | |||
54 | update(scheme: ColorScheme) { | ||
55 | this.colorSchemeOverride = scheme; | ||
56 | this.activeColorScheme.next(scheme); | ||
57 | } | ||
58 | |||
59 | currentActive() { | ||
60 | return this.colorScheme; | ||
61 | } | ||
62 | } | ||