Solin/Kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme): 深色模式配色由 slate 换成 zinc，去掉整页蓝调

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

只替换带 dark: 前缀的类（16 个文件、182 处），外加 style.css 里三处
html.dark 基底色；浅色模式一字未动（页面底仍为 slate-100 #f1f5f9）。
This commit is contained in:
chenshoulin
2026-10-18 19:45:23 +08:00
parent b27fefb965
commit 85b2d8a30f
17 changed files with 103 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardToolbar.vue
+13 -13
View File
@@ -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()"
>
清空筛选