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/TaskCard.vue
+10 -10
View File
@@ -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>