From 0dfbdca00cda65e4449d18456d4f77d7d65dcd73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 18 Nov 2025 08:30:24 +0100 Subject: [PATCH] feat: lighten dark theme for softer, gentler appearance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Significantly lightened all dark theme colors for reduced contrast: Background tones (lighter, softer): - waveform-bg: 16% (was 10% - too dark) - background: 18% (was 12% - lifted significantly) - card: 22% (was 15% - more visible) - muted: 25% (was 18% - lighter) - secondary: 28% (was 20% - softer) - accent: 30% (was 22% - warmer) - border: 32% (was 25% - more subtle) Foreground tones (softer, less harsh): - foreground: 78% (was 85% - reduced contrast) - card-foreground: 78% (was 85% - softer) - secondary-foreground: 75% (was 80% - gentler) - muted-foreground: 58% (was 60% - slightly muted) Color adjustments: - Reduced color intensity (0.14 vs 0.15) - Softer blue primary: oklch(68% 0.14 240) - More muted accent colors throughout Benefits: - Much softer, gentler appearance - Reduced contrast reduces eye strain - More comfortable for long editing sessions - Warmer, more inviting feel - Modern low-contrast aesthetic - Similar to VSCode's "Dark+" or Figma's dark mode The theme now has a beautiful, soft low-contrast aesthetic that's easy on the eyes while maintaining readability. 🤖 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 c852907..2200774 100644 --- a/app/globals.css +++ b/app/globals.css @@ -67,49 +67,49 @@ } .dark { - /* Dark mode colors using OKLCH - harmonized gray palette */ - --background: oklch(12% 0.01 285.8); - --foreground: oklch(85% 0.005 285.8); + /* Dark mode colors using OKLCH - lighter, softer palette */ + --background: oklch(18% 0.008 285.8); + --foreground: oklch(78% 0.005 285.8); - --card: oklch(15% 0.012 285.8); - --card-foreground: oklch(85% 0.005 285.8); + --card: oklch(22% 0.01 285.8); + --card-foreground: oklch(78% 0.005 285.8); - --popover: oklch(15% 0.012 285.8); - --popover-foreground: oklch(85% 0.005 285.8); + --popover: oklch(22% 0.01 285.8); + --popover-foreground: oklch(78% 0.005 285.8); - --primary: oklch(70% 0.15 240); - --primary-foreground: oklch(15% 0.012 285.8); + --primary: oklch(68% 0.14 240); + --primary-foreground: oklch(22% 0.01 285.8); - --secondary: oklch(20% 0.015 285.8); - --secondary-foreground: oklch(80% 0.005 285.8); + --secondary: oklch(28% 0.012 285.8); + --secondary-foreground: oklch(75% 0.005 285.8); - --muted: oklch(18% 0.012 285.8); - --muted-foreground: oklch(60% 0.008 285.9); + --muted: oklch(25% 0.01 285.8); + --muted-foreground: oklch(58% 0.008 285.9); - --accent: oklch(22% 0.015 285.8); - --accent-foreground: oklch(80% 0.005 285.8); + --accent: oklch(30% 0.012 285.8); + --accent-foreground: oklch(75% 0.005 285.8); - --destructive: oklch(55% 0.18 29.2); - --destructive-foreground: oklch(85% 0.005 285.8); + --destructive: oklch(58% 0.16 29.2); + --destructive-foreground: oklch(78% 0.005 285.8); - --border: oklch(25% 0.015 285.8); - --input: oklch(20% 0.015 285.8); - --ring: oklch(70% 0.15 240); + --border: oklch(32% 0.012 285.8); + --input: oklch(28% 0.012 285.8); + --ring: oklch(68% 0.14 240); - --success: oklch(60% 0.15 145); - --success-foreground: oklch(15% 0.012 285.8); + --success: oklch(62% 0.14 145); + --success-foreground: oklch(22% 0.01 285.8); - --warning: oklch(70% 0.15 85); - --warning-foreground: oklch(15% 0.012 285.8); + --warning: oklch(68% 0.14 85); + --warning-foreground: oklch(22% 0.01 285.8); - --info: oklch(65% 0.15 240); - --info-foreground: oklch(15% 0.012 285.8); + --info: oklch(66% 0.14 240); + --info-foreground: oklch(22% 0.01 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(10% 0.01 285.8); + --waveform: oklch(68% 0.14 240); + --waveform-progress: oklch(62% 0.14 145); + --waveform-selection: oklch(68% 0.14 240); + --waveform-bg: oklch(16% 0.008 285.8); } }