Add Forgejo theme and homepage

2026-10-22 21:07:24 +00:00 · 2026-10-22 21:07:24 +00:00 · 92363fca9b
commit 92363fca9b
31 changed files with 4044 additions and 0 deletions
--- a/templates/custom/header.tmpl
+++ b/templates/custom/header.tmpl
@ -0,0 +1,149 @@
+<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 = "aurora-dark";
+  var KEY = "dxd-theme";
+
+  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 "light";
+    return /-light\.css/.test(link.getAttribute("href")) ? "light" : "dark";
+  }
+
+  /* Apply the saved preference before the page paints, so there is no flash. */
+  try {
+    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>