fix: 修复浅色/暗色模式对比度,补全 brand/slate 色板

- 色阶拉大:浅色 #FAF5F0→#1A1A1A 全灰度覆盖
- 按钮色加深: bg-blue-600 #C07A7A, bg-blue-700 #B06060
- 补全 @theme: --color-brand-*, --color-slate-* (6个页面共用)
- 新增 .rounded-btn 类
- ProjectsPage 输入框补全样式
- 暗色模式 slate 背景覆盖
This commit is contained in:
qichi.liang
2026-05-22 10:07:17 +08:00
parent c58ca26969
commit 1a80cd694b
2 changed files with 114 additions and 123 deletions

View File

@@ -1,144 +1,135 @@
@import "tailwindcss";
@theme {
--color-gray-50: #F5E6E6;
--color-gray-100: #F0E0E0;
--color-gray-200: #E8D0D0;
--color-gray-300: #D4B5B5;
--color-gray-400: #C0A0A0;
--color-gray-500: #999999;
--color-gray-600: #8C6C6C;
--color-gray-700: #6C5050;
--color-gray-800: #4C3434;
--color-gray-900: #333333;
--color-blue-50: #FDF5F0;
--color-blue-100: #FAF0E8;
--color-gray-50: #FAF5F0;
--color-gray-100: #F0EAE5;
--color-gray-200: #E5DDD5;
--color-gray-300: #D5CCCC;
--color-gray-400: #A09090;
--color-gray-500: #707070;
--color-gray-600: #505050;
--color-gray-700: #404040;
--color-gray-800: #2A2A2A;
--color-gray-900: #1A1A1A;
--color-blue-50: #FDF0F0;
--color-blue-100: #FAE5E5;
--color-blue-500: #C9A96E;
--color-blue-600: #D4A5A5;
--color-blue-700: #C9A96E;
--color-blue-600: #C07A7A;
--color-blue-700: #B06060;
--color-brand-500: #C07A7A;
--color-brand-600: #C07A7A;
--color-brand-700: #B06060;
--color-slate-100: #F0EAE5;
--color-slate-200: #E5DDD5;
--color-slate-300: #D5CCCC;
--color-slate-400: #A09090;
--color-slate-500: #707070;
--color-slate-600: #505050;
--color-slate-700: #404040;
--color-slate-800: #2A2A2A;
}
.dark .bg-blue-600,
.dark .bg-blue-700:hover {
background-color: #9B8EC4 !important;
border-color: #9B8EC4 !important;
.rounded-btn { border-radius: 0.5rem; }
body {
background-color: #FAF5F0;
color: #1A1A1A;
}
a { color: #404040; }
a:hover { color: #B06060; }
.bg-blue-600 {
background-color: #C07A7A !important;
color: #FFFFFF !important;
}
.bg-blue-600:hover { background-color: #B06060 !important; }
.bg-blue-700 { background-color: #B06060 !important; color: #FFFFFF !important; }
.text-blue-600 { color: #C07A7A !important; }
.text-blue-700 { color: #B06060 !important; }
.dark .bg-blue-500 {
background-color: #4CB8A7 !important;
button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]),
button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]) {
background-color: #FFFFFF !important;
border: 1px solid #D5CCCC;
color: #1A1A1A !important;
}
button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]):hover,
button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]):hover {
background-color: #F0EAE5 !important;
}
.dark {
background-color: #1A1830 !important;
background-color: #3C384C !important;
}
.dark body {
background-color: #1A1830 !important;
.dark * {
color: #F4F0E8 !important;
}
.dark .bg-gray-50,
.dark .bg-white,
.dark aside,
.dark header {
background-color: #282540 !important;
}
.dark .dark\:bg-gray-900 {
background-color: #1A1830 !important;
}
.dark .dark\:bg-gray-800 {
background-color: #2C2840 !important;
}
.dark .dark\:bg-gray-700,
.dark .dark\:hover\:bg-gray-100:hover {
background-color: #3A3650 !important;
}
.dark input,
.dark select {
background-color: #2C2840 !important;
border-color: #3A3650 !important;
color: #E8E4F0 !important;
}
.dark .border-gray-200,
.dark .dark\:border-gray-700 {
border-color: #3A3650 !important;
}
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark h2,
.dark .font-bold,
.dark .font-semibold {
color: #E8E4F0 !important;
}
.dark .text-gray-600,
.dark .dark\:text-gray-400 {
color: #C8C0D8 !important;
}
.dark .text-gray-500 {
color: #A8A0C0 !important;
}
.dark .text-gray-400,
.dark .dark\:text-gray-300 {
.dark .bg-blue-600,
.dark .bg-blue-700,
.dark [class*="text-blue-"],
.dark [class*="text-brand-"] {
color: #9B8EC4 !important;
}
.dark .text-blue-600 {
color: #9B8EC4 !important;
}
.dark .text-blue-700 {
color: #4CB8A7 !important;
}
.dark .dark\:bg-gray-50 {
background-color: #1A1830 !important;
}
button.rounded-lg:not([class*="bg-blue"]),
button.rounded-md:not([class*="bg-blue"]),
.btn-ghost {
background-color: rgba(255,255,255,0.85) !important;
}
button.rounded-lg:not([class*="bg-blue"]):hover,
button.rounded-md:not([class*="bg-blue"]):hover,
.btn-ghost:hover {
background-color: var(--color-gray-100) !important;
}
.dark button.rounded-lg:not([class*="bg-blue"]),
.dark button.rounded-md:not([class*="bg-blue"]),
.dark .btn-ghost {
background-color: #2C2840 !important;
border-color: #3A3650 !important;
color: #E8E4F0 !important;
}
.dark button.rounded-lg:not([class*="bg-blue"]):hover,
.dark button.rounded-md:not([class*="bg-blue"]):hover,
.dark .btn-ghost:hover {
background-color: #3A3650 !important;
}
.bg-blue-600,
.bg-blue-700:hover {
background-color: #D4A5A5 !important;
border: 1px solid #D4A5A5;
.dark .bg-blue-600:hover,
.dark .bg-blue-700:hover,
.dark .bg-brand-600:hover,
.dark .bg-brand-700:hover {
background-color: #4CB8A7 !important;
color: #FFFFFF !important;
}
.bg-blue-600:hover,
.bg-blue-700 {
background-color: #C9A96E !important;
border-color: #C9A96E !important;
.dark .bg-blue-600,
.dark .bg-blue-700,
.dark .bg-brand-600,
.dark .bg-brand-700 {
background-color: #9B8EC4 !important;
color: #FFFFFF !important;
}
.dark .bg-white,
.dark .bg-gray-50,
.dark aside,
.dark header {
background-color: #4C485C !important;
border-color: #5C5870 !important;
}
.dark .dark\:bg-gray-900,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-700,
.dark .dark\:bg-slate-800 {
background-color: #4C485C !important;
}
.dark .dark\:hover\:bg-gray-100:hover {
background-color: #5C5870 !important;
}
.dark input,
.dark select,
.dark textarea {
background-color: #4C485C !important;
border-color: #5C5870 !important;
}
.dark .dark\:border-gray-700,
.dark .border-gray-200,
.dark .dark\:border-slate-700,
.dark .dark\:border-slate-600 {
border-color: #5C5870 !important;
}
.dark button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]),
.dark button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]) {
background-color: #5C5870 !important;
border-color: #6C6880 !important;
}
.dark button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]):hover,
.dark button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]):hover {
background-color: #6C6880 !important;
}

View File

@@ -38,8 +38,8 @@ export default function ProjectsPage() {
</div>
<div className="mb-8 flex gap-2">
<input value={name} onChange={e => setName(e.target.value)} placeholder="项目名称" className="w-40" />
<input value={desc} onChange={e => setDesc(e.target.value)} placeholder="描述(可选)" className="flex-1" />
<input value={name} onChange={e => setName(e.target.value)} placeholder="项目名称" className="w-40 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800" />
<input value={desc} onChange={e => setDesc(e.target.value)} placeholder="描述(可选)" className="flex-1 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800" />
<button onClick={() => createMut.mutate()} disabled={!name.trim()}
className="inline-flex items-center gap-1.5 rounded-btn bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-200 hover:bg-brand-700 active:scale-[0.98] disabled:opacity-50">
<Plus size={14} />