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)'); constructor(domtoolsRefArg: DomTools) { this.domtoolsRef = domtoolsRefArg; // lets take care of elements being added that need to know of the current theme this.domtoolsRef.elementInstrumenter.connectedElements.eventSubject.subscribe(async eventData => { await this.setThemeStatusForElement(eventData.payload, this.goBrightBoolean); }); // lets care this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches; this.preferredColorSchemeMediaMatch.addEventListener('change', eventArg => { this.goBrightBoolean = eventArg.matches; this.updateAllConnectedElements(); }); } private async setThemeStatusForElement (elementArg: LitElement, goBrightBool: boolean) { const goBright = (elementArg as any).goBright; if (typeof goBright === 'boolean') { (elementArg as any).goBright = goBrightBool; } } private async updateAllConnectedElements() { document.body.style.background = this.goBrightBoolean ? '#fff' : '#000'; this.domtoolsRef.elementInstrumenter.forEachelement(async elementArg => { await this.setThemeStatusForElement(elementArg, this.goBrightBoolean); }); } public goBright() { this.goBrightBoolean = true; this.updateAllConnectedElements(); } public goDark() { this.goBrightBoolean = false; this.updateAllConnectedElements(); } public toggleDarkBright() { this.goBrightBoolean = !this.goBrightBoolean; this.updateAllConnectedElements(); } }