summaryrefslogtreecommitdiff
path: root/overlays/spm/frontend/src/app/color-scheme.service.ts
diff options
context:
space:
mode:
Diffstat (limited to 'overlays/spm/frontend/src/app/color-scheme.service.ts')
-rw-r--r--overlays/spm/frontend/src/app/color-scheme.service.ts62
1 files changed, 0 insertions, 62 deletions
diff --git a/overlays/spm/frontend/src/app/color-scheme.service.ts b/overlays/spm/frontend/src/app/color-scheme.service.ts
deleted file mode 100644
index c56e9c23..00000000
--- a/overlays/spm/frontend/src/app/color-scheme.service.ts
+++ /dev/null
@@ -1,62 +0,0 @@
1import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
2import { MediaMatcher } from '@angular/cdk/layout';
3import { LocalStorage } from 'ngx-webstorage';
4
5type ColorScheme = "dark" | "light";
6
7@Injectable({
8 providedIn: 'root'
9})
10export 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}