From 85b2d8a30fa9b438b6f049286732eb55f5d67de4 Mon Sep 17 00:00:00 2001
From: chenshoulin <chenshoulin@goldenstand.cn>
Date: Sun, 18 Oct 2026 19:45:23 +0800
Subject: [PATCH] =?UTF-8?q?style(theme):=20=E6=B7=B1=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E9=85=8D=E8=89=B2=E7=94=B1=20slate=20=E6=8D=A2?=
 =?UTF-8?q?=E6=88=90=20zinc=EF=BC=8C=E5=8E=BB=E6=8E=89=E6=95=B4=E9=A1=B5?=
 =?UTF-8?q?=E8=93=9D=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

slate 色阶带明显蓝调（页面底 B-R=+22、列底 +26），整页发蓝，与目标的中性灰
相差很远。换成 Tailwind 的 zinc 色阶做 1:1 映射，保持原有明暗层次不变
（卡片仍比列背景更亮），只去色偏：改后页面底 B-R=+2、列底 +2。

只替换带 dark: 前缀的类（16 个文件、182 处），外加 style.css 里三处
html.dark 基底色；浅色模式一字未动（页面底仍为 slate-100 #f1f5f9）。
---
 src/App.vue                         | 16 ++++++++--------
 src/components/AppNav.vue           | 18 +++++++++---------
 src/components/BackupPanel.vue      | 18 +++++++++---------
 src/components/BoardColumn.vue      | 10 +++++-----
 src/components/BoardToolbar.vue     | 26 +++++++++++++-------------
 src/components/DatePicker.spec.ts   |  4 ++--
 src/components/DatePicker.vue       |  6 +++---
 src/components/PwaUpdatePrompt.vue  |  6 +++---
 src/components/QuickAddTask.vue     |  2 +-
 src/components/SideDrawer.vue       | 10 +++++-----
 src/components/TagFilter.vue        | 10 +++++-----
 src/components/TagInput.vue         |  4 ++--
 src/components/TaskCard.vue         | 20 ++++++++++----------
 src/components/TaskDetailDrawer.vue | 18 +++++++++---------
 src/components/ToastHost.vue        |  6 +++---
 src/style.css                       | 10 +++++++---
 src/views/TodayView.vue             | 18 +++++++++---------
 17 files changed, 103 insertions(+), 99 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index debbc75..698b746 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,7 +45,7 @@ useKeyboardShortcuts({
 </script>
 
 <template>
-  <div class="flex h-full min-h-0 flex-col bg-slate-100 dark:bg-slate-950">
+  <div class="flex h-full min-h-0 flex-col bg-slate-100 dark:bg-zinc-950">
     <AppNav />
 
     <main class="flex min-h-0 flex-1 flex-col">
@@ -56,37 +56,37 @@ useKeyboardShortcuts({
   <BackupPanel :open="ui.backupOpen" @close="ui.closeBackup()" />
 
   <SideDrawer :open="ui.helpOpen" title="快捷键" @close="ui.closeHelp()">
-    <h3 class="mb-2 text-xs font-medium tracking-wide text-slate-400 uppercase dark:text-slate-500">
+    <h3 class="mb-2 text-xs font-medium tracking-wide text-slate-400 uppercase dark:text-zinc-500">
       全局
     </h3>
     <dl class="flex flex-col gap-3 text-sm">
       <div v-for="item in SHORTCUTS" :key="item.keys" class="flex items-center gap-3">
         <dt
-          class="w-14 shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-center font-mono text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
+          class="w-14 shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-center font-mono text-xs text-slate-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
         >
           {{ item.keys }}
         </dt>
-        <dd class="text-slate-600 dark:text-slate-300">{{ item.description }}</dd>
+        <dd class="text-slate-600 dark:text-zinc-300">{{ item.description }}</dd>
       </div>
     </dl>
 
     <h3
-      class="mt-6 mb-2 text-xs font-medium tracking-wide text-slate-400 uppercase dark:text-slate-500"
+      class="mt-6 mb-2 text-xs font-medium tracking-wide text-slate-400 uppercase dark:text-zinc-500"
     >
       卡片聚焦后
     </h3>
     <dl class="flex flex-col gap-3 text-sm">
       <div v-for="item in CARD_SHORTCUTS" :key="item.keys" class="flex items-center gap-3">
         <dt
-          class="w-14 shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-center font-mono text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
+          class="w-14 shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-center font-mono text-xs text-slate-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
         >
           {{ item.keys }}
         </dt>
-        <dd class="text-slate-600 dark:text-slate-300">{{ item.description }}</dd>
+        <dd class="text-slate-600 dark:text-zinc-300">{{ item.description }}</dd>
       </div>
     </dl>
 
-    <p class="mt-4 text-xs text-slate-400 dark:text-slate-500">
+    <p class="mt-4 text-xs text-slate-400 dark:text-zinc-500">
       在输入框内输入时不会触发快捷键。
     </p>
   </SideDrawer>
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 9c5b5e2..8bc9257 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -15,11 +15,11 @@ const LINKS = [
 
 <template>
   <header
-    class="flex items-center gap-3 border-b border-slate-200 bg-white/85 px-4 py-2.5 backdrop-blur-sm md:px-6 dark:border-slate-800 dark:bg-slate-900/85"
+    class="flex items-center gap-3 border-b border-slate-200 bg-white/85 px-4 py-2.5 backdrop-blur-sm md:px-6 dark:border-zinc-800 dark:bg-zinc-900/85"
   >
     <div class="flex items-center gap-2">
       <span
-        class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900"
+        class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-900 text-white dark:bg-zinc-100 dark:text-zinc-900"
       >
         <svg viewBox="0 0 16 16" class="size-3.5" aria-hidden="true">
           <rect x="1" y="2" width="3.4" height="12" rx="1.2" fill="currentColor" opacity="0.5" />
@@ -28,13 +28,13 @@ const LINKS = [
         </svg>
       </span>
       <span
-        class="hidden text-sm font-semibold tracking-tight text-slate-900 sm:inline dark:text-slate-100"
+        class="hidden text-sm font-semibold tracking-tight text-slate-900 sm:inline dark:text-zinc-100"
       >
         看板
       </span>
     </div>
 
-    <span class="h-5 w-px bg-slate-200 dark:bg-slate-800" aria-hidden="true" />
+    <span class="h-5 w-px bg-slate-200 dark:bg-zinc-800" aria-hidden="true" />
 
     <nav class="flex items-center gap-0.5" aria-label="主导航">
       <RouterLink
@@ -49,8 +49,8 @@ const LINKS = [
           class="rounded-md px-3 py-1.5 text-sm transition"
           :class="
             isExactActive
-              ? 'bg-slate-900 font-medium text-white shadow-sm dark:bg-slate-100 dark:text-slate-900'
-              : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100'
+              ? 'bg-slate-900 font-medium text-white shadow-sm dark:bg-zinc-100 dark:text-zinc-900'
+              : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'
           "
           :aria-current="isExactActive ? 'page' : undefined"
           @click="navigate"
@@ -63,7 +63,7 @@ const LINKS = [
     <div class="ml-auto flex items-center gap-1.5">
       <button
         type="button"
-        class="flex size-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+        class="flex size-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:text-zinc-500 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
         :aria-label="`主题：${THEME_LABELS[theme.mode]}，点击切换`"
         :title="`主题：${THEME_LABELS[theme.mode]}`"
         @click="theme.cycle()"
@@ -118,7 +118,7 @@ const LINKS = [
 
       <button
         type="button"
-        class="flex size-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+        class="flex size-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:text-zinc-500 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
         aria-label="快捷键帮助"
         @click="ui.openHelp()"
       >
@@ -136,7 +136,7 @@ const LINKS = [
 
       <button
         type="button"
-        class="flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
+        class="flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800"
         @click="ui.openBackup()"
       >
         <svg viewBox="0 0 20 20" class="size-3.5" fill="none" aria-hidden="true">
diff --git a/src/components/BackupPanel.vue b/src/components/BackupPanel.vue
index 99208a0..7b7f493 100644
--- a/src/components/BackupPanel.vue
+++ b/src/components/BackupPanel.vue
@@ -110,7 +110,7 @@ function formatTime(iso: string): string {
       </p>
 
       <section class="flex flex-col gap-2">
-        <h3 class="text-sm font-medium text-slate-700 dark:text-slate-300">导出</h3>
+        <h3 class="text-sm font-medium text-slate-700 dark:text-zinc-300">导出</h3>
         <button
           type="button"
           class="self-start rounded-md bg-sky-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-sky-700 dark:hover:bg-sky-500"
@@ -121,12 +121,12 @@ function formatTime(iso: string): string {
       </section>
 
       <section class="flex flex-col gap-2">
-        <h3 class="text-sm font-medium text-slate-700 dark:text-slate-300">导入</h3>
+        <h3 class="text-sm font-medium text-slate-700 dark:text-zinc-300">导入</h3>
 
         <input
           type="file"
           accept="application/json,.json"
-          class="block w-full text-sm text-slate-600 file:mr-3 file:rounded-md file:border file:border-slate-300 file:bg-white file:px-3 file:py-1.5 file:text-sm file:text-slate-600 dark:text-slate-400 dark:file:border-slate-600 dark:file:bg-slate-800 dark:file:text-slate-300"
+          class="block w-full text-sm text-slate-600 file:mr-3 file:rounded-md file:border file:border-slate-300 file:bg-white file:px-3 file:py-1.5 file:text-sm file:text-slate-600 dark:text-zinc-400 dark:file:border-zinc-600 dark:file:bg-zinc-800 dark:file:text-zinc-300"
           aria-label="选择导入文件"
           @change="onFileChange"
         />
@@ -149,7 +149,7 @@ function formatTime(iso: string): string {
             </button>
             <button
               type="button"
-              class="rounded-md border border-slate-300 px-3 py-1 text-sm text-slate-600 transition hover:bg-white dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-800"
+              class="rounded-md border border-slate-300 px-3 py-1 text-sm text-slate-600 transition hover:bg-white dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
               @click="pending = null"
             >
               取消
@@ -159,8 +159,8 @@ function formatTime(iso: string): string {
       </section>
 
       <section class="flex flex-col gap-2">
-        <h3 class="text-sm font-medium text-slate-700 dark:text-slate-300">自动备份</h3>
-        <p class="text-xs text-slate-500 dark:text-slate-400">
+        <h3 class="text-sm font-medium text-slate-700 dark:text-zinc-300">自动备份</h3>
+        <p class="text-xs text-slate-500 dark:text-zinc-400">
           每次打开看板时自动留一份，最多保留 3 份。
         </p>
 
@@ -168,9 +168,9 @@ function formatTime(iso: string): string {
           <li
             v-for="item in snapshots"
             :key="item.key"
-            class="flex items-center justify-between rounded-md border border-slate-200 px-3 py-2 dark:border-slate-700"
+            class="flex items-center justify-between rounded-md border border-slate-200 px-3 py-2 dark:border-zinc-700"
           >
-            <span class="text-sm text-slate-600 dark:text-slate-300">
+            <span class="text-sm text-slate-600 dark:text-zinc-300">
               {{ formatTime(item.savedAt) }}
             </span>
             <button
@@ -182,7 +182,7 @@ function formatTime(iso: string): string {
             </button>
           </li>
         </ul>
-        <p v-else class="text-sm text-slate-400 dark:text-slate-500">暂无自动备份</p>
+        <p v-else class="text-sm text-slate-400 dark:text-zinc-500">暂无自动备份</p>
       </section>
     </div>
   </SideDrawer>
diff --git a/src/components/BoardColumn.vue b/src/components/BoardColumn.vue
index 482f6f7..a0eee40 100644
--- a/src/components/BoardColumn.vue
+++ b/src/components/BoardColumn.vue
@@ -19,7 +19,7 @@ const emit = defineEmits<{
 
 /** 每列一个色点：三列在余光里也能区分开 */
 const COLUMN_DOT: Record<ColumnId, string> = {
-  todo: 'bg-slate-400 dark:bg-slate-500',
+  todo: 'bg-slate-400 dark:bg-zinc-500',
   doing: 'bg-sky-500 dark:bg-sky-400',
   done: 'bg-emerald-500 dark:bg-emerald-400',
 }
@@ -57,14 +57,14 @@ useDraggable(listRef, {
 
 <template>
   <section
-    class="flex flex-col rounded-xl border border-slate-200 bg-slate-100/70 md:min-h-0 dark:border-slate-800 dark:bg-slate-900/60"
+    class="flex flex-col rounded-xl border border-slate-200 bg-slate-100/70 md:min-h-0 dark:border-zinc-800 dark:bg-zinc-900/60"
   >
     <header class="flex items-center gap-2 px-3 pt-3 pb-2">
       <span class="size-1.5 shrink-0 rounded-full" :class="dotClass" aria-hidden="true" />
-      <h2 class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ column.title }}</h2>
+      <h2 class="text-sm font-medium text-slate-700 dark:text-zinc-300">{{ column.title }}</h2>
       <span
         data-role="column-count"
-        class="ml-auto rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs font-medium text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400"
+        class="ml-auto rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs font-medium text-slate-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400"
       >
         {{ tasks.length }}
       </span>
@@ -88,7 +88,7 @@ useDraggable(listRef, {
 
       <p
         v-if="tasks.length === 0"
-        class="rounded-lg border border-dashed border-slate-300/70 px-3 py-10 text-center text-xs text-slate-400 dark:border-slate-700 dark:text-slate-500"
+        class="rounded-lg border border-dashed border-slate-300/70 px-3 py-10 text-center text-xs text-slate-400 dark:border-zinc-700 dark:text-zinc-500"
       >
         暂无任务
       </p>
diff --git a/src/components/BoardToolbar.vue b/src/components/BoardToolbar.vue
index 6b01f0b..bcf8b7e 100644
--- a/src/components/BoardToolbar.vue
+++ b/src/components/BoardToolbar.vue
@@ -56,7 +56,7 @@ defineExpose({ focusSearch })
       <div class="relative min-w-56 flex-1 sm:max-w-xs">
         <svg
           viewBox="0 0 20 20"
-          class="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500"
+          class="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-slate-400 dark:text-zinc-500"
           fill="none"
           aria-hidden="true"
         >
@@ -67,14 +67,14 @@ defineExpose({ focusSearch })
           ref="searchRef"
           v-model="keyword"
           type="search"
-          class="h-9 w-full rounded-md border border-slate-200 bg-white pr-2.5 pl-8 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:border-sky-600 dark:focus:ring-sky-950"
+          class="h-9 w-full rounded-md border border-slate-200 bg-white pr-2.5 pl-8 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-sky-600 dark:focus:ring-sky-950"
           placeholder="搜索标题或描述"
           aria-label="搜索任务"
         />
       </div>
 
       <div
-        class="flex h-9 items-center gap-0.5 rounded-md border border-slate-200 bg-white p-0.5 dark:border-slate-700 dark:bg-slate-900"
+        class="flex h-9 items-center gap-0.5 rounded-md border border-slate-200 bg-white p-0.5 dark:border-zinc-700 dark:bg-zinc-900"
         role="group"
         aria-label="按优先级筛选"
       >
@@ -85,8 +85,8 @@ defineExpose({ focusSearch })
           class="flex h-full items-center rounded px-2.5 text-xs transition"
           :class="
             priorities.includes(value)
-              ? 'bg-slate-900 font-medium text-white dark:bg-slate-100 dark:text-slate-900'
-              : 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800'
+              ? 'bg-slate-900 font-medium text-white dark:bg-zinc-100 dark:text-zinc-900'
+              : 'text-slate-600 hover:bg-slate-100 dark:text-zinc-400 dark:hover:bg-zinc-800'
           "
           :aria-pressed="priorities.includes(value)"
           @click="filters.togglePriority(value)"
@@ -109,7 +109,7 @@ defineExpose({ focusSearch })
           :class="
             due === 'today'
               ? 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'
-              : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800'
+              : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800'
           "
           :aria-pressed="due === 'today'"
           @click="filters.toggleDue('today')"
@@ -125,8 +125,8 @@ defineExpose({ focusSearch })
             due === 'overdue'
               ? 'border-rose-300 bg-rose-50 text-rose-700 dark:border-rose-700 dark:bg-rose-950 dark:text-rose-300'
               : overdueCount > 0
-                ? 'border-slate-200 bg-white text-rose-600 hover:border-rose-200 hover:bg-rose-50 dark:border-slate-700 dark:bg-slate-900 dark:text-rose-400 dark:hover:border-rose-800 dark:hover:bg-rose-950'
-                : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800'
+                ? 'border-slate-200 bg-white text-rose-600 hover:border-rose-200 hover:bg-rose-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-rose-400 dark:hover:border-rose-800 dark:hover:bg-rose-950'
+                : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800'
           "
           :aria-pressed="due === 'overdue'"
           @click="filters.toggleDue('overdue')"
@@ -137,15 +137,15 @@ defineExpose({ focusSearch })
       </div>
     </div>
 
-    <div class="flex flex-wrap items-center gap-x-2 gap-y-1.5 text-xs text-slate-500 dark:text-slate-400">
+    <div class="flex flex-wrap items-center gap-x-2 gap-y-1.5 text-xs text-slate-500 dark:text-zinc-400">
       <span>共 {{ store.tasks.length }} 个任务</span>
-      <span v-if="hiddenNote" class="text-slate-400 dark:text-slate-500">{{ hiddenNote }}</span>
+      <span v-if="hiddenNote" class="text-slate-400 dark:text-zinc-500">{{ hiddenNote }}</span>
 
       <div class="ml-auto flex items-center gap-1.5">
         <button
           v-if="archivableCount > 0"
           type="button"
-          class="flex h-8 items-center rounded-md border border-slate-200 bg-white px-2.5 text-xs text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
+          class="flex h-8 items-center rounded-md border border-slate-200 bg-white px-2.5 text-xs text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800"
           @click="emit('archive')"
         >
           归档 {{ archivableCount }} 个已完成
@@ -157,7 +157,7 @@ defineExpose({ focusSearch })
           :class="
             includeArchived
               ? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'
-              : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800'
+              : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800'
           "
           :aria-pressed="includeArchived"
           @click="filters.toggleArchived()"
@@ -168,7 +168,7 @@ defineExpose({ focusSearch })
         <button
           v-if="active"
           type="button"
-          class="flex h-8 items-center rounded-md px-2.5 text-xs text-slate-500 underline-offset-2 transition hover:text-slate-800 hover:underline dark:text-slate-400 dark:hover:text-slate-200"
+          class="flex h-8 items-center rounded-md px-2.5 text-xs text-slate-500 underline-offset-2 transition hover:text-slate-800 hover:underline dark:text-zinc-400 dark:hover:text-zinc-200"
           @click="filters.clear()"
         >
           清空筛选
diff --git a/src/components/DatePicker.spec.ts b/src/components/DatePicker.spec.ts
index 38d2d91..54fefe4 100644
--- a/src/components/DatePicker.spec.ts
+++ b/src/components/DatePicker.spec.ts
@@ -100,8 +100,8 @@ describe('DatePicker 空值占位', () => {
   it('占位层带不透明背景，且与输入框配色一致', () => {
     const classes = placeholderOf(mountPicker(null)).classes()
     expect(classes).toContain('bg-white')
-    expect(classes).toContain('dark:bg-slate-800')
-    expect(mountPicker(null).find('input').classes()).toContain('dark:bg-slate-800')
+    expect(classes).toContain('dark:bg-zinc-800')
+    expect(mountPicker(null).find('input').classes()).toContain('dark:bg-zinc-800')
   })
 
   it('占位层只覆盖左侧，给日历图标留出位置', () => {
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 4e2fe21..a6fe8e8 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -63,7 +63,7 @@ function openPicker(): void {
       <input
         ref="inputRef"
         type="date"
-        class="w-full rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:focus:border-sky-600"
+        class="w-full rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:border-sky-600"
         :value="modelValue ?? ''"
         :aria-label="label ?? '截止日期'"
         @change="onChange"
@@ -79,7 +79,7 @@ function openPicker(): void {
       <span
         v-if="showPlaceholder"
         data-role="date-placeholder"
-        class="absolute inset-y-px left-px right-9 flex cursor-pointer items-center rounded-l-md bg-white pl-2 text-sm text-slate-400 dark:bg-slate-800 dark:text-slate-500"
+        class="absolute inset-y-px left-px right-9 flex cursor-pointer items-center rounded-l-md bg-white pl-2 text-sm text-slate-400 dark:bg-zinc-800 dark:text-zinc-500"
         @click="openPicker"
       >
         选择日期
@@ -89,7 +89,7 @@ function openPicker(): void {
     <button
       v-if="modelValue"
       type="button"
-      class="shrink-0 rounded px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
+      class="shrink-0 rounded px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
       @click="emit('update:modelValue', null)"
     >
       清除
diff --git a/src/components/PwaUpdatePrompt.vue b/src/components/PwaUpdatePrompt.vue
index eb326e0..c18e98d 100644
--- a/src/components/PwaUpdatePrompt.vue
+++ b/src/components/PwaUpdatePrompt.vue
@@ -26,14 +26,14 @@ function reload(): void {
   <div v-if="visible" class="fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
     <div
       role="status"
-      class="flex items-center gap-3 rounded-md bg-slate-800 px-3 py-2 text-sm text-white shadow-panel dark:bg-slate-100 dark:text-slate-900"
+      class="flex items-center gap-3 rounded-md bg-slate-800 px-3 py-2 text-sm text-white shadow-panel dark:bg-zinc-100 dark:text-zinc-900"
     >
       <span>{{ needRefresh ? '有新版本可用' : '已缓存，可离线使用' }}</span>
 
       <button
         v-if="needRefresh"
         type="button"
-        class="shrink-0 rounded px-2 py-0.5 font-medium text-sky-300 transition hover:bg-white/10 dark:text-sky-700 dark:hover:bg-slate-900/10"
+        class="shrink-0 rounded px-2 py-0.5 font-medium text-sky-300 transition hover:bg-white/10 dark:text-sky-700 dark:hover:bg-zinc-900/10"
         @click="reload"
       >
         立即更新
@@ -41,7 +41,7 @@ function reload(): void {
 
       <button
         type="button"
-        class="shrink-0 rounded px-1.5 text-slate-400 transition hover:text-white dark:text-slate-500 dark:hover:text-slate-900"
+        class="shrink-0 rounded px-1.5 text-slate-400 transition hover:text-white dark:text-zinc-500 dark:hover:text-zinc-900"
         aria-label="关闭提示"
         @click="dismiss"
       >
diff --git a/src/components/QuickAddTask.vue b/src/components/QuickAddTask.vue
index 58b0ce8..8abff1a 100644
--- a/src/components/QuickAddTask.vue
+++ b/src/components/QuickAddTask.vue
@@ -37,7 +37,7 @@ defineExpose({ focusInput })
       ref="inputRef"
       v-model="title"
       type="text"
-      class="w-full rounded-lg border border-transparent bg-white/60 px-3 py-2 text-sm text-slate-700 transition outline-none placeholder:text-slate-400 hover:bg-white focus:border-sky-300 focus:bg-white focus:ring-2 focus:ring-sky-100 dark:bg-slate-800/60 dark:text-slate-200 dark:placeholder:text-slate-500 dark:hover:bg-slate-800 dark:focus:border-sky-700 dark:focus:bg-slate-800 dark:focus:ring-sky-950"
+      class="w-full rounded-lg border border-transparent bg-white/60 px-3 py-2 text-sm text-slate-700 transition outline-none placeholder:text-slate-400 hover:bg-white focus:border-sky-300 focus:bg-white focus:ring-2 focus:ring-sky-100 dark:bg-zinc-800/60 dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800 dark:focus:border-sky-700 dark:focus:bg-zinc-800 dark:focus:ring-sky-950"
       placeholder="＋ 添加任务"
       aria-label="添加任务"
       @compositionstart="composing = true"
diff --git a/src/components/SideDrawer.vue b/src/components/SideDrawer.vue
index 7364b34..eaff791 100644
--- a/src/components/SideDrawer.vue
+++ b/src/components/SideDrawer.vue
@@ -89,19 +89,19 @@ onBeforeUnmount(stopListening)
 
       <aside
         ref="panelRef"
-        class="absolute inset-y-0 right-0 flex w-full max-w-md flex-col bg-white shadow-panel outline-none dark:bg-slate-900"
+        class="absolute inset-y-0 right-0 flex w-full max-w-md flex-col bg-white shadow-panel outline-none dark:bg-zinc-900"
         role="dialog"
         aria-modal="true"
         :aria-label="title"
         tabindex="-1"
       >
         <header
-          class="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-800"
+          class="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-zinc-800"
         >
-          <h2 class="text-base font-medium text-slate-800 dark:text-slate-100">{{ title }}</h2>
+          <h2 class="text-base font-medium text-slate-800 dark:text-zinc-100">{{ title }}</h2>
           <button
             type="button"
-            class="rounded px-2 py-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+            class="rounded px-2 py-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
             aria-label="关闭"
             @click="emit('close')"
           >
@@ -115,7 +115,7 @@ onBeforeUnmount(stopListening)
 
         <footer
           v-if="$slots.footer"
-          class="border-t border-slate-200 px-4 py-3 dark:border-slate-800"
+          class="border-t border-slate-200 px-4 py-3 dark:border-zinc-800"
         >
           <slot name="footer" />
         </footer>
diff --git a/src/components/TagFilter.vue b/src/components/TagFilter.vue
index 4e70f2c..2e49cd9 100644
--- a/src/components/TagFilter.vue
+++ b/src/components/TagFilter.vue
@@ -48,7 +48,7 @@ onBeforeUnmount(() => {
       :class="
         selected.length > 0
           ? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'
-          : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800'
+          : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800'
       "
       :aria-expanded="open"
       aria-haspopup="true"
@@ -80,16 +80,16 @@ onBeforeUnmount(() => {
 
     <div
       v-if="open"
-      class="absolute top-full left-0 z-20 mt-1.5 w-56 rounded-lg border border-slate-200 bg-white p-1.5 shadow-pop dark:border-slate-700 dark:bg-slate-900"
+      class="absolute top-full left-0 z-20 mt-1.5 w-56 rounded-lg border border-slate-200 bg-white p-1.5 shadow-pop dark:border-zinc-700 dark:bg-zinc-900"
     >
-      <p v-if="tags.length === 0" class="px-2 py-3 text-center text-xs text-slate-400 dark:text-slate-500">
+      <p v-if="tags.length === 0" class="px-2 py-3 text-center text-xs text-slate-400 dark:text-zinc-500">
         还没有任何标签
       </p>
 
       <ul v-else class="max-h-64 overflow-y-auto">
         <li v-for="tag in tags" :key="tag">
           <label
-            class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-slate-700 transition hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
+            class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-slate-700 transition hover:bg-slate-50 dark:text-zinc-300 dark:hover:bg-zinc-800"
           >
             <input
               type="checkbox"
@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
       <button
         v-if="selected.length > 0"
         type="button"
-        class="mt-1 w-full rounded-md px-2 py-1.5 text-xs text-slate-500 transition hover:bg-slate-50 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+        class="mt-1 w-full rounded-md px-2 py-1.5 text-xs text-slate-500 transition hover:bg-slate-50 hover:text-slate-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
         @click="emit('clear')"
       >
         清除标签筛选
diff --git a/src/components/TagInput.vue b/src/components/TagInput.vue
index fa3f550..e68ec7a 100644
--- a/src/components/TagInput.vue
+++ b/src/components/TagInput.vue
@@ -36,7 +36,7 @@ function onBackspace(): void {
 
 <template>
   <div
-    class="flex flex-wrap items-center gap-1.5 rounded-md border border-slate-300 px-2 py-1.5 focus-within:border-sky-400 dark:border-slate-700 dark:bg-slate-800 dark:focus-within:border-sky-600"
+    class="flex flex-wrap items-center gap-1.5 rounded-md border border-slate-300 px-2 py-1.5 focus-within:border-sky-400 dark:border-zinc-700 dark:bg-zinc-800 dark:focus-within:border-sky-600"
   >
     <span
       v-for="tag in modelValue"
@@ -57,7 +57,7 @@ function onBackspace(): void {
     <input
       v-model="draft"
       type="text"
-      class="min-w-24 flex-1 border-none bg-transparent px-1 py-0.5 text-sm text-slate-700 outline-none placeholder:text-slate-400 dark:text-slate-200 dark:placeholder:text-slate-500"
+      class="min-w-24 flex-1 border-none bg-transparent px-1 py-0.5 text-sm text-slate-700 outline-none placeholder:text-slate-400 dark:text-zinc-200 dark:placeholder:text-zinc-500"
       :placeholder="modelValue.length === 0 ? (placeholder ?? '回车添加标签') : ''"
       aria-label="添加标签"
       @keydown.enter.prevent="composing ? undefined : commit()"
diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index f10cdc5..1696acc 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -56,7 +56,7 @@ const priorityBarClass = computed(() => {
     case 2:
       return 'bg-amber-400'
     default:
-      return 'bg-slate-300 dark:bg-slate-600'
+      return 'bg-slate-300 dark:bg-zinc-600'
   }
 })
 
@@ -67,18 +67,18 @@ const priorityTextClass = computed(() => {
     case 2:
       return 'text-amber-700 dark:text-amber-400'
     default:
-      return 'text-slate-400 dark:text-slate-500'
+      return 'text-slate-400 dark:text-zinc-500'
   }
 })
 </script>
 
 <template>
   <article
-    class="relative shrink-0 cursor-pointer overflow-hidden rounded-lg border border-slate-200 bg-white shadow-card transition duration-150 dark:border-slate-800 dark:bg-slate-900"
+    class="relative shrink-0 cursor-pointer overflow-hidden rounded-lg border border-slate-200 bg-white shadow-card transition duration-150 dark:border-zinc-800 dark:bg-zinc-900"
     :class="
       isDone
         ? 'opacity-60'
-        : 'hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:hover:border-slate-700'
+        : 'hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:hover:border-zinc-700'
     "
     :data-task-id="task.id"
     tabindex="0"
@@ -95,7 +95,7 @@ const priorityTextClass = computed(() => {
           :class="
             isDone
               ? 'border-emerald-500 bg-emerald-500 text-white'
-              : 'border-slate-300 hover:border-emerald-500 hover:bg-emerald-50 dark:border-slate-600 dark:hover:border-emerald-500 dark:hover:bg-emerald-950'
+              : 'border-slate-300 hover:border-emerald-500 hover:bg-emerald-50 dark:border-zinc-600 dark:hover:border-emerald-500 dark:hover:bg-emerald-950'
           "
           :aria-label="isDone ? '标记为未完成' : '标记为已完成'"
           :aria-pressed="isDone"
@@ -116,8 +116,8 @@ const priorityTextClass = computed(() => {
           class="min-w-0 flex-1 text-sm leading-snug wrap-break-word"
           :class="
             isDone
-              ? 'text-slate-400 line-through dark:text-slate-500'
-              : 'text-slate-800 dark:text-slate-100'
+              ? 'text-slate-400 line-through dark:text-zinc-500'
+              : 'text-slate-800 dark:text-zinc-100'
           "
         >
           {{ task.title }}
@@ -134,16 +134,16 @@ const priorityTextClass = computed(() => {
           :class="
             overdue
               ? 'font-medium text-rose-600 dark:text-rose-400'
-              : 'text-slate-500 dark:text-slate-400'
+              : 'text-slate-500 dark:text-zinc-400'
           "
         >
           {{ formatDueDate(task.dueDate) }}
         </span>
 
-        <span v-for="tag in visibleTags" :key="tag" class="text-slate-400 dark:text-slate-500">
+        <span v-for="tag in visibleTags" :key="tag" class="text-slate-400 dark:text-zinc-500">
           #{{ tag }}
         </span>
-        <span v-if="hiddenTagCount > 0" class="text-slate-400 dark:text-slate-500">
+        <span v-if="hiddenTagCount > 0" class="text-slate-400 dark:text-zinc-500">
           +{{ hiddenTagCount }}
         </span>
       </div>
diff --git a/src/components/TaskDetailDrawer.vue b/src/components/TaskDetailDrawer.vue
index be8420d..7a40b5e 100644
--- a/src/components/TaskDetailDrawer.vue
+++ b/src/components/TaskDetailDrawer.vue
@@ -82,11 +82,11 @@ function remove(): void {
   <SideDrawer :open="task !== null" title="任务详情" @close="emit('close')">
     <form v-if="task" class="flex flex-col gap-4" @submit.prevent="save">
       <label class="flex flex-col gap-1.5">
-        <span class="text-sm font-medium text-slate-600 dark:text-slate-400">标题</span>
+        <span class="text-sm font-medium text-slate-600 dark:text-zinc-400">标题</span>
         <input
           v-model="title"
           type="text"
-          class="rounded-md border border-slate-300 px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:focus:border-sky-600"
+          class="rounded-md border border-slate-300 px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:border-sky-600"
           aria-label="标题"
           @input="titleError = null"
         />
@@ -94,17 +94,17 @@ function remove(): void {
       </label>
 
       <label class="flex flex-col gap-1.5">
-        <span class="text-sm font-medium text-slate-600 dark:text-slate-400">描述</span>
+        <span class="text-sm font-medium text-slate-600 dark:text-zinc-400">描述</span>
         <textarea
           v-model="description"
           rows="4"
-          class="resize-y rounded-md border border-slate-300 px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:focus:border-sky-600"
+          class="resize-y rounded-md border border-slate-300 px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:border-sky-600"
           aria-label="描述"
         />
       </label>
 
       <fieldset class="flex flex-col gap-1.5">
-        <legend class="mb-1.5 text-sm font-medium text-slate-600 dark:text-slate-400">优先级</legend>
+        <legend class="mb-1.5 text-sm font-medium text-slate-600 dark:text-zinc-400">优先级</legend>
         <div class="flex gap-2">
           <button
             v-for="value in PRIORITIES"
@@ -114,7 +114,7 @@ function remove(): void {
             :class="
               priority === value
                 ? 'border-sky-400 bg-sky-50 text-sky-700 dark:border-sky-600 dark:bg-sky-950 dark:text-sky-300'
-                : 'border-slate-300 text-slate-600 hover:bg-slate-50 dark:border-slate-600 dark:text-slate-400 dark:hover:bg-slate-800'
+                : 'border-slate-300 text-slate-600 hover:bg-slate-50 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800'
             "
             :aria-pressed="priority === value"
             @click="priority = value"
@@ -125,12 +125,12 @@ function remove(): void {
       </fieldset>
 
       <div class="flex flex-col gap-1.5">
-        <span class="text-sm font-medium text-slate-600 dark:text-slate-400">截止日期</span>
+        <span class="text-sm font-medium text-slate-600 dark:text-zinc-400">截止日期</span>
         <DatePicker v-model="dueDate" />
       </div>
 
       <div class="flex flex-col gap-1.5">
-        <span class="text-sm font-medium text-slate-600 dark:text-slate-400">标签</span>
+        <span class="text-sm font-medium text-slate-600 dark:text-zinc-400">标签</span>
         <TagInput v-model="tags" />
       </div>
     </form>
@@ -148,7 +148,7 @@ function remove(): void {
         <div class="flex gap-2">
           <button
             type="button"
-            class="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-50 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-800"
+            class="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
             @click="emit('close')"
           >
             取消
diff --git a/src/components/ToastHost.vue b/src/components/ToastHost.vue
index 8152096..fd55a10 100644
--- a/src/components/ToastHost.vue
+++ b/src/components/ToastHost.vue
@@ -15,14 +15,14 @@ const { toasts } = storeToRefs(store)
       v-for="toast in toasts"
       :key="toast.id"
       role="status"
-      class="pointer-events-auto flex w-full max-w-sm items-center gap-3 rounded-md bg-slate-800 px-3 py-2 text-sm text-white shadow-panel dark:bg-slate-100 dark:text-slate-900"
+      class="pointer-events-auto flex w-full max-w-sm items-center gap-3 rounded-md bg-slate-800 px-3 py-2 text-sm text-white shadow-panel dark:bg-zinc-100 dark:text-zinc-900"
     >
       <span class="min-w-0 flex-1 wrap-break-word">{{ toast.message }}</span>
 
       <button
         v-if="toast.action"
         type="button"
-        class="shrink-0 rounded px-2 py-0.5 text-sm font-medium text-sky-300 transition hover:bg-white/10 dark:text-sky-700 dark:hover:bg-slate-900/10"
+        class="shrink-0 rounded px-2 py-0.5 text-sm font-medium text-sky-300 transition hover:bg-white/10 dark:text-sky-700 dark:hover:bg-zinc-900/10"
         @click="store.runAction(toast.id)"
       >
         {{ toast.action.label }}
@@ -30,7 +30,7 @@ const { toasts } = storeToRefs(store)
 
       <button
         type="button"
-        class="shrink-0 rounded px-1.5 text-slate-400 transition hover:text-white dark:text-slate-500 dark:hover:text-slate-900"
+        class="shrink-0 rounded px-1.5 text-slate-400 transition hover:text-white dark:text-zinc-500 dark:hover:text-zinc-900"
         aria-label="关闭提示"
         @click="store.dismiss(toast.id)"
       >
diff --git a/src/style.css b/src/style.css
index efe954c..6173d7f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -41,9 +41,13 @@
     text-rendering: optimizeLegibility;
   }
 
+  /*
+   * 深色用 zinc（中性灰）而不是 slate：slate 带明显蓝调，
+   * 整页会发蓝，和「中性灰」的目标色差得很远。
+   */
   html.dark body {
-    background: var(--color-slate-950);
-    color: var(--color-slate-100);
+    background: var(--color-zinc-950);
+    color: var(--color-zinc-100);
   }
 
   /* 统一的键盘焦点样式，鼠标点击不显示 */
@@ -68,7 +72,7 @@
   }
 
   html.dark * {
-    scrollbar-color: var(--color-slate-700) transparent;
+    scrollbar-color: var(--color-zinc-700) transparent;
   }
 }
 
diff --git a/src/views/TodayView.vue b/src/views/TodayView.vue
index 41f907a..b8c66bd 100644
--- a/src/views/TodayView.vue
+++ b/src/views/TodayView.vue
@@ -32,7 +32,7 @@ const TONES = {
   slate: {
     dot: 'bg-slate-400',
     badge:
-      'border-slate-200 bg-slate-50 text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300',
+      'border-slate-200 bg-slate-50 text-slate-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
   },
 } as const
 
@@ -123,23 +123,23 @@ function handleKeyMove(payload: { id: string; direction: MoveDirection }): void
     <!-- 限宽居中：否则 1440px 下卡片会被拉满整屏，标题与元信息之间出现大片空白 -->
     <div class="mx-auto flex w-full max-w-3xl flex-col gap-5 p-4 md:p-6">
       <header class="flex flex-col gap-0.5">
-        <h1 class="text-xl font-semibold tracking-tight text-slate-900 md:text-2xl dark:text-slate-100">
+        <h1 class="text-xl font-semibold tracking-tight text-slate-900 md:text-2xl dark:text-zinc-100">
           今日
         </h1>
-        <p class="text-sm text-slate-500 dark:text-slate-400">{{ todayLabel }}</p>
+        <p class="text-sm text-slate-500 dark:text-zinc-400">{{ todayLabel }}</p>
       </header>
 
       <dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
         <div
           v-for="card in statCards"
           :key="card.label"
-          class="rounded-xl border border-slate-200 bg-white px-4 py-3.5 shadow-card dark:border-slate-800 dark:bg-slate-900"
+          class="rounded-xl border border-slate-200 bg-white px-4 py-3.5 shadow-card dark:border-zinc-800 dark:bg-zinc-900"
         >
-          <dt class="flex items-center gap-1.5 text-xs text-slate-500 dark:text-slate-400">
+          <dt class="flex items-center gap-1.5 text-xs text-slate-500 dark:text-zinc-400">
             <span class="size-1.5 rounded-full" :class="card.dot" aria-hidden="true" />
             {{ card.label }}
           </dt>
-          <dd class="mt-1.5 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">
+          <dd class="mt-1.5 text-2xl font-semibold tracking-tight text-slate-900 dark:text-zinc-100">
             {{ card.value }}
           </dd>
         </div>
@@ -147,14 +147,14 @@ function handleKeyMove(payload: { id: string; direction: MoveDirection }): void
 
       <p
         v-if="todayCount === 0"
-        class="rounded-xl border border-dashed border-slate-300 bg-white/60 px-4 py-16 text-center text-sm text-slate-400 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-500"
+        class="rounded-xl border border-dashed border-slate-300 bg-white/60 px-4 py-16 text-center text-sm text-slate-400 dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-500"
       >
         今天没有待办事项
       </p>
 
       <section v-for="section in sections" :key="section.key" class="flex flex-col gap-2">
         <h2
-          class="flex flex-wrap items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300"
+          class="flex flex-wrap items-center gap-2 text-sm font-medium text-slate-700 dark:text-zinc-300"
         >
           <span class="size-1.5 rounded-full" :class="TONES[section.tone].dot" aria-hidden="true" />
           {{ section.title }}
@@ -165,7 +165,7 @@ function handleKeyMove(payload: { id: string; direction: MoveDirection }): void
           >
             {{ section.items.length }}
           </span>
-          <span class="text-xs font-normal text-slate-400 dark:text-slate-500">
+          <span class="text-xs font-normal text-slate-400 dark:text-zinc-500">
             {{ section.hint }}
           </span>
         </h2>