chore: fix oklch style

This commit is contained in:
engigu
2026-04-01 12:04:03 +08:00
parent 639cf4a35c
commit 1297457cd6
2 changed files with 75 additions and 64 deletions
+65 -54
View File
@@ -70,117 +70,128 @@
:root {
--background: #ffffff;
--background: oklch(1 0 0);
--foreground: #252525;
--foreground: oklch(0.145 0 0);
--card: #ffffff;
--card: oklch(1 0 0);
--card-foreground: #252525;
--card-foreground: oklch(0.145 0 0);
--popover: #ffffff;
--popover: oklch(1 0 0);
--popover-foreground: #252525;
--popover-foreground: oklch(0.145 0 0);
--primary: #333333;
--primary: oklch(0.205 0 0);
--primary-foreground: #ffffff;
--primary-foreground: oklch(0.985 0 0);
--secondary: #f3f4f6;
--secondary: oklch(0.97 0 0);
--secondary-foreground: #333333;
--secondary-foreground: oklch(0.205 0 0);
--muted: #f3f4f6;
--muted: oklch(0.97 0 0);
--muted-foreground: #6b7280;
--muted-foreground: oklch(0.556 0 0);
--accent: #f3f4f6;
--accent: oklch(0.97 0 0);
--accent-foreground: #333333;
--accent-foreground: oklch(0.205 0 0);
--destructive: #ef4444;
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: #ffffff;
--destructive-foreground: oklch(0.985 0 0);
--border: #e5e7eb;
--border: oklch(0.922 0 0);
--input: #e5e7eb;
--input: oklch(0.922 0 0);
--ring: #9ca3af;
--ring: oklch(0.708 0 0);
--radius: 0.625rem;
--sidebar: #f9fafb;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: #252525;
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: #333333;
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: #ffffff;
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: #f3f4f6;
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: #333333;
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: #e5e7eb;
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: #9ca3af;
--sidebar-ring: oklch(0.708 0 0);
}
/* OKLCH support targeting modern browsers */
@supports (color: oklch(1 0 0)) {
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--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);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--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);
}
}
.dark {
--background: #1a1a1a;
--background: oklch(0.22 0 0);
--foreground: #f9fafb;
--foreground: oklch(0.985 0 0);
--card: #242424;
--card: oklch(0.26 0 0);
--card-foreground: #f9fafb;
--card-foreground: oklch(0.985 0 0);
--popover: #242424;
--popover: oklch(0.26 0 0);
--popover-foreground: #f9fafb;
--popover-foreground: oklch(0.985 0 0);
--primary: #f3f4f6;
--primary: oklch(0.922 0 0);
--primary-foreground: #252525;
--primary-foreground: oklch(0.205 0 0);
--secondary: #2d2d2d;
--secondary: oklch(0.32 0 0);
--secondary-foreground: #f9fafb;
--secondary-foreground: oklch(0.985 0 0);
--muted: #2d2d2d;
--muted: oklch(0.32 0 0);
--muted-foreground: #9ca3af;
--muted-foreground: oklch(0.708 0 0);
--accent: #2d2d2d;
--accent: oklch(0.32 0 0);
--accent-foreground: #f9fafb;
--accent-foreground: oklch(0.985 0 0);
--destructive: #dc2626;
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: #f9fafb;
--destructive-foreground: oklch(0.985 0 0);
--border: rgba(255, 255, 255, 0.12);
--border: oklch(1 0 0 / 12%);
--input: rgba(255, 255, 255, 0.15);
--input: oklch(1 0 0 / 15%);
--ring: #6b7280;
--ring: oklch(0.556 0 0);
--sidebar: #1a1a1a;
--sidebar: oklch(0.26 0 0);
--sidebar-foreground: #f9fafb;
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: #60a5fa;
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: #f9fafb;
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: #2d2d2d;
--sidebar-accent: oklch(0.32 0 0);
--sidebar-accent-foreground: #f9fafb;
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: rgba(255, 255, 255, 0.12);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: #6b7280;
--sidebar-ring: oklch(0.556 0 0);
}
@supports (color: oklch(1 0 0)) {
.dark {
--background: oklch(0.22 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.26 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.26 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.32 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.32 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.32 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--sidebar: oklch(0.26 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.32 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: oklch(0.556 0 0);
}
}
@layer base {