theme v1

static/css/base.css

@@ -23,6 +23,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;
@@ -260,6 +264,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;
@@ -327,6 +337,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 {