change light theme
Hee Sung Son committed
Nov 21, 2025 at 22:49 UTC
5de30dd30e7d9488c6f585810ed60796afb4e6a4
1 file changed
+22
-22
cmd/relay-server/frontend/src/index.css
+22
-22
@@ -37,30 +37,30 @@
37
38
@layer base {
39
:root {
40
- /* Light Theme - Default (OKLCH) */
41
- --background: oklch(98% 0.005 200); /* #f5f8f8 */
42
- --foreground: oklch(35% 0.02 280); /* gray-800 */
43
- --card: oklch(100% 0 0); /* white */
44
- --card-foreground: oklch(35% 0.02 280); /* gray-800 */
45
- --popover: oklch(100% 0 0); /* white */
46
- --popover-foreground: oklch(35% 0.02 280); /* gray-800 */
47
- --primary: oklch(75% 0.15 210); /* #47cdff */
48
- --primary-foreground: oklch(100% 0 0); /* white */
49
- --secondary: oklch(96% 0.005 240); /* gray-100 */
50
- --secondary-foreground: oklch(30% 0.02 280); /* gray-700 */
51
- --muted: oklch(96% 0.005 240); /* gray-100 */
52
- --muted-foreground: oklch(52% 0.02 260); /* gray-500 #92a9c9 */
53
- --accent: oklch(96% 0.005 240); /* gray-100 */
54
- --accent-foreground: oklch(35% 0.02 280); /* gray-800 */
55
- --destructive: oklch(62% 0.22 25); /* red-500 */
56
- --destructive-foreground: oklch(100% 0 0); /* white */
57
- --border: oklch(88% 0.005 240); /* gray-200 */
58
- --input: oklch(88% 0.005 240); /* gray-200 */
59
- --ring: oklch(75% 0.15 210); /* #47cdff */
40
+ /* Light Theme (OKLCH) - Maintains the color tone of dark theme while inverting lightness */
41
+ --background: oklch(98% 0.005 240); /* Soft white instead of pure white */
42
+ --foreground: oklch(20% 0.03 215); /* Deep blue-gray text */
43
+ --card: oklch(100% 0 0); /* Pure white card (differentiated from background) */
44
+ --card-foreground: oklch(20% 0.03 215);
45
+ --popover: oklch(100% 0 0);
46
+ --popover-foreground: oklch(20% 0.03 215);
47
+ --primary: oklch(55% 0.13 210); /* Darker and less saturated than dark theme, ~#1b8bc4 */
48
+ --primary-foreground: oklch(100% 0 0); /* White text */
49
+ --secondary: oklch(95% 0.01 220); /* Light blue-gray background */
50
+ --secondary-foreground: oklch(25% 0.03 215);
51
+ --muted: oklch(94% 0.01 220); /* Light gray */
52
+ --muted-foreground: oklch(50% 0.04 220); /* Mid-tone gray text */
53
+ --accent: oklch(94% 0.02 210); /* Light accent background */
54
+ --accent-foreground: oklch(25% 0.03 215);
55
+ --destructive: oklch(55% 0.20 25); /* Red - slightly darker than dark theme */
56
+ --destructive-foreground: oklch(98% 0.01 240);
57
+ --border: oklch(90% 0.01 220); /* Subtle border */
58
+ --input: oklch(96% 0.005 220); /* Input field background */
59
+ --ring: oklch(55% 0.13 210); /* Same as primary */
60
61
/* Custom light theme colors */
62
- --green-status: oklch(78% 0.16 170); /* #50E3C2 */
63
- --text-muted: oklch(52% 0.02 260); /* #92a9c9 */
62
+ --green-status: oklch(55% 0.14 150); /* Darker green than dark theme */
63
+ --text-muted: oklch(50% 0.04 220); /* Soft gray text */
64
}
65
66
.dark {