🎨 清新蓝色主题美化
将纯灰度无彩色主题替换为清新蓝色系： - primary 从纯黑改为柔和蓝色 - accent/sidebar 加入淡蓝色调 - 圆角从 0.625rem 加大到 0.75rem - chart 颜色换为蓝/薄荷/琥珀/薰衣草/珊瑚清新色板 - 暗色模式同步适配蓝色调
This commit is contained in:
sugarBecomer
@@ -5,58 +5,58 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--background: 220 60% 99%;
|
||||
--foreground: 220 30% 12%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--card-foreground: 220 30% 12%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--popover-foreground: 220 30% 12%;
|
||||
--primary: 220 72% 50%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--secondary: 220 30% 96%;
|
||||
--secondary-foreground: 220 30% 18%;
|
||||
--muted: 220 20% 96%;
|
||||
--muted-foreground: 220 10% 42%;
|
||||
--accent: 220 40% 95%;
|
||||
--accent-foreground: 220 30% 18%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5.9% 10%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--border: 220 20% 92%;
|
||||
--input: 220 20% 92%;
|
||||
--ring: 220 72% 50%;
|
||||
--radius: 0.75rem;
|
||||
--chart-1: 220 72% 55%;
|
||||
--chart-2: 170 50% 48%;
|
||||
--chart-3: 40 70% 55%;
|
||||
--chart-4: 280 55% 58%;
|
||||
--chart-5: 15 70% 55%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--background: 220 20% 8%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card: 220 20% 12%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover: 220 20% 12%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--primary: 220 65% 62%;
|
||||
--primary-foreground: 220 30% 10%;
|
||||
--secondary: 220 15% 18%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--muted: 220 15% 18%;
|
||||
--muted-foreground: 220 10% 60%;
|
||||
--accent: 220 20% 18%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--border: 220 15% 18%;
|
||||
--input: 220 15% 18%;
|
||||
--ring: 220 65% 62%;
|
||||
--chart-1: 220 70% 55%;
|
||||
--chart-2: 170 55% 48%;
|
||||
--chart-3: 40 75% 55%;
|
||||
--chart-4: 280 60% 58%;
|
||||
--chart-5: 15 72% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,72 +108,72 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--radius: 0.75rem;
|
||||
--background: oklch(0.995 0.002 250);
|
||||
--foreground: oklch(0.18 0.02 250);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.18 0.02 250);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.18 0.02 250);
|
||||
--primary: oklch(0.55 0.19 250);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.965 0.01 250);
|
||||
--secondary-foreground: oklch(0.25 0.04 250);
|
||||
--muted: oklch(0.965 0.008 250);
|
||||
--muted-foreground: oklch(0.52 0.02 250);
|
||||
--accent: oklch(0.955 0.025 250);
|
||||
--accent-foreground: oklch(0.25 0.04 250);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--border: oklch(0.925 0.01 250);
|
||||
--input: oklch(0.925 0.01 250);
|
||||
--ring: oklch(0.55 0.19 250);
|
||||
--chart-1: oklch(0.6 0.19 250);
|
||||
--chart-2: oklch(0.7 0.15 170);
|
||||
--chart-3: oklch(0.75 0.16 80);
|
||||
--chart-4: oklch(0.65 0.18 300);
|
||||
--chart-5: oklch(0.7 0.17 25);
|
||||
--sidebar: oklch(0.985 0.005 250);
|
||||
--sidebar-foreground: oklch(0.18 0.02 250);
|
||||
--sidebar-primary: oklch(0.55 0.19 250);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--sidebar-accent: oklch(0.955 0.025 250);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.04 250);
|
||||
--sidebar-border: oklch(0.925 0.01 250);
|
||||
--sidebar-ring: oklch(0.55 0.19 250);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--background: oklch(0.145 0.01 250);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card: oklch(0.2 0.015 250);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover: oklch(0.2 0.015 250);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--primary: oklch(0.7 0.15 250);
|
||||
--primary-foreground: oklch(0.15 0.02 250);
|
||||
--secondary: oklch(0.26 0.02 250);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--muted: oklch(0.26 0.02 250);
|
||||
--muted-foreground: oklch(0.7 0.02 250);
|
||||
--accent: oklch(0.26 0.03 250);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--ring: oklch(0.7 0.15 250);
|
||||
--chart-1: oklch(0.65 0.2 250);
|
||||
--chart-2: oklch(0.7 0.15 170);
|
||||
--chart-3: oklch(0.75 0.16 80);
|
||||
--chart-4: oklch(0.65 0.2 300);
|
||||
--chart-5: oklch(0.7 0.19 25);
|
||||
--sidebar: oklch(0.2 0.015 250);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary: oklch(0.7 0.15 250);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent: oklch(0.26 0.03 250);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
--sidebar-ring: oklch(0.7 0.15 250);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
Reference in New Issue
Block a user