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/App.vue
+8 -8
View File
@@ -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>