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

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();
  }
}