gitdxd-theme/templates/custom/header.tmpl

<style>
  /* ── Neumorphic dark / light theme toggle ───────────────────────── */
  .dxd-theme-toggle {
    --tt-w: 54px;
    --tt-h: 28px;
    --tt-pad: 3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--tt-w);
    height: var(--tt-h);
    margin: 0 0.55rem;
    padding: 0;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    background: var(--color-body, #17171a);
    box-shadow: var(--nm-inset-sm, inset 2px 2px 5px rgba(0, 0, 0, 0.45), inset -2px -2px 5px rgba(255, 255, 255, 0.04));
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.18s ease;
  }
  .dxd-theme-toggle .dxd-tt-icon {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--color-text-light-3, #8f8f96);
    opacity: 0.7;
    pointer-events: none;
    transition: color 0.18s ease, opacity 0.18s ease;
  }
  .dxd-theme-toggle .dxd-tt-icon svg { width: 100%; height: 100%; display: block; }
  .dxd-theme-toggle .dxd-tt-sun { left: 8px; }
  .dxd-theme-toggle .dxd-tt-moon { right: 8px; }
  .dxd-theme-toggle .dxd-tt-knob {
    position: absolute;
    top: var(--tt-pad);
    left: var(--tt-pad);
    width: calc(var(--tt-h) - var(--tt-pad) * 2);
    height: calc(var(--tt-h) - var(--tt-pad) * 2);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-box-body, #1d1d20), var(--color-body, #17171a));
    box-shadow: var(--nm-raised-xs, 1px 1px 3px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(255, 255, 255, 0.05));
    transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s ease;
  }
  .dxd-theme-toggle[data-mode="dark"] .dxd-tt-knob {
    transform: translateX(calc(var(--tt-w) - var(--tt-h)));
  }
  .dxd-theme-toggle[data-mode="light"] .dxd-tt-sun { color: var(--color-primary, #dcdce1); opacity: 1; }
  .dxd-theme-toggle[data-mode="dark"] .dxd-tt-moon { color: var(--color-primary, #dcdce1); opacity: 1; }
  .dxd-theme-toggle:hover .dxd-tt-knob {
    box-shadow: var(--nm-raised-sm, 2px 2px 6px rgba(0, 0, 0, 0.45), -2px -2px 6px rgba(255, 255, 255, 0.05));
  }
  .dxd-theme-toggle:active .dxd-tt-knob {
    box-shadow: var(--nm-inset-sm, inset 2px 2px 5px rgba(0, 0, 0, 0.45), inset -2px -2px 5px rgba(255, 255, 255, 0.04));
  }
  .dxd-theme-toggle:focus-visible {
    outline: 2px solid var(--color-primary, #dcdce1);
    outline-offset: 2px;
  }
  .navbar-right > .dxd-theme-toggle { order: -1; }
  @media (max-width: 767px) {
    .dxd-theme-toggle { --tt-w: 48px; --tt-h: 26px; margin: 0 0.3rem; }
  }
</style>
<script>
(function () {
  "use strict";
  var LIGHT = "aurora-light";
  var DARK = "2026-dark";
  var KEY = "dxd-theme-2026";

  function themeLink() {
    return document.querySelector('link[rel="stylesheet"][href*="/css/theme-"]');
  }

  function apply(name) {
    var link = themeLink();
    if (link) {
      var href = link.getAttribute("href");
      link.setAttribute("href", href.replace(/\/theme-[^\/?]+\.css/, "/theme-" + name + ".css"));
    }
    document.documentElement.setAttribute("data-theme", name);
  }

  function mode() {
    var link = themeLink();
    if (!link) return "dark";
    return /-light\.css/.test(link.getAttribute("href")) ? "light" : "dark";
  }

  /* Apply the saved preference before the page paints, so there is no flash. */
  try {
    localStorage.removeItem("dxd-theme");
    var saved = localStorage.getItem(KEY);
    if (saved === "dark") apply(DARK);
    else if (saved === "light") apply(LIGHT);
  } catch (e) { /* localStorage unavailable */ }

  function build() {
    var right = document.querySelector(".navbar-right");
    if (!right || document.getElementById("dxd-theme-toggle")) return;

    var btn = document.createElement("button");
    btn.id = "dxd-theme-toggle";
    btn.type = "button";
    btn.className = "dxd-theme-toggle";
    btn.setAttribute("role", "switch");
    btn.setAttribute("aria-label", "Toggle dark mode");
    btn.innerHTML =
      '<span class="dxd-tt-icon dxd-tt-sun">' +
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">' +
          '<circle cx="12" cy="12" r="4.4"></circle>' +
          '<path d="M12 2v2.6M12 19.4V22M2 12h2.6M19.4 12H22M5 5l1.8 1.8M17.2 17.2 19 19M19 5l-1.8 1.8M6.8 17.2 5 19"></path>' +
        '</svg>' +
      '</span>' +
      '<span class="dxd-tt-icon dxd-tt-moon">' +
        '<svg viewBox="0 0 24 24" fill="currentColor">' +
          '<path d="M21 12.9A9 9 0 1 1 11.1 3a7 7 0 0 0 9.9 9.9Z"></path>' +
        '</svg>' +
      '</span>' +
      '<span class="dxd-tt-knob"></span>';

    function sync() {
      var dark = mode() === "dark";
      btn.setAttribute("data-mode", dark ? "dark" : "light");
      btn.setAttribute("aria-checked", dark ? "true" : "false");
      btn.setAttribute("title", dark ? "Switch to light mode" : "Switch to dark mode");
    }

    btn.addEventListener("click", function () {
      var next = mode() === "dark" ? "light" : "dark";
      apply(next === "dark" ? DARK : LIGHT);
      try { localStorage.setItem(KEY, next); } catch (e) { /* ignore */ }
      sync();
    });

    right.insertBefore(btn, right.firstChild);
    sync();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", build);
  } else {
    build();
  }
})();
</script>