feat: 浅色/暗色主题并支持跟随系统

顶栏循环切换，localStorage 记忆；head 内联脚本避免首屏闪烁。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-30 04:54:15 +08:00
parent 1f777eebb1
commit 4a21d362d0
9 changed files with 353 additions and 56 deletions
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -10,6 +10,20 @@
  <meta property="og:title" content="{{.Title}}"/>
  {{if .Description}}<meta property="og:description" content="{{.Description}}"/>{{end}}
  {{if .OGImageURL}}<meta property="og:image" content="{{.OGImageURL}}"/>{{end}}
+  <script>
+  (function () {
+    try {
+      var key = "j13-theme";
+      var pref = localStorage.getItem(key) || "system";
+      if (pref !== "light" && pref !== "dark" && pref !== "system") pref = "system";
+      var dark = pref === "dark" || (pref === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+      var resolved = dark ? "dark" : "light";
+      document.documentElement.setAttribute("data-theme", resolved);
+      document.documentElement.setAttribute("data-theme-pref", pref);
+      document.documentElement.style.colorScheme = resolved;
+    } catch (e) {}
+  })();
+  </script>
  <link rel="stylesheet" href="/ssr-assets/site.css"/>
 </head>
 <body class="j13-body">
--- a/templates/base/navbar.tmpl
+++ b/templates/base/navbar.tmpl
@@ -13,6 +13,7 @@
        </span>
      </a>
      <nav class="j13-nav">
+        <button type="button" class="j13-theme-toggle" id="j13-theme-toggle" aria-label="切换主题" title="切换主题">主题</button>
        <a href="/#search">搜索</a>
        <a href="/boards">板块</a>
        {{if .ShowFriendLinksNav}}<a href="/links">友链</a>{{end}}