techstack.hadan.de/theme/default/js/dark-mode.js

/**
 * @package @wcj/dark-mode@1.0.14
 * Web Component that toggles dark mode 🌒
 * Github: https://github.com/jaywcjlove/dark-mode.git
 * Website: https://jaywcjlove.github.io/dark-mode
 *
 * Licensed under the MIT license.
 * @license Copyright © 2022. Licensed under the MIT License
 * @author kenny wong <wowohoo@qq.com>
 */
const t = document;
const e = '_dark_mode_theme_';
const s = 'permanent';
const o = 'colorschemechange';
const i = 'permanentcolorscheme';
const h = 'light';
const r = 'dark';
const n = (t, e, s = e) => {
  Object.defineProperty(t, s, {
    enumerable: true,
    get() {
      const t = this.getAttribute(e);
      return t === null ? '' : t;
    },
    set(t) {
      this.setAttribute(e, t);
    },
  });
};
const c = (t, e, s = e) => {
  Object.defineProperty(t, s, {
    enumerable: true,
    get() {
      return this.hasAttribute(e);
    },
    set(t) {
      if (t) {
        this.setAttribute(e, '');
      } else {
        this.removeAttribute(e);
      }
    },
  });
};
class a extends HTMLElement {
  static get observedAttributes() {
    return ['mode', h, r, s];
  }
  LOCAL_NANE = e;
  constructor() {
    super();
    this.t();
  }
  connectedCallback() {
    n(this, 'mode');
    n(this, r);
    n(this, h);
    c(this, s);
    const a = localStorage.getItem(e);
    if (a && [h, r].includes(a)) {
      this.mode = a;
      this.permanent = true;
    }
    if (this.permanent && !a) {
      localStorage.setItem(e, this.mode);
    }
    const l = [h, r].includes(a);
    if (this.permanent && a) {
      this.o();
    } else {
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        this.mode = r;
        this.o();
      }
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
        this.mode = h;
        this.o();
      }
    }
    if (!this.permanent && !l) {
      window.matchMedia('(prefers-color-scheme: light)').onchange = (t) => {
        this.mode = t.matches ? h : r;
        this.o();
      };
      window.matchMedia('(prefers-color-scheme: dark)').onchange = (t) => {
        this.mode = t.matches ? r : h;
        this.o();
      };
    }
    const d = new MutationObserver((s, h) => {
      this.mode = t.documentElement.dataset.colorMode;
      if (this.permanent && l) {
        localStorage.setItem(e, this.mode);
        this.i(i, { permanent: this.permanent });
      }
      this.h();
      this.i(o, { colorScheme: this.mode });
    });
    d.observe(t.documentElement, { attributes: true });
    this.i(o, { colorScheme: this.mode });
    this.h();
  }
  attributeChangedCallback(t, s, o) {
    if (t === 'mode' && s !== o && [h, r].includes(o)) {
      const t = localStorage.getItem(e);
      if (this.mode === t) {
        this.mode = o;
        this.h();
        this.o();
      } else if (this.mode && this.mode !== t) {
        this.h();
        this.o();
      }
    } else if ((t === h || t === r) && s !== o) {
      this.h();
    }
    if (t === 'permanent' && typeof this.permanent === 'boolean') {
      this.permanent ? localStorage.setItem(e, this.mode) : localStorage.removeItem(e);
    }
  }
  o() {
    t.documentElement.setAttribute('data-color-mode', this.mode);
  }
  h() {
    this.icon.textContent = this.mode === h ? '🌒' : '🌞';
    this.text.textContent = this.mode === h ? this.getAttribute(r) : this.getAttribute(h);
  }
  t() {
    var s = this.attachShadow({ mode: 'open' });
    this.label = t.createElement('span');
    this.label.setAttribute('class', 'wrapper');
    this.label.onclick = () => {
      this.mode = this.mode === h ? r : h;
      if (this.permanent) {
        localStorage.setItem(e, this.mode);
      }
      this.o();
      this.h();
    };
    s.appendChild(this.label);
    this.icon = t.createElement('span');
    this.label.appendChild(this.icon);
    this.text = t.createElement('span');
    this.label.appendChild(this.text);
    const o = `\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n  color-scheme: dark;\n  --color-theme-bg: #0d1117;\n  --color-theme-text: #c9d1d9;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n  color-scheme: light;\n  --color-theme-bg: #fff;\n  --color-theme-text: #24292f;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}`;
    const i = '_dark_mode_style_';
    const n = t.getElementById(i);
    if (!n) {
      var c = t.createElement('style');
      c.id = i;
      c.textContent = o;
      t.head.appendChild(c);
    }
    var a = t.createElement('style');
    a.textContent = `\n    .wrapper { cursor: pointer; user-select: none; position: relative; }\n    .wrapper > span + span { margin-left: .4rem; }\n    `;
    s.appendChild(a);
  }
  i(t, e) {
    this.dispatchEvent(new CustomEvent(t, { bubbles: true, composed: true, detail: e }));
  }
}
customElements.define('dark-mode', a);