feat: vibrant neon color palette for both themes
Replaced gentle grays with eye-catching neon/vibrant colors! Dark Theme - Neon Cyberpunk: - Deep purple/blue backgrounds (265-290° hue) - Bright neon magenta primary (75% lightness, 0.25 chroma, 310° hue) - Neon cyan foreground (92% lightness, cyan tint) - Vibrant borders with purple glow (30% lightness, 0.05 chroma) - Electric accent colors throughout - Neon cyan waveforms with magenta progress Light Theme - Vibrant Pastels: - Soft purple-tinted backgrounds (280-290° hue) - Vivid magenta primary (55% lightness, 0.22 chroma) - Rich purple foreground (25% lightness) - Colorful borders and accents - High saturation throughout (0.15-0.22 chroma) - Vibrant purple/cyan waveforms Color Intensity: - Increased chroma from 0.14-0.15 to 0.20-0.25 - Much more saturated, punchy colors - Vibrant accent colors (cyan, magenta, purple, green) - Neon-style success (green), warning (yellow), destructive (red) Hue Shifts: - Purple/magenta theme (260-320° range) - Cyan accents (180-200°) - Warm warnings (80°) - Green success (160°) This gives a bold, modern, energetic aesthetic perfect for a creative audio application - like FL Studio or Ableton Live's colorful themes! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
124
app/globals.css
124
app/globals.css
@@ -19,97 +19,97 @@
|
||||
/* CSS Variables for theming */
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors using OKLCH - soft, gentle gray palette */
|
||||
--background: oklch(93% 0.005 285.8);
|
||||
--foreground: oklch(28% 0.012 285.8);
|
||||
/* Light mode colors using OKLCH - vibrant colorful palette */
|
||||
--background: oklch(95% 0.015 280);
|
||||
--foreground: oklch(25% 0.05 260);
|
||||
|
||||
--card: oklch(96% 0.003 285.8);
|
||||
--card-foreground: oklch(28% 0.012 285.8);
|
||||
--card: oklch(98% 0.01 290);
|
||||
--card-foreground: oklch(25% 0.05 260);
|
||||
|
||||
--popover: oklch(96% 0.003 285.8);
|
||||
--popover-foreground: oklch(28% 0.012 285.8);
|
||||
--popover: oklch(98% 0.01 290);
|
||||
--popover-foreground: oklch(25% 0.05 260);
|
||||
|
||||
--primary: oklch(58% 0.14 240);
|
||||
--primary-foreground: oklch(96% 0.003 285.8);
|
||||
--primary: oklch(55% 0.22 310);
|
||||
--primary-foreground: oklch(98% 0.01 290);
|
||||
|
||||
--secondary: oklch(88% 0.005 285.8);
|
||||
--secondary-foreground: oklch(32% 0.012 285.8);
|
||||
--secondary: oklch(90% 0.03 280);
|
||||
--secondary-foreground: oklch(30% 0.08 270);
|
||||
|
||||
--muted: oklch(90% 0.005 285.8);
|
||||
--muted-foreground: oklch(48% 0.008 285.9);
|
||||
--muted: oklch(92% 0.02 285);
|
||||
--muted-foreground: oklch(45% 0.08 260);
|
||||
|
||||
--accent: oklch(88% 0.005 285.8);
|
||||
--accent-foreground: oklch(32% 0.012 285.8);
|
||||
--accent: oklch(88% 0.05 300);
|
||||
--accent-foreground: oklch(30% 0.1 280);
|
||||
|
||||
--destructive: oklch(58% 0.16 29.2);
|
||||
--destructive-foreground: oklch(96% 0.003 285.8);
|
||||
--destructive: oklch(58% 0.22 20);
|
||||
--destructive-foreground: oklch(98% 0.01 290);
|
||||
|
||||
--border: oklch(85% 0.005 285.8);
|
||||
--input: oklch(88% 0.005 285.8);
|
||||
--ring: oklch(58% 0.14 240);
|
||||
--border: oklch(82% 0.03 280);
|
||||
--input: oklch(88% 0.03 285);
|
||||
--ring: oklch(55% 0.22 310);
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--success: oklch(56% 0.14 145);
|
||||
--success-foreground: oklch(96% 0.003 285.8);
|
||||
--success: oklch(55% 0.2 160);
|
||||
--success-foreground: oklch(98% 0.01 290);
|
||||
|
||||
--warning: oklch(62% 0.14 85);
|
||||
--warning-foreground: oklch(28% 0.012 285.8);
|
||||
--warning: oklch(65% 0.2 80);
|
||||
--warning-foreground: oklch(25% 0.05 260);
|
||||
|
||||
--info: oklch(62% 0.14 240);
|
||||
--info-foreground: oklch(96% 0.003 285.8);
|
||||
--info: oklch(60% 0.2 240);
|
||||
--info-foreground: oklch(98% 0.01 290);
|
||||
|
||||
/* Audio-specific colors */
|
||||
--waveform: oklch(58% 0.14 240);
|
||||
--waveform-progress: oklch(56% 0.14 145);
|
||||
--waveform-selection: oklch(62% 0.14 240);
|
||||
--waveform-bg: oklch(97% 0.002 285.8);
|
||||
/* Audio-specific colors - vibrant cyan/purple */
|
||||
--waveform: oklch(58% 0.22 260);
|
||||
--waveform-progress: oklch(55% 0.22 310);
|
||||
--waveform-selection: oklch(60% 0.22 200);
|
||||
--waveform-bg: oklch(98% 0.008 285);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode colors using OKLCH - lighter, softer palette */
|
||||
--background: oklch(18% 0.008 285.8);
|
||||
--foreground: oklch(78% 0.005 285.8);
|
||||
/* Dark mode colors using OKLCH - vibrant neon palette */
|
||||
--background: oklch(15% 0.015 265);
|
||||
--foreground: oklch(92% 0.02 180);
|
||||
|
||||
--card: oklch(22% 0.01 285.8);
|
||||
--card-foreground: oklch(78% 0.005 285.8);
|
||||
--card: oklch(18% 0.02 270);
|
||||
--card-foreground: oklch(92% 0.02 180);
|
||||
|
||||
--popover: oklch(22% 0.01 285.8);
|
||||
--popover-foreground: oklch(78% 0.005 285.8);
|
||||
--popover: oklch(18% 0.02 270);
|
||||
--popover-foreground: oklch(92% 0.02 180);
|
||||
|
||||
--primary: oklch(68% 0.14 240);
|
||||
--primary-foreground: oklch(22% 0.01 285.8);
|
||||
--primary: oklch(75% 0.25 310);
|
||||
--primary-foreground: oklch(18% 0.02 270);
|
||||
|
||||
--secondary: oklch(28% 0.012 285.8);
|
||||
--secondary-foreground: oklch(75% 0.005 285.8);
|
||||
--secondary: oklch(22% 0.03 280);
|
||||
--secondary-foreground: oklch(85% 0.15 180);
|
||||
|
||||
--muted: oklch(25% 0.01 285.8);
|
||||
--muted-foreground: oklch(58% 0.008 285.9);
|
||||
--muted: oklch(20% 0.02 270);
|
||||
--muted-foreground: oklch(65% 0.1 200);
|
||||
|
||||
--accent: oklch(30% 0.012 285.8);
|
||||
--accent-foreground: oklch(75% 0.005 285.8);
|
||||
--accent: oklch(25% 0.03 290);
|
||||
--accent-foreground: oklch(85% 0.2 320);
|
||||
|
||||
--destructive: oklch(58% 0.16 29.2);
|
||||
--destructive-foreground: oklch(78% 0.005 285.8);
|
||||
--destructive: oklch(65% 0.25 20);
|
||||
--destructive-foreground: oklch(92% 0.02 180);
|
||||
|
||||
--border: oklch(32% 0.012 285.8);
|
||||
--input: oklch(28% 0.012 285.8);
|
||||
--ring: oklch(68% 0.14 240);
|
||||
--border: oklch(30% 0.05 280);
|
||||
--input: oklch(22% 0.03 280);
|
||||
--ring: oklch(75% 0.25 310);
|
||||
|
||||
--success: oklch(62% 0.14 145);
|
||||
--success-foreground: oklch(22% 0.01 285.8);
|
||||
--success: oklch(70% 0.22 160);
|
||||
--success-foreground: oklch(18% 0.02 270);
|
||||
|
||||
--warning: oklch(68% 0.14 85);
|
||||
--warning-foreground: oklch(22% 0.01 285.8);
|
||||
--warning: oklch(75% 0.22 80);
|
||||
--warning-foreground: oklch(18% 0.02 270);
|
||||
|
||||
--info: oklch(66% 0.14 240);
|
||||
--info-foreground: oklch(22% 0.01 285.8);
|
||||
--info: oklch(72% 0.22 240);
|
||||
--info-foreground: oklch(18% 0.02 270);
|
||||
|
||||
/* Audio-specific colors */
|
||||
--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);
|
||||
/* Audio-specific colors - neon cyan/magenta */
|
||||
--waveform: oklch(72% 0.25 200);
|
||||
--waveform-progress: oklch(75% 0.25 310);
|
||||
--waveform-selection: oklch(70% 0.25 180);
|
||||
--waveform-bg: oklch(12% 0.02 270);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user