web/_includes/mode-toggle.html

<!-- Switch the mode between dark and light. -->

<script type="text/javascript">
  class ModeToggle {
    static get MODE_KEY() {
      return 'mode';
    }
    static get MODE_ATTR() {
      return 'data-mode';
    }
    static get DARK_MODE() {
      return 'dark';
    }
    static get LIGHT_MODE() {
      return 'light';
    }
    static get ID() {
      return 'mode-toggle';
    }

    constructor() {
      let self = this;

      {%- comment -%} always follow the system prefers {%- endcomment -%}
      this.sysDarkPrefers.addEventListener('change', () => {
        if (self.hasMode) {
          self.clearMode();
        }
        self.notify();
      });

      if (!this.hasMode) {
        return;
      }

      if (this.isDarkMode) {
        this.setDark();
      } else {
        this.setLight();
      }
    }

    get sysDarkPrefers() {
      return window.matchMedia('(prefers-color-scheme: dark)');
    }

    get isPreferDark() {
      return this.sysDarkPrefers.matches;
    }

    get isDarkMode() {
      return this.mode === ModeToggle.DARK_MODE;
    }

    get hasMode() {
      return this.mode != null;
    }

    get mode() {
      return sessionStorage.getItem(ModeToggle.MODE_KEY);
    }

    {%- comment -%} get the current mode on screen {%- endcomment -%}
    get modeStatus() {
      if (this.hasMode) {
        return this.mode;
      } else {
        return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE;
      }
    }

    setDark() {
      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
    }

    setLight() {
      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
    }

    clearMode() {
      document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
      sessionStorage.removeItem(ModeToggle.MODE_KEY);
    }

    {%- comment -%}
      Notify another plugins that the theme mode has changed
    {%- endcomment -%}
    notify() {
      window.postMessage(
        {
          direction: ModeToggle.ID,
          message: this.modeStatus
        },
        '*'
      );
    }

    flipMode() {
      if (this.hasMode) {
        this.clearMode();
      } else {
        if (this.isPreferDark) {
          this.setLight();
        } else {
          this.setDark();
        }
      }

      this.notify();
    }
  }

  const modeToggle = new ModeToggle();
</script>