From 46ce75f3a5b2244b46591cb7803ca8cd23bf7fb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 18 Nov 2025 08:26:43 +0100 Subject: [PATCH] feat: harmonize dark theme with softer gray tones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaced harsh white contrasts with a harmonized gray palette: Background tones (darkest to lightest): - waveform-bg: 10% - deepest black for waveform area - background: 12% - main app background - card: 15% - card/panel backgrounds - muted: 18% - muted elements - secondary: 20% - secondary elements - accent: 22% - accent elements - border: 25% - borders and dividers Foreground tones (lighter, softer): - foreground: 85% - main text (was 98% harsh white) - card-foreground: 85% - card text - secondary-foreground: 80% - secondary text - muted-foreground: 60% - muted text Primary color: - Changed from white to blue: oklch(70% 0.15 240) - More pleasant, less harsh than pure white - Better visual hierarchy Benefits: - Reduced eye strain with softer contrasts - More professional, cohesive appearance - Better visual hierarchy - Maintains readability while being easier on the eyes - Harmonized gray scale throughout the interface 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/globals.css | 52 ++++++++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/app/globals.css b/app/globals.css index fa8aa3f..de5cbcc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -67,49 +67,49 @@ } .dark { - /* Dark mode colors using OKLCH */ - --background: oklch(9.8% 0.038 285.8); - --foreground: oklch(98% 0 0); + /* Dark mode colors using OKLCH - harmonized gray palette */ + --background: oklch(12% 0.01 285.8); + --foreground: oklch(85% 0.005 285.8); - --card: oklch(9.8% 0.038 285.8); - --card-foreground: oklch(98% 0 0); + --card: oklch(15% 0.012 285.8); + --card-foreground: oklch(85% 0.005 285.8); - --popover: oklch(9.8% 0.038 285.8); - --popover-foreground: oklch(98% 0 0); + --popover: oklch(15% 0.012 285.8); + --popover-foreground: oklch(85% 0.005 285.8); - --primary: oklch(98% 0 0); - --primary-foreground: oklch(13.8% 0.038 285.8); + --primary: oklch(70% 0.15 240); + --primary-foreground: oklch(15% 0.012 285.8); - --secondary: oklch(17.7% 0.038 285.8); - --secondary-foreground: oklch(98% 0 0); + --secondary: oklch(20% 0.015 285.8); + --secondary-foreground: oklch(80% 0.005 285.8); - --muted: oklch(17.7% 0.038 285.8); - --muted-foreground: oklch(63.9% 0.012 285.9); + --muted: oklch(18% 0.012 285.8); + --muted-foreground: oklch(60% 0.008 285.9); - --accent: oklch(17.7% 0.038 285.8); - --accent-foreground: oklch(98% 0 0); + --accent: oklch(22% 0.015 285.8); + --accent-foreground: oklch(80% 0.005 285.8); - --destructive: oklch(50% 0.2 29.2); - --destructive-foreground: oklch(98% 0 0); + --destructive: oklch(55% 0.18 29.2); + --destructive-foreground: oklch(85% 0.005 285.8); - --border: oklch(17.7% 0.038 285.8); - --input: oklch(17.7% 0.038 285.8); - --ring: oklch(83.1% 0.012 285.9); + --border: oklch(25% 0.015 285.8); + --input: oklch(20% 0.015 285.8); + --ring: oklch(70% 0.15 240); - --success: oklch(55% 0.15 145); - --success-foreground: oklch(98% 0 0); + --success: oklch(60% 0.15 145); + --success-foreground: oklch(15% 0.012 285.8); --warning: oklch(70% 0.15 85); - --warning-foreground: oklch(20% 0 0); + --warning-foreground: oklch(15% 0.012 285.8); - --info: oklch(60% 0.15 240); - --info-foreground: oklch(98% 0 0); + --info: oklch(65% 0.15 240); + --info-foreground: oklch(15% 0.012 285.8); /* Audio-specific colors */ --waveform: oklch(70% 0.15 240); --waveform-progress: oklch(65% 0.15 145); --waveform-selection: oklch(70% 0.15 240); - --waveform-bg: oklch(12% 0.038 285.8); + --waveform-bg: oklch(10% 0.01 285.8); } }