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;
@@ -138,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,
@@ -323,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,
@@ -15,11 +15,13 @@
      display / flex / grid、position 一律不动 —— 主题不是换皮模板。
   3. 本文件不参与构建，仅作参考；真正生效的是同目录下的 <slug>.css。

-   ── 可用的 19 个令牌 ──────────────────────────────────────────────
+   ── 可用的 20 个令牌 ──────────────────────────────────────────────
   底色层   --tb-bg            页面底色（html/body）
            --tb-surface       卡片、输入框等前景面板
            --tb-surface-2     次级面（标签底、进度条轨道、代码块）
            --tb-surface-hover 悬停底（列表行、下拉项）
+            --tb-navbar        顶栏底色（不写则同 --tb-surface；
+                               页面底色不是白时建议覆盖成 bg 或它的同色，否则顶栏会成为一条白带）
   线条     --tb-border        边框、分隔线
   文字     --tb-text          正文
            --tb-text-secondary 次要文字（说明、meta）
@@ -50,6 +52,7 @@ html[data-theme-style="SLUG"] {
    --tb-surface: #ffffff;
    --tb-surface-2: #f4f6f8;
    --tb-surface-hover: #f3f7ff;
+    --tb-navbar: var(--tb-surface); /* 顶栏底色，需要时改成 var(--tb-bg) */
    --tb-border: #e8eaee;

    --tb-text: #1f2329;
@@ -1,10 +1,14 @@
-/* 樱花（sakura）：粉调 + 细网点图案，纯 CSS 实现，不依赖图片素材。
-   复制 _scaffold.css 写的示例：只覆盖令牌，未改动任何布局。 */
+/* 樱花（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;
@@ -18,16 +22,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;
@@ -40,6 +45,6 @@ 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;
 }
@@ -7,7 +7,7 @@
    {
      "collectionId": "tamabox",
      "collectionName": "tamabox-changelogs",
-      "content": "新增：箱主主题功能。设置页可为主题箱主页与单题页选择配色，只影响配色、图案与整页背景，不影响布局；未选择时跟随站点默认主题。<br>\n新增：主题底稿 static/css/themes/_scaffold.css，复制改名为 &lt;slug&gt;.css 并在 [theme] available 登记即可新增一套主题，无需改模板；示例主题「樱花」。",
+      "content": "新增：箱主主题功能。设置页可为主题选择配色、图案与整页背景（不影响布局）；提问箱页面（箱主页 / 单题页 / 密码页 / 分享卡）与箱主本人后台页面都会跟随所选主题，首页、探索等公开页保持站点默认外观；未选择时跟随站点默认主题。<br>\n新增：主题底稿 static/css/themes/_scaffold.css，复制改名为 &lt;slug&gt;.css 并在 [theme] available 登记即可新增一套主题，无需改模板；示例主题「樱花」。",
      "created": "2026-10-19 15:10:00.000Z",
      "id": "none",
      "published_at": "2026-10-19 15:10:00.000Z",