theme v2

outputs/preview-assets/base.css

@@ -11,6 +11,8 @@
       --tb-surface: #ffffff;
       --tb-surface-2: #f4f6f8;
       --tb-surface-hover: #f3f7ff;
+      /* 顶栏底色：默认跟随卡片面；主题想消除「纯白顶栏压在彩色底上」的割裂时单独覆盖 */
+      --tb-navbar: var(--tb-surface);
       --tb-border: #e8eaee;
       --tb-text: #1f2329;
       --tb-text-secondary: #5c6370;
@@ -23,6 +25,10 @@
       --tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
       --tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
       --tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
+      /* 整页背景：主题可覆盖。图案层叠在背景图之上，两者都不用时保持纯色底。 */
+      --tb-page-image: none;
+      --tb-page-pattern: none;
+      --tb-page-pattern-size: auto;
   }
   html[data-theme="dark"] {
       --tb-bg: #1a1d23;
@@ -134,7 +140,7 @@
       color: var(--tb-text) !important;
   }
   html[data-theme="dark"] .uk-navbar-container {
-      background-color: var(--tb-surface) !important;
+      background-color: var(--tb-navbar, var(--tb-surface)) !important;
       color: var(--tb-text) !important;
   }
   html[data-theme="dark"] .uk-navbar-nav > li > a,
@@ -239,12 +245,19 @@
   html[data-theme="dark"] .explore-intro {
       color: var(--tb-text-muted) !important;
   }
-  /* 切换按钮图标切换 */
+  /* 切换按钮图标切换（内联 SVG，不依赖 UIkit 图标库） */
+  #theme-toggle .tb-icon-light, #theme-toggle-mobile .tb-icon-light,
+  #theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark {
+      display: inline-flex;
+      align-items: center;
+  }
+  #theme-toggle .tb-icon-light svg, #theme-toggle-mobile .tb-icon-light svg,
+  #theme-toggle .tb-icon-dark svg, #theme-toggle-mobile .tb-icon-dark svg { display: block; }
   #theme-toggle .tb-icon-dark, #theme-toggle-mobile .tb-icon-dark { display: none; }
   html[data-theme="dark"] #theme-toggle .tb-icon-light,
   html[data-theme="dark"] #theme-toggle-mobile .tb-icon-light { display: none; }
   html[data-theme="dark"] #theme-toggle .tb-icon-dark,
-  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline; }
+  html[data-theme="dark"] #theme-toggle-mobile .tb-icon-dark { display: inline-flex; }
 
 /* 基础质感层：只调整外观（圆角/投影/字体/数字对齐），不改任何结构与布局。
    颜色一律取自头部令牌，亮暗两套自动生效，因此这里不需要再写 html[data-theme="dark"] 分支。 */
@@ -253,6 +266,12 @@
   body {
       font-family: var(--tb-font);
       background-color: var(--tb-bg);
+      /* 主题的整页背景：图案（平铺）在上，图片（cover）在下，都不设置时等价于纯色 */
+      background-image: var(--tb-page-pattern, none), var(--tb-page-image, none);
+      background-size: var(--tb-page-pattern-size, auto), cover;
+      background-repeat: repeat, no-repeat;
+      background-position: left top, center center;
+      background-attachment: scroll, fixed;
       color: var(--tb-text);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
@@ -306,7 +325,7 @@
       box-shadow: var(--tb-shadow);
   }
   .uk-navbar-container:not(.uk-navbar-transparent) {
-      background-color: var(--tb-surface);
+      background-color: var(--tb-navbar, var(--tb-surface));
   }
   /* 键盘可达性：仅在键盘聚焦时出现描边，鼠标点击不出现 */
   .uk-button:focus-visible,
@@ -320,6 +339,89 @@
       color: var(--tb-text-muted);
   }
   
+/* 主题选择器（设置页）：色块 + 名称。纯展示，不参与主题令牌，所以放在基础层。 */
+.tb-theme-hint {
+    margin: 0 0 6px;
+    font-size: 0.8rem;
+    color: var(--tb-text-muted);
+}
+.tb-theme-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+    margin: 8px 0 2px;
+}
+.tb-theme-opt {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 9px;
+    border: 1px solid var(--tb-border);
+    border-radius: var(--tb-radius-sm);
+    cursor: pointer;
+}
+.tb-theme-opt:hover {
+    background-color: var(--tb-surface-hover);
+}
+.tb-theme-opt input {
+    margin: 0;
+}
+.tb-theme-swatch {
+    flex: 0 0 auto;
+    width: 26px;
+    height: 26px;
+    border-radius: var(--tb-radius-xs);
+    border: 1px solid var(--tb-border);
+    background-color: var(--tb-surface-2);
+}
+/* 选中态用描边而不是 :has()，兼容老 WebView */
+.tb-theme-opt input:checked + .tb-theme-swatch {
+    outline: 2px solid var(--tb-primary);
+    outline-offset: 1px;
+}
+.tb-theme-name {
+    font-size: 0.84rem;
+    line-height: 1.3;
+}
+.tb-theme-opt input:checked ~ .tb-theme-name {
+    color: var(--tb-primary);
+}
+
+/* UIkit 组件跟随主题色：UIkit 3.3.3 的主色是编译期常量（#1e87f0），
+   CSS 变量注入不进去，只能按组件覆盖。基础主题的 --tb-primary 恰好就是 #1e87f0，
+   所以这段对默认外观零改动，只是让箱主主题能贯穿到按钮/链接/勾选。 */
+a, .uk-link {
+    color: var(--tb-primary);
+}
+a:hover, .uk-link:hover {
+    color: var(--tb-primary);
+}
+.uk-button-primary {
+    background-color: var(--tb-primary);
+}
+.uk-button-primary:hover,
+.uk-button-primary:focus {
+    background-color: var(--tb-primary);
+    filter: brightness(1.07);
+}
+.uk-checkbox:checked,
+.uk-checkbox:indeterminate,
+.uk-radio:checked {
+    background-color: var(--tb-primary);
+    border-color: transparent;
+}
+.uk-input:focus,
+.uk-select:focus,
+.uk-textarea:focus {
+    border-color: var(--tb-primary);
+}
+.uk-tab > .uk-active > a {
+    border-color: var(--tb-primary);
+}
+.uk-text-primary {
+    color: var(--tb-primary) !important;
+}
+
 /* 轻量胶囊：用于投票类型、热门标签等「只是分类信息」的位置。
    实心 uk-label 一屏多个会变成一排色块，这里统一降级为浅底 + 次要色文字。 */
 .tb-chip {
@@ -609,11 +711,13 @@ a.tb-chip:hover {
     border-radius: var(--tb-radius-xs);
 }
 .uk-progress::-webkit-progress-value {
+    /* 两端都圆：值 100% 时若只圆左边，右端方角会顶出轨道圆角 */
     background-color: var(--tb-primary);
-    border-radius: var(--tb-radius-xs) 0 0 var(--tb-radius-xs);
+    border-radius: var(--tb-radius-xs);
 }
 .uk-progress::-moz-progress-bar {
     background-color: var(--tb-primary);
+    border-radius: var(--tb-radius-xs);
 }
 
 /* 移动端底部操作栏：固定底栏承载语言切换与深色模式，桌面端隐藏 */

outputs/preview-box-dark.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · </title>
+  <title>预览 16:08 · </title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -636,7 +636,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
        href="/_/tester/1">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       <span class="tb-pin-flag" title="已置顶">⭐</span>
-      2026-10-19 15:15:39
+      2026-10-19 16:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">置顶的问题
 </p>
@@ -648,7 +648,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
        href="/_/tester/2">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       
-      2026-10-19 14:15:39
+      2026-10-19 15:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">普通问题
 </p>

outputs/preview-box-light.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · </title>
+  <title>预览 16:08 · </title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -636,7 +636,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
        href="/_/tester/1">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       <span class="tb-pin-flag" title="已置顶">⭐</span>
-      2026-10-19 15:15:39
+      2026-10-19 16:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">置顶的问题
 </p>
@@ -648,7 +648,7 @@ document.getElementById("introcolor").style.color = "#ffffff";
        href="/_/tester/2">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       
-      2026-10-19 14:15:39
+      2026-10-19 15:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">普通问题
 </p>

outputs/preview-explore-dark.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · 投票</title>
+  <title>预览 16:08 · 投票</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-explore-light.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · 投票</title>
+  <title>预览 16:08 · 投票</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-home-dark.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · TamaBox</title>
+  <title>预览 16:08 · TamaBox</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-home-light.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · TamaBox</title>
+  <title>预览 16:08 · TamaBox</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-profile-account-light.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · 设置</title>
+  <title>预览 16:08 · 设置</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-profile-dark.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · 设置</title>
+  <title>预览 16:08 · 设置</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-profile-light.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · 设置</title>
+  <title>预览 16:08 · 设置</title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">

outputs/preview-theme-sakura-dark.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · </title>
+  <title>预览 16:08 · </title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -22,13 +22,17 @@
   
   <link rel="stylesheet" href="/static/css/base.css?v="/>
   
-  <style>/* 樱花（sakura）：粉调 + 细网点图案，纯 CSS 实现，不依赖图片素材。
-   复制 _scaffold.css 写的示例：只覆盖令牌，未改动任何布局。 */
+  <style>/* 樱花（sakura）：粉调 + 极淡网点，纯 CSS 实现，不依赖图片素材。
+   只覆盖令牌，不改动任何布局。要点：
+   - 页面底色用纯色（不用渐变），保证整页色感一致；
+   - 顶栏与卡片都是「带粉调的暖白」而不是纯白，和粉底之间是过渡不是硬切；
+   - 网点放大到 24px、透明度降到 0.05，只作纸纹，不在留白处抢注意力。 */
 html[data-theme-style="sakura"] {
-    --tb-bg: #fff6f8;
-    --tb-surface: #ffffff;
-    --tb-surface-2: #fdeef2;
+    --tb-bg: #fceef3;
+    --tb-surface: #fffafc;
+    --tb-surface-2: #fbe8ee;
     --tb-surface-hover: #fdf1f5;
+    --tb-navbar: #fff6f9;
     --tb-border: #f2dde4;
 
     --tb-text: #3a2b30;
@@ -42,16 +46,17 @@ html[data-theme-style="sakura"] {
     --tb-shadow-hover: 0 1px 2px rgba(120, 60, 80, 0.07), 0 18px 40px -20px rgba(120, 60, 80, 0.30);
 
     --tb-page-image: none;
-    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.14) 1px, transparent 0);
-    --tb-page-pattern-size: 16px 16px;
+    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.05) 1px, transparent 1.4px);
+    --tb-page-pattern-size: 24px 24px;
 }
 
 html[data-theme="dark"][data-theme-style="sakura"] {
     --tb-bg: #241a1f;
-    --tb-surface: #2e2129;
+    --tb-surface: #2f2228;
     --tb-surface-2: #3a2a33;
     --tb-surface-hover: rgba(255, 138, 176, 0.10);
-    --tb-border: #49333d;
+    --tb-navbar: #2a1e24;
+    --tb-border: #4a333e;
 
     --tb-text: #f2e4e9;
     --tb-text-secondary: #c6aab4;
@@ -64,8 +69,8 @@ html[data-theme="dark"][data-theme-style="sakura"] {
     --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68);
 
     --tb-page-image: none;
-    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.10) 1px, transparent 0);
-    --tb-page-pattern-size: 16px 16px;
+    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.05) 1px, transparent 1.4px);
+    --tb-page-pattern-size: 24px 24px;
 }
 </style>
   
@@ -682,7 +687,7 @@ document.getElementById("introcolor").style.color = "#6b545c";
        href="/_/tester/1">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       <span class="tb-pin-flag" title="已置顶">⭐</span>
-      2026-10-19 15:15:39
+      2026-10-19 16:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">置顶的问题
 </p>
@@ -694,7 +699,7 @@ document.getElementById("introcolor").style.color = "#6b545c";
        href="/_/tester/2">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       
-      2026-10-19 14:15:39
+      2026-10-19 15:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">普通问题
 </p>

outputs/preview-theme-sakura-light.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>预览 15:15 · </title>
+  <title>预览 16:08 · </title>
   <meta name="msvalidate.01" content="2F185E8E63C93635F50B3574F3B31E42" />
   <meta name="description" content="狼的提问箱——一个无需注册、可匿名提问的匿名提问箱，安全地倾诉与回应。">
   <meta name="keywords" content="匿名提问箱,提问箱,匿名提问,狼的提问箱,匿名问答,匿名提问网站">
@@ -22,13 +22,17 @@
   
   <link rel="stylesheet" href="/static/css/base.css?v="/>
   
-  <style>/* 樱花（sakura）：粉调 + 细网点图案，纯 CSS 实现，不依赖图片素材。
-   复制 _scaffold.css 写的示例：只覆盖令牌，未改动任何布局。 */
+  <style>/* 樱花（sakura）：粉调 + 极淡网点，纯 CSS 实现，不依赖图片素材。
+   只覆盖令牌，不改动任何布局。要点：
+   - 页面底色用纯色（不用渐变），保证整页色感一致；
+   - 顶栏与卡片都是「带粉调的暖白」而不是纯白，和粉底之间是过渡不是硬切；
+   - 网点放大到 24px、透明度降到 0.05，只作纸纹，不在留白处抢注意力。 */
 html[data-theme-style="sakura"] {
-    --tb-bg: #fff6f8;
-    --tb-surface: #ffffff;
-    --tb-surface-2: #fdeef2;
+    --tb-bg: #fceef3;
+    --tb-surface: #fffafc;
+    --tb-surface-2: #fbe8ee;
     --tb-surface-hover: #fdf1f5;
+    --tb-navbar: #fff6f9;
     --tb-border: #f2dde4;
 
     --tb-text: #3a2b30;
@@ -42,16 +46,17 @@ html[data-theme-style="sakura"] {
     --tb-shadow-hover: 0 1px 2px rgba(120, 60, 80, 0.07), 0 18px 40px -20px rgba(120, 60, 80, 0.30);
 
     --tb-page-image: none;
-    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.14) 1px, transparent 0);
-    --tb-page-pattern-size: 16px 16px;
+    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.05) 1px, transparent 1.4px);
+    --tb-page-pattern-size: 24px 24px;
 }
 
 html[data-theme="dark"][data-theme-style="sakura"] {
     --tb-bg: #241a1f;
-    --tb-surface: #2e2129;
+    --tb-surface: #2f2228;
     --tb-surface-2: #3a2a33;
     --tb-surface-hover: rgba(255, 138, 176, 0.10);
-    --tb-border: #49333d;
+    --tb-navbar: #2a1e24;
+    --tb-border: #4a333e;
 
     --tb-text: #f2e4e9;
     --tb-text-secondary: #c6aab4;
@@ -64,8 +69,8 @@ html[data-theme="dark"][data-theme-style="sakura"] {
     --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68);
 
     --tb-page-image: none;
-    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.10) 1px, transparent 0);
-    --tb-page-pattern-size: 16px 16px;
+    --tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.05) 1px, transparent 1.4px);
+    --tb-page-pattern-size: 24px 24px;
 }
 </style>
   
@@ -682,7 +687,7 @@ document.getElementById("introcolor").style.color = "#6b545c";
        href="/_/tester/1">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       <span class="tb-pin-flag" title="已置顶">⭐</span>
-      2026-10-19 15:15:39
+      2026-10-19 16:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">置顶的问题
 </p>
@@ -694,7 +699,7 @@ document.getElementById("introcolor").style.color = "#6b545c";
        href="/_/tester/2">查看回答</a>
     <div class="uk-text-left uk-text-small uk-text-muted">
       
-      2026-10-19 14:15:39
+      2026-10-19 15:08:02
     </div>
     <p class="uk-text-small uk-text-break tb-preline tb-clamp-5">普通问题
 </p>