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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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} /> 新建
|
||||
|
||||
Reference in New Issue
Block a user