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/AppNav.vue
+9 -9
View File
@@ -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">
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>
src/components/BoardColumn.vue
+5 -5
View File
@@ -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>
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()"
>
清空筛选
src/components/DatePicker.spec.ts
+2 -2
View File
@@ -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('占位层只覆盖左侧，给日历图标留出位置', () => {
src/components/DatePicker.vue
+3 -3
View File
@@ -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)"
>
清除
src/components/PwaUpdatePrompt.vue
+3 -3
View File
@@ -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"
>
src/components/QuickAddTask.vue
+1 -1
View File
@@ -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"
src/components/SideDrawer.vue
+5 -5
View File
@@ -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>
src/components/TagFilter.vue
+5 -5
View File
@@ -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')"
>
清除标签筛选
src/components/TagInput.vue
+2 -2
View File
@@ -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()"
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>
src/components/TaskDetailDrawer.vue
+9 -9
View File
@@ -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')"
>
取消
src/components/ToastHost.vue
+3 -3
View File
@@ -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)"
>