theme v2

2026-10-19 16:16:07 +08:00
parent e9fba8b9ed
commit 3202ef9821
54 changed files with 12000 additions and 75 deletions
@@ -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);
 }

 /* 移动端底部操作栏：固定底栏承载语言切换与深色模式，桌面端隐藏 */