54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
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() {
|
|
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();
|
|
}
|
|
} |