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

feat: harmonize light theme with soft gray tones

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

60
app/globals.css
View File

@@ -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 {