import { LitElement } from 'lit-element'; import { DomTools } from './domtools.classes.domtools'; import * as plugins from './domtools.plugins'; export class ThemeManager { public domtoolsRef: DomTools; public goBrightBoolean = false; public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)'); public themeObservable = new plugins.smartrx.rxjs.ReplaySubject(1); constructor(domtoolsRefArg: DomTools) { this.domtoolsRef = domtoolsRefArg; // lets care this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches; this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => { this.goBrightBoolean = eventArg.matches; this.updateAllConnectedElements(); }); this.updateAllConnectedElements(); } private async updateAllConnectedElements() { if (document.body && document.body.style) { document.body.style.background = this.goBrightBoolean ? '#fff' : '#000'; } this.themeObservable.next(this.goBrightBoolean); } public goBright() { this.goBrightBoolean = true; this.updateAllConnectedElements(); } public goDark() { this.goBrightBoolean = false; this.updateAllConnectedElements(); } public toggleDarkBright() { this.goBrightBoolean = !this.goBrightBoolean; this.updateAllConnectedElements(); } }