dees-domtools/ts/domtools.classes.thememanager.ts

47 lines
1.3 KiB
TypeScript
Raw Normal View History

2020-11-24 19:18:59 +00:00
import { LitElement } from 'lit-element';
2020-11-23 20:41:26 +00:00
import { DomTools } from './domtools.classes.domtools';
import * as plugins from './domtools.plugins';
export class ThemeManager {
public domtoolsRef: DomTools;
2020-12-07 03:47:39 +00:00
2020-11-24 19:48:14 +00:00
public goBrightBoolean = false;
2020-11-25 15:42:55 +00:00
public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
2020-11-23 20:41:26 +00:00
2020-12-07 03:13:34 +00:00
public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
2020-11-23 20:41:26 +00:00
constructor(domtoolsRefArg: DomTools) {
this.domtoolsRef = domtoolsRefArg;
2020-11-25 15:42:55 +00:00
// lets care
this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
2020-12-07 03:47:39 +00:00
this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => {
2020-11-25 15:42:55 +00:00
this.goBrightBoolean = eventArg.matches;
this.updateAllConnectedElements();
});
2020-12-07 03:13:34 +00:00
this.updateAllConnectedElements();
2020-11-23 20:41:26 +00:00
}
2020-11-24 19:23:06 +00:00
private async updateAllConnectedElements() {
2020-12-07 03:47:39 +00:00
if (document.body && document.body.style) {
document.body.style.background = this.goBrightBoolean ? '#fff' : '#000';
}
2020-12-07 03:13:34 +00:00
this.themeObservable.next(this.goBrightBoolean);
2020-11-23 20:41:26 +00:00
}
2020-11-24 19:23:06 +00:00
public goBright() {
this.goBrightBoolean = true;
this.updateAllConnectedElements();
}
2020-11-23 20:41:26 +00:00
public goDark() {
2020-11-24 19:23:06 +00:00
this.goBrightBoolean = false;
this.updateAllConnectedElements();
}
public toggleDarkBright() {
this.goBrightBoolean = !this.goBrightBoolean;
this.updateAllConnectedElements();
2020-11-23 20:41:26 +00:00
}
2020-12-07 03:47:39 +00:00
}