From 83291f514931329735bde5d0ee260f9ba97ef50a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=B6=E8=AE=AD?=
 <zhangjiaxun-xf@bestpay.com.cn>
Date: Tue, 20 Oct 2026 15:09:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(public-todo):=20=E6=96=B0=E5=A2=9E=205=20?=
 =?UTF-8?q?=E5=A5=97=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=AF=BC=E5=85=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 主题系统：抽离 30+ 硬编码颜色为 CSS 变量（面板层次/光圈/语义色/光斑），
  筛选栏新增主题下拉，localStorage 持久化，head 内联脚本防暗色刷新闪白
- 5 套主题：紫罗兰（默认）/ 曜石黑（暗色）/ 松石青 / 暖阳橙 / 墨岩灰（极简）
- 环形进度条 SVG 渐变、meta theme-color 随主题联动
- 暗色主题覆盖 fmt pre / toast 配色，语义色（逾期红/临近蓝/今天橙）整体适配
- 移除导入功能（按钮/隐藏 file input/importJson 及事件绑定），保留导出
---
 public/todo-public.html | 309 +++++++++++++++++++++++++++-------------
 1 file changed, 210 insertions(+), 99 deletions(-)

diff --git a/public/todo-public.html b/public/todo-public.html
index 8544780..0777c6e 100644
--- a/public/todo-public.html
+++ b/public/todo-public.html
@@ -4,6 +4,13 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 <meta name="theme-color" content="#6366f1">
+<script>
+/* 提前应用已保存的主题，避免暗色主题刷新时白屏闪烁 */
+try {
+  var _t = localStorage.getItem('todo-theme')
+  if (_t && _t !== 'violet') document.documentElement.className = 't-' + _t
+} catch (e) { }
+</script>
 <title>待办清单 · 公开看板</title>
 <style>
   :root {
@@ -19,10 +26,119 @@
     --text-sub: #64748b;
     --text-muted: #94a3b8;
     --line: #e8ecf4;
+    --line-2: var(--line-2);
+    --line-strong: #cbd5e1;
     --radius: 16px;
     --shadow-sm: 0 1px 2px rgba(30, 41, 59, .05);
     --shadow: 0 4px 16px rgba(30, 41, 59, .07);
     --shadow-lg: 0 18px 44px rgba(30, 41, 59, .13);
+    /* 面板层次 */
+    --bg: var(--bg);
+    --surface: #fff;
+    --surface-2: var(--surface-2);
+    --surface-3: var(--surface-3);
+    --surface-4: var(--surface-4);
+    --surface-hover: var(--surface-hover);
+    --scrollbar: #d5dbea;
+    --scrollbar-hover: #b6c0d8;
+    /* 焦点光圈与主按钮辉光 */
+    --ring: rgba(99, 102, 241, .11);
+    --ring-soft: rgba(99, 102, 241, .1);
+    --ring-strong: rgba(99, 102, 241, .13);
+    --ring-inset: rgba(99, 102, 241, .38);
+    --glow: 0 6px 16px rgba(99, 102, 241, .32);
+    --glow-hover: 0 9px 22px rgba(99, 102, 241, .42);
+    /* 语义色（逾期/临近/今天） */
+    --danger-bg: #fff1f2;
+    --danger-border: #fecdd3;
+    --danger-surface: #fffafb;
+    --danger-text: #be123c;
+    --info-bg: #eff6ff;
+    --info-text: #1d4ed8;
+    --warn-bg: #fff7ed;
+    --warn-text: #c2410c;
+    /* 背景光斑 */
+    --blob-op: .48;
+    --blob1a: #a5b4fc; --blob1b: #818cf8;
+    --blob2a: #fbcfe8; --blob2b: #f9a8d4;
+    --blob3a: #a7f3d0; --blob3b: #6ee7b7;
+  }
+
+  /* ===== 主题 =====
+     html 上加 t-* class 切换；默认即紫罗兰 */
+  html.t-dark {
+    --indigo: #818cf8; --indigo-dark: #a5b4fc; --violet: #a78bfa; --pink: #f472b6;
+    --rose: #fb7185; --emerald: #34d399; --sky: #38bdf8;
+    --text: #e2e8f0; --text-sub: #94a3b8; --text-muted: #64748b;
+    --line: #31405c; --line-2: #3b4d6b; --line-strong: #4b617f;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
+    --shadow: 0 4px 16px rgba(0, 0, 0, .35);
+    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
+    --bg: #0f172a; --surface: #1e293b; --surface-2: #182236; --surface-3: #243244;
+    --surface-4: #2b3b52; --surface-hover: #33445c;
+    --scrollbar: #334155; --scrollbar-hover: #475569;
+    --ring: rgba(129, 140, 248, .16); --ring-soft: rgba(129, 140, 248, .14);
+    --ring-strong: rgba(129, 140, 248, .2); --ring-inset: rgba(129, 140, 248, .45);
+    --glow: 0 6px 16px rgba(129, 140, 248, .25);
+    --glow-hover: 0 9px 22px rgba(129, 140, 248, .38);
+    --danger-bg: rgba(244, 63, 94, .12); --danger-border: rgba(244, 63, 94, .35);
+    --danger-surface: rgba(244, 63, 94, .06); --danger-text: #fda4af;
+    --info-bg: rgba(56, 189, 248, .14); --info-text: #7dd3fc;
+    --warn-bg: rgba(251, 191, 36, .14); --warn-text: #fcd34d;
+    --blob-op: .22;
+    --blob1a: #4f46e5; --blob1b: #6366f1;
+    --blob2a: #7c3aed; --blob2b: #a78bfa;
+    --blob3a: #0f766e; --blob3b: #14b8a6;
+  }
+  html.t-dark .fmt pre { background: #0b1222; }
+  html.t-dark .toast { background: #334155; }
+
+  html.t-teal {
+    --indigo: #0d9488; --indigo-dark: #0f766e; --violet: #14b8a6; --pink: #2dd4bf;
+    --line: #e0eceb; --line-2: #d3e5e2; --line-strong: #b9d6d1;
+    --bg: #f4faf9; --surface-2: #f7fcfb; --surface-3: #eef6f4; --surface-4: #e3f1ef;
+    --surface-hover: #dcede9;
+    --scrollbar: #bfdcd7; --scrollbar-hover: #9cc8c1;
+    --ring: rgba(13, 148, 136, .12); --ring-soft: rgba(13, 148, 136, .1);
+    --ring-strong: rgba(13, 148, 136, .14); --ring-inset: rgba(13, 148, 136, .4);
+    --glow: 0 6px 16px rgba(13, 148, 136, .32);
+    --glow-hover: 0 9px 22px rgba(13, 148, 136, .42);
+    --blob-op: .4;
+    --blob1a: #5eead4; --blob1b: #2dd4bf;
+    --blob2a: #99f6e4; --blob2b: #5eead4;
+    --blob3a: #7dd3fc; --blob3b: #38bdf8;
+  }
+
+  html.t-amber {
+    --indigo: #d97706; --indigo-dark: #b45309; --violet: #f59e0b; --pink: #fb923c;
+    --line: #eee7db; --line-2: #e2d9c8; --line-strong: #d0c3a8;
+    --bg: #faf8f4; --surface-2: #fdfcf9; --surface-3: #f6f2ea; --surface-4: #f0e9dd;
+    --surface-hover: #e9e2d4;
+    --scrollbar: #ded2ba; --scrollbar-hover: #c9b995;
+    --ring: rgba(217, 119, 6, .12); --ring-soft: rgba(217, 119, 6, .1);
+    --ring-strong: rgba(217, 119, 6, .14); --ring-inset: rgba(217, 119, 6, .4);
+    --glow: 0 6px 16px rgba(245, 158, 11, .32);
+    --glow-hover: 0 9px 22px rgba(245, 158, 11, .42);
+    --blob-op: .4;
+    --blob1a: #fde68a; --blob1b: #fbbf24;
+    --blob2a: #fed7aa; --blob2b: #fb923c;
+    --blob3a: #fecaca; --blob3b: #fca5a5;
+  }
+
+  html.t-slate {
+    --indigo: #475569; --indigo-dark: #334155; --violet: #64748b; --pink: #94a3b8;
+    --line: #e5e8ec; --line-2: #d8dde3; --line-strong: #c4ccd6;
+    --bg: #f6f7f8; --surface-2: #fafbfc; --surface-3: #f1f3f5; --surface-4: #e8ebef;
+    --surface-hover: #e2e6eb;
+    --scrollbar: #ccd2da; --scrollbar-hover: #aeb7c3;
+    --ring: rgba(71, 85, 105, .12); --ring-soft: rgba(71, 85, 105, .1);
+    --ring-strong: rgba(71, 85, 105, .14); --ring-inset: rgba(71, 85, 105, .4);
+    --glow: 0 6px 16px rgba(71, 85, 105, .28);
+    --glow-hover: 0 9px 22px rgba(71, 85, 105, .38);
+    --blob-op: .32;
+    --blob1a: #cbd5e1; --blob1b: #94a3b8;
+    --blob2a: #e2e8f0; --blob2b: #cbd5e1;
+    --blob3a: #dbe4ee; --blob3b: #b9c6d6;
   }
 
   * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -33,7 +149,7 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
     color: var(--text);
-    background: #f7f8fc;
+    background: var(--bg);
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     line-height: 1.5;
@@ -41,10 +157,10 @@
 
   /* ===== 背景光斑 ===== */
   .bg-deco { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
-  .blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .48; animation: float 16s ease-in-out infinite; }
-  .blob-1 { width: 460px; height: 460px; top: -170px; left: -130px; background: linear-gradient(135deg, #a5b4fc, #818cf8); }
-  .blob-2 { width: 420px; height: 420px; top: -110px; right: -150px; background: linear-gradient(135deg, #fbcfe8, #f9a8d4); animation-delay: -5s; }
-  .blob-3 { width: 380px; height: 380px; bottom: -190px; left: 38%; background: linear-gradient(135deg, #a7f3d0, #6ee7b7); animation-delay: -9s; }
+  .blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: var(--blob-op); animation: float 16s ease-in-out infinite; }
+  .blob-1 { width: 460px; height: 460px; top: -170px; left: -130px; background: linear-gradient(135deg, var(--blob1a), var(--blob1b)); }
+  .blob-2 { width: 420px; height: 420px; top: -110px; right: -150px; background: linear-gradient(135deg, var(--blob2a), var(--blob2b)); animation-delay: -5s; }
+  .blob-3 { width: 380px; height: 380px; bottom: -190px; left: 38%; background: linear-gradient(135deg, var(--blob3a), var(--blob3b)); animation-delay: -9s; }
   @keyframes float {
     0%, 100% { transform: translate(0, 0) scale(1); }
     50% { transform: translate(24px, -30px) scale(1.07); }
@@ -75,8 +191,12 @@
   }
   .ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
   .ring svg { transform: rotate(-90deg); display: block; }
-  .ring .track { stroke: #eef1f8; }
+  .ring .track { stroke: var(--surface-4); }
   .ring .bar { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); }
+  /* 环形渐变跟随主题 */
+  #ringGrad .gs0 { stop-color: var(--indigo); }
+  #ringGrad .gs1 { stop-color: var(--violet); }
+  #ringGrad .gs2 { stop-color: var(--pink); }
   .ring .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--indigo-dark); }
   .ring-txt .big { font-size: 14px; font-weight: 700; }
   .ring-txt .small { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
@@ -84,7 +204,7 @@
   /* ===== 统计卡片 ===== */
   .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
   .stat {
-    position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
+    position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
     border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
     cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s;
   }
@@ -99,16 +219,16 @@
   .stat.overdue { color: var(--rose); }
 
   /* ===== 通用控件 ===== */
-  .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
+  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
 
   input[type="text"], input[type="date"], textarea {
     font-family: inherit; font-size: 14px; color: var(--text);
     border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 13px;
-    outline: none; background: #fbfcfe; width: 100%;
+    outline: none; background: var(--surface-2); width: 100%;
     transition: border-color .18s, box-shadow .18s, background .18s;
   }
   input[type="text"]:focus, input[type="date"]:focus, textarea:focus {
-    border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, .11);
+    border-color: var(--indigo); background: var(--surface); box-shadow: 0 0 0 4px var(--ring);
   }
   input::placeholder, textarea::placeholder { color: var(--text-muted); }
 
@@ -119,17 +239,17 @@
   .sel-btn {
     display: flex; align-items: center; gap: 7px; width: 100%;
     font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
-    background: #fbfcfe; border: 1.5px solid var(--line); border-radius: 11px;
+    background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px;
     padding: 9px 11px; cursor: pointer; white-space: nowrap; text-align: left;
     transition: border-color .18s, box-shadow .18s, background .18s;
   }
-  .sel-btn:hover { border-color: #d3dbec; background: #fff; }
-  .sel.open .sel-btn { border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, .11); }
+  .sel-btn:hover { border-color: var(--line-2); background: var(--surface); }
+  .sel.open .sel-btn { border-color: var(--indigo); background: var(--surface); box-shadow: 0 0 0 4px var(--ring); }
   .sel-btn .chev { flex-shrink: 0; margin-left: auto; color: var(--text-muted); transition: transform .22s; }
   .sel.open .sel-btn .chev { transform: rotate(180deg); }
   .sel-menu {
     position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 30;
-    background: #fff; border: 1px solid var(--line); border-radius: 12px;
+    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
     box-shadow: var(--shadow-lg); padding: 5px;
     opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
     transition: opacity .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
@@ -145,8 +265,8 @@
     color: var(--text-sub); cursor: pointer;
     transition: background .14s, color .14s;
   }
-  .sel-opt:hover { background: #f1f4fa; color: var(--text); }
-  .sel-opt.on { background: rgba(99, 102, 241, .1); color: var(--indigo-dark); }
+  .sel-opt:hover { background: var(--surface-3); color: var(--text); }
+  .sel-opt.on { background: var(--ring-soft); color: var(--indigo-dark); }
   .sel-opt .tick { margin-left: auto; flex-shrink: 0; opacity: 0; color: var(--indigo); }
   .sel-opt.on .tick { opacity: 1; }
   .sel-txt.ph { color: var(--text-muted); font-weight: 500; }
@@ -159,7 +279,7 @@
     color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center;
     transition: background .14s, color .14s;
   }
-  .dp-nav:hover { background: #f1f4fa; color: var(--text); }
+  .dp-nav:hover { background: var(--surface-3); color: var(--text); }
   .dp-title { font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }
   .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
   .dp-w { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 3px 0 5px; }
@@ -169,34 +289,34 @@
     cursor: pointer; display: flex; align-items: center; justify-content: center;
     transition: background .14s, color .14s;
   }
-  .dp-d:hover { background: #eef1f8; }
+  .dp-d:hover { background: var(--surface-4); }
   .dp-d.out { color: var(--text-muted); opacity: .42; }
-  .dp-d.today { color: var(--indigo); box-shadow: inset 0 0 0 1.5px rgba(99, 102, 241, .38); }
+  .dp-d.today { color: var(--indigo); box-shadow: inset 0 0 0 1.5px var(--ring-inset); }
   .dp-d.on { background: linear-gradient(120deg, var(--indigo), var(--violet)); color: #fff; box-shadow: none; }
   .dp-d.on:hover { background: linear-gradient(120deg, var(--indigo), var(--violet)); }
   .dp-quick { display: flex; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
   .dp-quick button {
     flex: 1; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-sub);
-    background: #f7f8fc; border: none; border-radius: 8px; padding: 6px 4px; cursor: pointer;
+    background: var(--bg); border: none; border-radius: 8px; padding: 6px 4px; cursor: pointer;
     transition: background .14s, color .14s;
   }
-  .dp-quick button:hover { background: rgba(99, 102, 241, .1); color: var(--indigo-dark); }
-  .dp-quick button.dp-clear:hover { background: #fff1f2; color: var(--rose); }
+  .dp-quick button:hover { background: var(--ring-soft); color: var(--indigo-dark); }
+  .dp-quick button.dp-clear:hover { background: var(--danger-bg); color: var(--rose); }
 
   /* ===== 富文本编辑器（contenteditable + execCommand 自研） ===== */
-  .rte { border: 1.5px solid var(--line); border-radius: 12px; background: #fbfcfe; overflow: hidden; transition: border-color .18s, box-shadow .18s, background .18s; }
-  .rte:focus-within { border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, .11); }
-  .rte-bar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 7px 8px; border-bottom: 1px solid var(--line); background: #fff; }
+  .rte { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow: hidden; transition: border-color .18s, box-shadow .18s, background .18s; }
+  .rte:focus-within { border-color: var(--indigo); background: var(--surface); box-shadow: 0 0 0 4px var(--ring); }
+  .rte-bar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 7px 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
   .rte-bar .spacer { flex: 1; }
   .rte-btn {
     min-width: 28px; height: 28px; padding: 0 4px; border: none; background: transparent; border-radius: 7px;
     color: var(--text-sub); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
     font-size: 13px; font-weight: 600; transition: background .14s, color .14s;
   }
-  .rte-btn:hover { background: #eef1f8; color: var(--text); }
-  .rte-btn.on { background: rgba(99, 102, 241, .13); color: var(--indigo-dark); }
+  .rte-btn:hover { background: var(--surface-4); color: var(--text); }
+  .rte-btn.on { background: var(--ring-strong); color: var(--indigo-dark); }
   .rte-btn.txt { padding: 0 10px; font-size: 12.5px; gap: 4px; }
-  .rte-btn.warn:hover { background: #fff1f2; color: var(--rose); }
+  .rte-btn.warn:hover { background: var(--danger-bg); color: var(--rose); }
   .rte-sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
   .rte-body {
     padding: 12px 14px; min-height: 150px; max-height: 44vh; overflow-y: auto;
@@ -210,7 +330,7 @@
   .rte.max {
     position: fixed; z-index: 80; top: 4vh; left: 50%; transform: translateX(-50%);
     width: min(980px, 94vw); height: 92vh; display: flex; flex-direction: column;
-    background: #fff; border-color: transparent; border-radius: 16px;
+    background: var(--surface); border-color: transparent; border-radius: 16px;
     box-shadow: 0 24px 64px rgba(15, 23, 42, .4);
   }
   .rte.max .rte-body { flex: 1; min-height: 0; max-height: none; padding: 18px 22px; font-size: 15px; }
@@ -218,16 +338,16 @@
   /* 富文本排版（编辑器与卡片展开共用 .fmt） */
   .fmt h2 { font-size: 17px; font-weight: 700; margin: 10px 0 5px; letter-spacing: -.2px; }
   .fmt p { margin: 4px 0; }
-  .fmt blockquote { border-left: 3px solid var(--indigo); margin: 8px 0; padding: 5px 12px; background: #f5f6ff; border-radius: 0 8px 8px 0; color: var(--text-sub); }
+  .fmt blockquote { border-left: 3px solid var(--indigo); margin: 8px 0; padding: 5px 12px; background: var(--surface-4); border-radius: 0 8px 8px 0; color: var(--text-sub); }
   .fmt pre { background: #1e293b; color: #e2e8f0; border-radius: 9px; padding: 11px 13px; font-size: 12.5px; font-family: Consolas, Monaco, monospace; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; }
-  .fmt code { background: #eef1f8; border-radius: 5px; padding: 1px 5px; font-size: .92em; color: var(--indigo-dark); font-family: Consolas, Monaco, monospace; }
+  .fmt code { background: var(--surface-4); border-radius: 5px; padding: 1px 5px; font-size: .92em; color: var(--indigo-dark); font-family: Consolas, Monaco, monospace; }
   .fmt pre code { background: transparent; color: inherit; padding: 0; }
   .fmt ul, .fmt ol { padding-left: 22px; margin: 6px 0; }
   .fmt a { color: var(--indigo); text-decoration: underline; }
   .fmt .ck-line { display: flex; align-items: flex-start; gap: 7px; margin: 3px 0; }
   .fmt .ck-box {
-    flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; border: 1.6px solid #cbd5e1;
-    border-radius: 5px; background: #fff; cursor: pointer; user-select: none;
+    flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; border: 1.6px solid var(--line-strong);
+    border-radius: 5px; background: var(--surface); cursor: pointer; user-select: none;
     display: inline-flex; align-items: center; justify-content: center;
   }
   .fmt .ck-box.ck-checked { background: linear-gradient(135deg, var(--indigo), var(--violet)); border-color: transparent; }
@@ -238,7 +358,7 @@
   .note-box .plain { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
   .note-box .full { display: none; }
   .note-box.open .plain { display: none; }
-  .note-box.open .full { display: block; padding: 10px 13px; background: #fafbff; border: 1px solid var(--line); border-radius: 10px; line-height: 1.75; cursor: default; }
+  .note-box.open .full { display: block; padding: 10px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; line-height: 1.75; cursor: default; }
   .note-box .full .ck-box { pointer-events: none; }
 
   .add-bar { padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
@@ -252,24 +372,24 @@
     transition: transform .15s, box-shadow .18s, background .18s;
   }
   .btn:active { transform: scale(.97); }
-  .btn-primary { color: #fff; background: linear-gradient(120deg, var(--indigo), var(--violet)); box-shadow: 0 6px 16px rgba(99, 102, 241, .32); }
-  .btn-primary:hover { box-shadow: 0 9px 22px rgba(99, 102, 241, .42); }
-  .btn-ghost { color: var(--text-sub); background: #f1f4fa; border: 1px solid var(--line); }
-  .btn-ghost:hover { background: #e9eef8; color: var(--text); }
+  .btn-primary { color: #fff; background: linear-gradient(120deg, var(--indigo), var(--violet)); box-shadow: var(--glow); }
+  .btn-primary:hover { box-shadow: var(--glow-hover); }
+  .btn-ghost { color: var(--text-sub); background: var(--surface-3); border: 1px solid var(--line); }
+  .btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
 
   /* ===== 筛选 ===== */
   .filters { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; flex-wrap: wrap; }
-  .tabs { display: inline-flex; background: #eef1f8; border-radius: 12px; padding: 4px; gap: 2px; }
+  .tabs { display: inline-flex; background: var(--surface-4); border-radius: 12px; padding: 4px; gap: 2px; }
   .tab {
     font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-sub);
     border: none; background: transparent; padding: 7px 16px; border-radius: 9px;
     cursor: pointer; transition: all .2s;
   }
   .tab:hover { color: var(--text); }
-  .tab.on { background: #fff; color: var(--indigo-dark); box-shadow: var(--shadow-sm); }
+  .tab.on { background: var(--surface); color: var(--indigo-dark); box-shadow: var(--shadow-sm); }
   .tab .badge {
     display: inline-block; font-size: 11px; font-weight: 700;
-    background: rgba(99, 102, 241, .13); color: var(--indigo-dark);
+    background: var(--ring-strong); color: var(--indigo-dark);
     border-radius: 20px; padding: 1px 7px; margin-left: 6px;
   }
   .filters .spacer { flex: 1; }
@@ -281,7 +401,7 @@
 
   .task {
     position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 13px;
-    background: #fff; border: 1px solid var(--line); border-radius: 14px;
+    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
     padding: 15px 16px 15px 18px; box-shadow: var(--shadow-sm);
     transition: transform .16s, box-shadow .2s, border-color .2s, opacity .2s;
     animation: slideIn .28s cubic-bezier(.16, 1, .3, 1) backwards;
@@ -294,11 +414,11 @@
   .task.p3 { --p-color: var(--rose); }
   .task.is-done { opacity: .58; }
   .task.is-done .title { text-decoration: line-through; color: var(--text-muted); }
-  .task.is-overdue:not(.is-done) { border-color: #fecdd3; background: #fffafb; }
+  .task.is-overdue:not(.is-done) { border-color: var(--danger-border); background: var(--danger-surface); }
 
   .check {
     flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
-    border: 2px solid #cbd5e1; border-radius: 50%; cursor: pointer; background: #fff;
+    border: 2px solid var(--line-strong); border-radius: 50%; cursor: pointer; background: var(--surface);
     display: flex; align-items: center; justify-content: center; transition: all .2s;
   }
   .check:hover { border-color: var(--indigo); transform: scale(1.08); }
@@ -310,14 +430,14 @@
   .title { font-size: 15px; font-weight: 600; word-break: break-word; }
   .meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
 
-  .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; background: #f1f4fa; color: var(--text-sub); }
-  .chip.due-soon { background: #eff6ff; color: #1d4ed8; }
-  .chip.due-today { background: #fff7ed; color: #c2410c; }
-  .chip.due-overdue { background: #fff1f2; color: #be123c; }
+  .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; background: var(--surface-3); color: var(--text-sub); }
+  .chip.due-soon { background: var(--info-bg); color: var(--info-text); }
+  .chip.due-today { background: var(--warn-bg); color: var(--warn-text); }
+  .chip.due-overdue { background: var(--danger-bg); color: var(--danger-text); }
   .pri { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; }
   .pri.p1 { background: rgba(16, 185, 129, .12); color: #047857; }
   .pri.p2 { background: rgba(245, 158, 11, .14); color: #b45309; }
-  .pri.p3 { background: rgba(244, 63, 94, .12); color: #be123c; }
+  .pri.p3 { background: rgba(244, 63, 94, .12); color: var(--danger-text); }
 
   .actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .18s; }
   .task:hover .actions { opacity: 1; }
@@ -327,11 +447,11 @@
     color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
     transition: all .18s;
   }
-  .icon-btn:hover { background: #f1f4fa; color: var(--text); }
-  .icon-btn.del:hover { background: #fff1f2; color: var(--rose); }
+  .icon-btn:hover { background: var(--surface-3); color: var(--text); }
+  .icon-btn.del:hover { background: var(--danger-bg); color: var(--rose); }
 
   /* ===== 空状态 / 加载 ===== */
-  .empty { text-align: center; padding: 66px 20px; background: #fff; border: 1px dashed #dfe5f0; border-radius: var(--radius); }
+  .empty { text-align: center; padding: 66px 20px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); }
   .empty .emo { font-size: 44px; margin-bottom: 14px; display: block; animation: bounce 2.4s ease-in-out infinite; }
   @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
   .empty h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
@@ -340,7 +460,7 @@
   .loading { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; }
   .spinner {
     width: 30px; height: 30px; margin: 0 auto 14px;
-    border: 3px solid #eef1f8; border-top-color: var(--indigo);
+    border: 3px solid var(--surface-4); border-top-color: var(--indigo);
     border-radius: 50%; animation: spin .8s linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
@@ -353,7 +473,7 @@
   }
   @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
   .modal {
-    width: 100%; max-width: 480px; background: #fff; border-radius: 20px;
+    width: 100%; max-width: 480px; background: var(--surface); border-radius: 20px;
     box-shadow: var(--shadow-lg); margin: auto; padding: 0;
     animation: popIn .26s cubic-bezier(.16, 1, .3, 1);
     max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
@@ -364,17 +484,17 @@
   .modal-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
   .modal-body { padding: 2px 24px 6px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
   .modal-body::-webkit-scrollbar, .rte-body::-webkit-scrollbar { width: 6px; }
-  .modal-body::-webkit-scrollbar-thumb, .rte-body::-webkit-scrollbar-thumb { background: #d5dbea; border-radius: 99px; }
-  .modal-body::-webkit-scrollbar-thumb:hover, .rte-body::-webkit-scrollbar-thumb:hover { background: #b6c0d8; }
+  .modal-body::-webkit-scrollbar-thumb, .rte-body::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 99px; }
+  .modal-body::-webkit-scrollbar-thumb:hover, .rte-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
   .modal-body::-webkit-scrollbar-track, .rte-body::-webkit-scrollbar-track { background: transparent; }
-  .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; flex-shrink: 0; border-top: 1px solid var(--line); background: #fff; }
+  .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--surface); }
   .mzoom {
-    width: 30px; height: 30px; border: none; background: #f1f4fa; border-radius: 8px;
+    width: 30px; height: 30px; border: none; background: var(--surface-3); border-radius: 8px;
     color: var(--text-sub); cursor: pointer; font-size: 14px; flex-shrink: 0;
     display: inline-flex; align-items: center; justify-content: center;
     transition: background .14s, color .14s;
   }
-  .mzoom:hover { background: rgba(99, 102, 241, .13); color: var(--indigo-dark); }
+  .mzoom:hover { background: var(--ring-strong); color: var(--indigo-dark); }
   .field { margin-bottom: 15px; }
   .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 7px; }
   .field textarea { resize: vertical; min-height: 76px; }
@@ -385,7 +505,7 @@
   .confirm .ico {
     width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
-    background: #fff1f2; color: var(--rose);
+    background: var(--danger-bg); color: var(--rose);
     animation: popIcon .42s cubic-bezier(.16, 1, .3, 1);
   }
   @keyframes popIcon {
@@ -397,7 +517,7 @@
   .confirm p { font-size: 13.5px; color: var(--text-sub); line-height: 1.6; }
   .confirm .quote {
     margin-top: 13px; padding: 10px 14px; border-radius: 10px;
-    background: #f7f8fc; border: 1px solid var(--line);
+    background: var(--bg); border: 1px solid var(--line);
     font-size: 13.5px; font-weight: 600; color: var(--text);
     word-break: break-word; text-align: left;
   }
@@ -426,7 +546,7 @@
   .foot-bar .spacer { flex: 1; }
   .foot-bar kbd {
     font-family: inherit; font-size: 11px; font-weight: 700; color: var(--text-sub);
-    background: #eef1f8; border: 1px solid #dfe5f0; border-bottom-width: 2px;
+    background: var(--surface-4); border: 1px solid var(--line-2); border-bottom-width: 2px;
     border-radius: 5px; padding: 1px 6px;
   }
   .foot-bar .btn { padding: 6px 14px; font-size: 12.5px; }
@@ -473,9 +593,9 @@
         <svg width="64" height="64" viewBox="0 0 64 64">
           <defs>
             <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
-              <stop offset="0%" stop-color="#6366f1"/>
-              <stop offset="55%" stop-color="#8b5cf6"/>
-              <stop offset="100%" stop-color="#ec4899"/>
+              <stop class="gs0" offset="0%"/>
+              <stop class="gs1" offset="55%"/>
+              <stop class="gs2" offset="100%"/>
             </linearGradient>
           </defs>
           <circle class="track" cx="32" cy="32" r="27" fill="none" stroke-width="7"/>
@@ -530,6 +650,7 @@
     <div class="spacer"></div>
     <span id="filterPriSlot"></span>
     <span id="sortSlot"></span>
+    <span id="themeSlot"></span>
     <input type="text" id="searchInput" placeholder="搜索标题 / 备注…" autocomplete="off">
   </div>
 
@@ -543,9 +664,7 @@
     <span class="hint"><kbd>N</kbd> 新建</span>
     <span class="hint"><kbd>/</kbd> 搜索</span>
     <button class="btn btn-ghost" id="exportBtn">导出</button>
-    <button class="btn btn-ghost" id="importBtn">导入</button>
     <button class="btn btn-ghost" id="clearDoneBtn">清除已完成</button>
-    <input type="file" id="importFile" accept="application/json" hidden>
   </div>
 
 </div>
@@ -1300,33 +1419,6 @@
     }).catch(function (e) { toast(e.message || '导出失败', true) })
   }
 
-  function importJson(file) {
-    var reader = new FileReader()
-    reader.onload = function () {
-      var arr
-      try { arr = JSON.parse(reader.result) } catch (e) { toast('文件不是合法的 JSON', true); return }
-      if (!Array.isArray(arr) || !arr.length) { toast('文件里没有待办数据', true); return }
-      var chain = Promise.resolve()
-      var okCount = 0
-      arr.forEach(function (it) {
-        if (!it || !it.title) return
-        chain = chain.then(function () {
-          return post('/add', {
-            title: it.title,
-            priority: it.priority || 2,
-            dueDate: it.dueDate || '',
-            remark: sanitizeHtml(it.remark || '')
-          }).then(function (r) { if (r && r.code === 200) okCount++ })
-        })
-      })
-      chain.then(function () {
-        toast('已导入 ' + okCount + ' 条')
-        return fetchList(true).then(fetchStats)
-      })
-    }
-    reader.readAsText(file, 'utf-8')
-  }
-
   function clearDone() {
     var n = computed().done
     if (!n) { toast('没有已完成的待办'); return }
@@ -1344,6 +1436,30 @@
     })
   }
 
+  /* ===== 主题切换 ===== */
+  var THEMES = [
+    { v: 'violet', s: '🎨 紫罗兰', t: '🎨 紫罗兰（默认）' },
+    { v: 'dark', s: '🌙 曜石黑', t: '🌙 曜石黑' },
+    { v: 'teal', s: '🌊 松石青', t: '🌊 松石青' },
+    { v: 'amber', s: '🌅 暖阳橙', t: '🌅 暖阳橙' },
+    { v: 'slate', s: '🪨 墨岩灰', t: '🪨 墨岩灰（极简）' }
+  ]
+  var THEME_COLOR = { violet: '#6366f1', dark: '#0f172a', teal: '#0d9488', amber: '#d97706', slate: '#475569' }
+
+  function applyTheme(v) {
+    document.documentElement.className = (v && v !== 'violet') ? 't-' + v : ''
+    var mc = document.querySelector('meta[name="theme-color"]')
+    if (mc && THEME_COLOR[v]) mc.setAttribute('content', THEME_COLOR[v])
+    try { localStorage.setItem('todo-theme', v) } catch (e) { /* 隐私模式无 localStorage */ }
+  }
+
+  var savedTheme = 'violet'
+  try { savedTheme = localStorage.getItem('todo-theme') || 'violet' } catch (e) { }
+  applyTheme(savedTheme)
+
+  $('themeSlot').outerHTML = selHtml('themeSel', savedTheme, THEMES)
+  initSel($('themeSel'), applyTheme)
+
   /* ===== 事件绑定 ===== */
   // 下拉：用 HTML 占位槽替换成自绘组件，避免原生 select 的展开面板无法美化
   $('quickPriSlot').outerHTML = selHtml('quickPriority', '2', PRI_OPTS)
@@ -1419,11 +1535,6 @@
   })
 
   $('exportBtn').addEventListener('click', exportJson)
-  $('importBtn').addEventListener('click', function () { $('importFile').click() })
-  $('importFile').addEventListener('change', function () {
-    if (this.files && this.files[0]) importJson(this.files[0])
-    this.value = ''
-  })
   $('clearDoneBtn').addEventListener('click', clearDone)
 
   document.addEventListener('keydown', function (e) {