From f74c8abbf9f7d431dd7f4ff768dc4050ff45dd54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 18 Nov 2025 08:28:23 +0100 Subject: [PATCH] feat: harmonize light theme with soft gray tones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaced harsh whites with a soft, professional light gray palette: Light tones (lightest to darkest): - waveform-bg: 99% - near-white for waveform area - card: 98% - soft white for cards/panels - background: 96% - main background (was 100% harsh white) - muted: 94% - muted elements - secondary/accent: 92% - secondary/accent elements - input: 92% - input backgrounds - border: 88% - borders and dividers Dark tones (text, darker): - foreground: 20% - main text (was 9.8% too dark) - card-foreground: 20% - card text - secondary-foreground: 25% - secondary text - muted-foreground: 45% - muted text (lighter for better contrast) Primary color: - Changed to pleasant blue: oklch(55% 0.15 240) - Matches dark theme primary color concept - More modern than pure black Benefits: - Softer, more pleasant appearance - Reduced eye strain in light mode - Better harmony with dark mode - Professional appearance like Figma, Linear, etc. - Maintains excellent readability - Consistent gray palette across both themes Both light and dark themes now have harmonized gray palettes that are easy on the eyes and professional-looking. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/globals.css | 60 ++++++++++++++++++++++++------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/app/globals.css b/app/globals.css index de5cbcc..c852907 100644 --- a/app/globals.css +++ b/app/globals.css @@ -19,51 +19,51 @@ /* CSS Variables for theming */ @layer base { :root { - /* Light mode colors using OKLCH */ - --background: oklch(100% 0 0); - --foreground: oklch(9.8% 0.038 285.8); + /* Light mode colors using OKLCH - harmonized gray palette */ + --background: oklch(96% 0.005 285.8); + --foreground: oklch(20% 0.015 285.8); - --card: oklch(100% 0 0); - --card-foreground: oklch(9.8% 0.038 285.8); + --card: oklch(98% 0.003 285.8); + --card-foreground: oklch(20% 0.015 285.8); - --popover: oklch(100% 0 0); - --popover-foreground: oklch(9.8% 0.038 285.8); + --popover: oklch(98% 0.003 285.8); + --popover-foreground: oklch(20% 0.015 285.8); - --primary: oklch(22.4% 0.053 285.8); - --primary-foreground: oklch(98% 0 0); + --primary: oklch(55% 0.15 240); + --primary-foreground: oklch(98% 0.003 285.8); - --secondary: oklch(96.1% 0 0); - --secondary-foreground: oklch(13.8% 0.038 285.8); + --secondary: oklch(92% 0.005 285.8); + --secondary-foreground: oklch(25% 0.015 285.8); - --muted: oklch(96.1% 0 0); - --muted-foreground: oklch(45.1% 0.015 285.9); + --muted: oklch(94% 0.005 285.8); + --muted-foreground: oklch(45% 0.01 285.9); - --accent: oklch(96.1% 0 0); - --accent-foreground: oklch(13.8% 0.038 285.8); + --accent: oklch(92% 0.005 285.8); + --accent-foreground: oklch(25% 0.015 285.8); - --destructive: oklch(60.2% 0.168 29.2); - --destructive-foreground: oklch(98% 0 0); + --destructive: oklch(55% 0.18 29.2); + --destructive-foreground: oklch(98% 0.003 285.8); - --border: oklch(89.8% 0 0); - --input: oklch(89.8% 0 0); - --ring: oklch(22.4% 0.053 285.8); + --border: oklch(88% 0.005 285.8); + --input: oklch(92% 0.005 285.8); + --ring: oklch(55% 0.15 240); --radius: 0.5rem; - --success: oklch(60% 0.15 145); - --success-foreground: oklch(98% 0 0); + --success: oklch(55% 0.15 145); + --success-foreground: oklch(98% 0.003 285.8); - --warning: oklch(75% 0.15 85); - --warning-foreground: oklch(20% 0 0); + --warning: oklch(60% 0.15 85); + --warning-foreground: oklch(20% 0.015 285.8); - --info: oklch(65% 0.15 240); - --info-foreground: oklch(98% 0 0); + --info: oklch(60% 0.15 240); + --info-foreground: oklch(98% 0.003 285.8); /* Audio-specific colors */ - --waveform: oklch(50% 0.1 240); - --waveform-progress: oklch(60% 0.15 145); - --waveform-selection: oklch(65% 0.15 240); - --waveform-bg: oklch(98% 0 0); + --waveform: oklch(55% 0.15 240); + --waveform-progress: oklch(55% 0.15 145); + --waveform-selection: oklch(60% 0.15 240); + --waveform-bg: oklch(99% 0.002 285.8); } .dark {