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/BackupPanel.vue
+9 -9
View File
@@ -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>