From fc6cf6169868e60c189e4b243330c3717ff159f3 Mon Sep 17 00:00:00 2001
From: Gregor Kleen <gkleen@yggdrasil.li>
Date: Thu, 26 May 2022 13:58:07 +0200
Subject: ...

---
 .../spm/frontend/src/app/color-scheme.service.ts   | 62 ++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 overlays/spm/frontend/src/app/color-scheme.service.ts

(limited to 'overlays/spm/frontend/src/app/color-scheme.service.ts')

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 @@
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { LocalStorage } from 'ngx-webstorage';
+
+type ColorScheme = "dark" | "light";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorSchemeService {
+  private renderer: Renderer2;
+  matcher!: MediaQueryList;
+
+  @LocalStorage('prefers-color-scheme')
+  public colorSchemeOverride: ColorScheme;
+
+  public activeColorScheme: BehaviorSubject<ColorScheme> = new BehaviorSubject("light");
+
+  constructor(rendererFactory: RendererFactory2,
+              mediaMatcher: MediaMatcher
+             ) {
+    // Create new renderer from renderFactory, to make it possible to use renderer2 in a service
+    this.renderer = rendererFactory.createRenderer(null, null);
+    this.matcher = mediaMatcher.matchMedia('(prefers-color-scheme: dark)');
+
+    this._listener = this._listener.bind(this);
+  }
+
+  init() {
+    this.matcher.addEventListener('change', this._listener);
+    this.load();
+  }
+
+  _listener(event: { matches: any; }) {
+    this.activeColorScheme.next(event.matches ? 'dark' : 'light');
+  }
+
+  destroy() {
+    this.matcher.removeEventListener('change', this._listener);
+  }
+
+  _getColorScheme() {
+    if (this.colorSchemeOverride) {
+      this.colorSchemeOverride
+    } else {
+      this.matcher.matches ? 'dark' : 'light'
+    }
+  }
+
+  load() {
+    this.activeColorScheme.next(this._getColorScheme());
+  }
+
+  update(scheme: ColorScheme) {
+    this.colorSchemeOverride = scheme;
+    this.activeColorScheme.next(scheme);
+  }
+
+  currentActive() {
+    return this.colorScheme;
+  }
+}
-- 
cgit v1.2.3