valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: harmonize dark theme with softer gray tones

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-18 08:26:43 +01:00
parent 439c14db87
commit 46ce75f3a5
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/globals.css
View File

@@ -67,49 +67,49 @@
} }
.dark { .dark {
/* Dark mode colors using OKLCH */ /* Dark mode colors using OKLCH - harmonized gray palette */
--background: oklch(9.8% 0.038 285.8); --background: oklch(12% 0.01 285.8);
--foreground: oklch(98% 0 0); --foreground: oklch(85% 0.005 285.8);
--card: oklch(9.8% 0.038 285.8); --card: oklch(15% 0.012 285.8);
--card-foreground: oklch(98% 0 0); --card-foreground: oklch(85% 0.005 285.8);
--popover: oklch(9.8% 0.038 285.8); --popover: oklch(15% 0.012 285.8);
--popover-foreground: oklch(98% 0 0); --popover-foreground: oklch(85% 0.005 285.8);
--primary: oklch(98% 0 0); --primary: oklch(70% 0.15 240);
--primary-foreground: oklch(13.8% 0.038 285.8); --primary-foreground: oklch(15% 0.012 285.8);
--secondary: oklch(17.7% 0.038 285.8); --secondary: oklch(20% 0.015 285.8);
--secondary-foreground: oklch(98% 0 0); --secondary-foreground: oklch(80% 0.005 285.8);
--muted: oklch(17.7% 0.038 285.8); --muted: oklch(18% 0.012 285.8);
--muted-foreground: oklch(63.9% 0.012 285.9); --muted-foreground: oklch(60% 0.008 285.9);
--accent: oklch(17.7% 0.038 285.8); --accent: oklch(22% 0.015 285.8);
--accent-foreground: oklch(98% 0 0); --accent-foreground: oklch(80% 0.005 285.8);
--destructive: oklch(50% 0.2 29.2); --destructive: oklch(55% 0.18 29.2);
--destructive-foreground: oklch(98% 0 0); --destructive-foreground: oklch(85% 0.005 285.8);
--border: oklch(17.7% 0.038 285.8); --border: oklch(25% 0.015 285.8);
--input: oklch(17.7% 0.038 285.8); --input: oklch(20% 0.015 285.8);
--ring: oklch(83.1% 0.012 285.9); --ring: oklch(70% 0.15 240);
--success: oklch(55% 0.15 145); --success: oklch(60% 0.15 145);
--success-foreground: oklch(98% 0 0); --success-foreground: oklch(15% 0.012 285.8);
--warning: oklch(70% 0.15 85); --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: oklch(65% 0.15 240);
--info-foreground: oklch(98% 0 0); --info-foreground: oklch(15% 0.012 285.8);
/* Audio-specific colors */ /* Audio-specific colors */
--waveform: oklch(70% 0.15 240); --waveform: oklch(70% 0.15 240);
--waveform-progress: oklch(65% 0.15 145); --waveform-progress: oklch(65% 0.15 145);
--waveform-selection: oklch(70% 0.15 240); --waveform-selection: oklch(70% 0.15 240);
--waveform-bg: oklch(12% 0.038 285.8); --waveform-bg: oklch(10% 0.01 285.8);
} }
} }