/* ============================================ Color Themes - MagicWeather 10 distinct color themes + auto (default) Each theme overrides CSS custom properties via [data-theme="X"] on the element. ============================================ */ /* ============================================ Theme 1: Ocean Blue (Default) No [data-theme] selector needed. Base values live in variables.css / dark-mode.css. We only define the new theme-specific variables here. ============================================ */ :root { --text-gradient-from: #2563eb; --text-gradient-to: #0ea5e9; --theme-glow-1: rgba(59, 130, 246, 0.3); --theme-glow-2: rgba(56, 189, 248, 0.2); --hero-bg: linear-gradient(to bottom, #f0f9ff, #eef2ff); } .dark { --text-gradient-from: #60a5fa; --text-gradient-to: #7dd3fc; --theme-glow-1: rgba(59, 130, 246, 0.15); --theme-glow-2: rgba(99, 102, 241, 0.12); --hero-bg: linear-gradient(to bottom, #020617, #172554); } /* ============================================ Theme 2: Sunset Orange Warm oranges, ambers, deep coral ============================================ */ [data-theme="sunset-orange"] { --primary: 25 95% 53%; --primary-foreground: 33 100% 96%; --ring: 25 95% 53%; --accent: 33 100% 96%; --accent-foreground: 20 14% 20%; --muted: 33 30% 93%; --muted-foreground: 20 10% 44%; --border: 33 30% 88%; --input: 33 30% 88%; --background: 33 100% 98%; --foreground: 20 14% 12%; --card: 0 0% 100%; --card-foreground: 20 14% 12%; --secondary: 33 30% 95%; --secondary-foreground: 20 14% 12%; --destructive: 0 84% 60%; --destructive-foreground: 33 100% 96%; --chart-1: 25 95% 53%; --chart-2: 38 92% 50%; --chart-3: 0 84% 60%; --chart-4: 45 93% 47%; --chart-5: 15 75% 48%; --primary-gradient: linear-gradient(45deg, #ea580c, #f97316, #f59e0b); --weather-gradient: linear-gradient(to right, #f97316, #f59e0b, #fbbf24); --text-gradient-from: #ea580c; --text-gradient-to: #f59e0b; --theme-glow-1: rgba(249, 115, 22, 0.3); --theme-glow-2: rgba(245, 158, 11, 0.2); --hero-bg: linear-gradient(to bottom, #fff7ed, #fffbeb); } .dark[data-theme="sunset-orange"], [data-theme="sunset-orange"].dark { --primary: 25 95% 60%; --primary-foreground: 20 14% 8%; --ring: 25 95% 60%; --background: 20 14% 6%; --foreground: 33 100% 96%; --card: 20 14% 9%; --card-foreground: 33 100% 96%; --secondary: 20 20% 15%; --secondary-foreground: 33 100% 96%; --muted: 20 20% 15%; --muted-foreground: 25 15% 60%; --accent: 20 20% 15%; --accent-foreground: 33 100% 96%; --destructive: 0 63% 51%; --destructive-foreground: 33 100% 96%; --border: 20 20% 18%; --input: 20 20% 18%; --primary-gradient: linear-gradient(45deg, #fb923c, #fbbf24, #f97316); --weather-gradient: linear-gradient(to right, #fb923c, #fbbf24, #fde68a); --text-gradient-from: #fb923c; --text-gradient-to: #fde68a; --theme-glow-1: rgba(249, 115, 22, 0.15); --theme-glow-2: rgba(245, 158, 11, 0.12); --hero-bg: linear-gradient(to bottom, #1c1006, #271a08); } /* ============================================ Theme 3: Forest Green Emerald, earth tones, sage ============================================ */ [data-theme="forest-green"] { --primary: 160 84% 39%; --primary-foreground: 138 76% 97%; --ring: 160 84% 39%; --accent: 138 76% 96%; --accent-foreground: 150 30% 16%; --muted: 138 20% 93%; --muted-foreground: 150 10% 42%; --border: 138 20% 87%; --input: 138 20% 87%; --background: 138 50% 98%; --foreground: 150 30% 10%; --card: 0 0% 100%; --card-foreground: 150 30% 10%; --secondary: 138 20% 95%; --secondary-foreground: 150 30% 10%; --destructive: 0 84% 60%; --destructive-foreground: 138 76% 97%; --chart-1: 160 84% 39%; --chart-2: 142 71% 45%; --chart-3: 120 20% 45%; --chart-4: 85 40% 55%; --chart-5: 38 70% 55%; --primary-gradient: linear-gradient(45deg, #059669, #10b981, #34d399); --weather-gradient: linear-gradient(to right, #10b981, #34d399, #6ee7b7); --text-gradient-from: #059669; --text-gradient-to: #10b981; --theme-glow-1: rgba(16, 185, 129, 0.3); --theme-glow-2: rgba(107, 143, 113, 0.2); --hero-bg: linear-gradient(to bottom, #ecfdf5, #f0fdf4); } .dark[data-theme="forest-green"], [data-theme="forest-green"].dark { --primary: 160 84% 50%; --primary-foreground: 150 30% 6%; --ring: 160 84% 50%; --background: 150 30% 5%; --foreground: 138 76% 97%; --card: 150 30% 8%; --card-foreground: 138 76% 97%; --secondary: 150 20% 14%; --secondary-foreground: 138 76% 97%; --muted: 150 20% 14%; --muted-foreground: 150 15% 58%; --accent: 150 20% 14%; --accent-foreground: 138 76% 97%; --destructive: 0 63% 51%; --destructive-foreground: 138 76% 97%; --border: 150 20% 17%; --input: 150 20% 17%; --primary-gradient: linear-gradient(45deg, #34d399, #6ee7b7, #10b981); --weather-gradient: linear-gradient(to right, #34d399, #6ee7b7, #a7f3d0); --text-gradient-from: #34d399; --text-gradient-to: #a7f3d0; --theme-glow-1: rgba(16, 185, 129, 0.15); --theme-glow-2: rgba(52, 211, 153, 0.1); --hero-bg: linear-gradient(to bottom, #022c22, #052e16); } /* ============================================ Theme 4: Purple Galaxy Deep purple, violet, indigo, starry feel ============================================ */ [data-theme="purple-galaxy"] { --primary: 263 70% 58%; --primary-foreground: 270 100% 98%; --ring: 263 70% 58%; --accent: 270 60% 96%; --accent-foreground: 270 50% 18%; --muted: 270 25% 93%; --muted-foreground: 270 10% 44%; --border: 270 25% 88%; --input: 270 25% 88%; --background: 270 50% 98%; --foreground: 270 50% 10%; --card: 0 0% 100%; --card-foreground: 270 50% 10%; --secondary: 270 25% 95%; --secondary-foreground: 270 50% 10%; --destructive: 0 84% 60%; --destructive-foreground: 270 100% 98%; --chart-1: 263 70% 58%; --chart-2: 258 90% 66%; --chart-3: 239 84% 67%; --chart-4: 280 65% 60%; --chart-5: 292 84% 61%; --primary-gradient: linear-gradient(45deg, #7c3aed, #8b5cf6, #a78bfa); --weather-gradient: linear-gradient(to right, #7c3aed, #8b5cf6, #6366f1); --text-gradient-from: #7c3aed; --text-gradient-to: #a78bfa; --theme-glow-1: rgba(124, 58, 237, 0.3); --theme-glow-2: rgba(99, 102, 241, 0.2); --hero-bg: linear-gradient(to bottom, #faf5ff, #eef2ff); } .dark[data-theme="purple-galaxy"], [data-theme="purple-galaxy"].dark { --primary: 263 70% 68%; --primary-foreground: 270 50% 6%; --ring: 263 70% 68%; --background: 270 50% 4%; --foreground: 270 100% 98%; --card: 270 45% 8%; --card-foreground: 270 100% 98%; --secondary: 270 30% 14%; --secondary-foreground: 270 100% 98%; --muted: 270 30% 14%; --muted-foreground: 270 20% 62%; --accent: 270 30% 14%; --accent-foreground: 270 100% 98%; --destructive: 0 63% 51%; --destructive-foreground: 270 100% 98%; --border: 270 30% 18%; --input: 270 30% 18%; --primary-gradient: linear-gradient(45deg, #a78bfa, #c4b5fd, #818cf8); --weather-gradient: linear-gradient(to right, #a78bfa, #c4b5fd, #e9d5ff); --text-gradient-from: #a78bfa; --text-gradient-to: #e9d5ff; --theme-glow-1: rgba(139, 92, 246, 0.18); --theme-glow-2: rgba(99, 102, 241, 0.12); --hero-bg: linear-gradient(to bottom, #0c0015, #1e1b4b); } /* ============================================ Theme 5: Rose Pink Soft pink, magenta, warm rose ============================================ */ [data-theme="rose-pink"] { --primary: 330 81% 60%; --primary-foreground: 340 100% 98%; --ring: 330 81% 60%; --accent: 340 80% 96%; --accent-foreground: 340 30% 16%; --muted: 340 25% 93%; --muted-foreground: 340 10% 44%; --border: 340 25% 88%; --input: 340 25% 88%; --background: 340 60% 98%; --foreground: 340 30% 10%; --card: 0 0% 100%; --card-foreground: 340 30% 10%; --secondary: 340 25% 95%; --secondary-foreground: 340 30% 10%; --destructive: 0 84% 60%; --destructive-foreground: 340 100% 98%; --chart-1: 330 81% 60%; --chart-2: 350 89% 60%; --chart-3: 310 70% 55%; --chart-4: 300 60% 55%; --chart-5: 20 70% 55%; --primary-gradient: linear-gradient(45deg, #db2777, #ec4899, #f472b6); --weather-gradient: linear-gradient(to right, #ec4899, #f472b6, #f9a8d4); --text-gradient-from: #db2777; --text-gradient-to: #f472b6; --theme-glow-1: rgba(236, 72, 153, 0.3); --theme-glow-2: rgba(244, 63, 94, 0.2); --hero-bg: linear-gradient(to bottom, #fdf2f8, #fff1f2); } .dark[data-theme="rose-pink"], [data-theme="rose-pink"].dark { --primary: 330 81% 68%; --primary-foreground: 340 30% 6%; --ring: 330 81% 68%; --background: 340 30% 5%; --foreground: 340 100% 98%; --card: 340 25% 8%; --card-foreground: 340 100% 98%; --secondary: 340 20% 14%; --secondary-foreground: 340 100% 98%; --muted: 340 20% 14%; --muted-foreground: 340 15% 58%; --accent: 340 20% 14%; --accent-foreground: 340 100% 98%; --destructive: 0 63% 51%; --destructive-foreground: 340 100% 98%; --border: 340 20% 17%; --input: 340 20% 17%; --primary-gradient: linear-gradient(45deg, #f472b6, #f9a8d4, #ec4899); --weather-gradient: linear-gradient(to right, #f472b6, #f9a8d4, #fbcfe8); --text-gradient-from: #f472b6; --text-gradient-to: #fbcfe8; --theme-glow-1: rgba(236, 72, 153, 0.15); --theme-glow-2: rgba(244, 63, 94, 0.12); --hero-bg: linear-gradient(to bottom, #1a0510, #2a0a1a); } /* ============================================ Theme 6: Arctic Ice Cool light blue, icy white, silver ============================================ */ [data-theme="arctic-ice"] { --primary: 199 89% 60%; --primary-foreground: 204 100% 97%; --ring: 199 89% 60%; --accent: 204 80% 96%; --accent-foreground: 210 30% 18%; --muted: 210 25% 94%; --muted-foreground: 215 16% 47%; --border: 210 30% 90%; --input: 210 30% 90%; --background: 204 100% 98%; --foreground: 210 30% 12%; --card: 204 60% 99%; --card-foreground: 210 30% 12%; --secondary: 210 25% 96%; --secondary-foreground: 210 30% 12%; --destructive: 0 84% 60%; --destructive-foreground: 204 100% 97%; --chart-1: 199 89% 60%; --chart-2: 190 80% 50%; --chart-3: 215 25% 60%; --chart-4: 180 50% 55%; --chart-5: 220 60% 65%; --primary-gradient: linear-gradient(45deg, #0ea5e9, #38bdf8, #7dd3fc); --weather-gradient: linear-gradient(to right, #38bdf8, #7dd3fc, #bae6fd); --text-gradient-from: #0284c7; --text-gradient-to: #38bdf8; --theme-glow-1: rgba(56, 189, 248, 0.25); --theme-glow-2: rgba(148, 163, 184, 0.2); --hero-bg: linear-gradient(to bottom, #f0f9ff, #f8fafc); } .dark[data-theme="arctic-ice"], [data-theme="arctic-ice"].dark { --primary: 199 89% 65%; --primary-foreground: 210 30% 6%; --ring: 199 89% 65%; --background: 215 30% 6%; --foreground: 204 100% 97%; --card: 215 28% 9%; --card-foreground: 204 100% 97%; --secondary: 215 22% 14%; --secondary-foreground: 204 100% 97%; --muted: 215 22% 14%; --muted-foreground: 215 18% 60%; --accent: 215 22% 14%; --accent-foreground: 204 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 204 100% 97%; --border: 215 22% 17%; --input: 215 22% 17%; --primary-gradient: linear-gradient(45deg, #7dd3fc, #bae6fd, #38bdf8); --weather-gradient: linear-gradient(to right, #7dd3fc, #bae6fd, #e0f2fe); --text-gradient-from: #7dd3fc; --text-gradient-to: #e0f2fe; --theme-glow-1: rgba(56, 189, 248, 0.12); --theme-glow-2: rgba(148, 163, 184, 0.08); --hero-bg: linear-gradient(to bottom, #0c1929, #0f1d2e); } /* ============================================ Theme 7: Midnight Dark Deep navy, charcoal, neon blue accents Premium dark feel ============================================ */ [data-theme="midnight-dark"] { --primary: 217 91% 60%; --primary-foreground: 222 47% 98%; --ring: 217 91% 60%; --accent: 220 30% 94%; --accent-foreground: 222 47% 14%; --muted: 220 15% 92%; --muted-foreground: 220 10% 44%; --border: 220 20% 86%; --input: 220 20% 86%; --background: 222 25% 96%; --foreground: 222 47% 8%; --card: 0 0% 100%; --card-foreground: 222 47% 8%; --secondary: 220 15% 94%; --secondary-foreground: 222 47% 8%; --destructive: 0 84% 60%; --destructive-foreground: 222 47% 98%; --chart-1: 217 91% 60%; --chart-2: 240 60% 60%; --chart-3: 200 80% 50%; --chart-4: 260 60% 60%; --chart-5: 180 70% 50%; --primary-gradient: linear-gradient(45deg, #2563eb, #3b82f6, #60a5fa); --weather-gradient: linear-gradient(to right, #3b82f6, #60a5fa, #93c5fd); --text-gradient-from: #2563eb; --text-gradient-to: #60a5fa; --theme-glow-1: rgba(59, 130, 246, 0.3); --theme-glow-2: rgba(99, 102, 241, 0.2); --hero-bg: linear-gradient(to bottom, #f1f5f9, #e2e8f0); } .dark[data-theme="midnight-dark"], [data-theme="midnight-dark"].dark { --primary: 217 91% 60%; --primary-foreground: 222 47% 98%; --ring: 217 91% 60%; --background: 222 47% 4%; --foreground: 210 40% 96%; --card: 222 47% 6%; --card-foreground: 210 40% 96%; --secondary: 222 40% 10%; --secondary-foreground: 210 40% 96%; --muted: 222 40% 10%; --muted-foreground: 215 20% 55%; --accent: 222 40% 10%; --accent-foreground: 210 40% 96%; --destructive: 0 63% 51%; --destructive-foreground: 210 40% 96%; --border: 222 35% 12%; --input: 222 35% 12%; --primary-gradient: linear-gradient(45deg, #3b82f6, #60a5fa, #93c5fd); --weather-gradient: linear-gradient(to right, #3b82f6, #818cf8, #c084fc); --text-gradient-from: #60a5fa; --text-gradient-to: #93c5fd; --theme-glow-1: rgba(59, 130, 246, 0.2); --theme-glow-2: rgba(99, 102, 241, 0.15); --hero-bg: linear-gradient(to bottom, #020617, #0f172a); } /* ============================================ Theme 8: Cherry Red Bold red, crimson, warm accents ============================================ */ [data-theme="cherry-red"] { --primary: 0 72% 51%; --primary-foreground: 0 0% 100%; --ring: 0 72% 51%; --accent: 0 60% 96%; --accent-foreground: 0 40% 16%; --muted: 0 20% 93%; --muted-foreground: 0 10% 44%; --border: 0 20% 88%; --input: 0 20% 88%; --background: 0 50% 98%; --foreground: 0 40% 10%; --card: 0 0% 100%; --card-foreground: 0 40% 10%; --secondary: 0 20% 95%; --secondary-foreground: 0 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --chart-1: 0 72% 51%; --chart-2: 0 74% 42%; --chart-3: 350 80% 50%; --chart-4: 20 80% 55%; --chart-5: 10 85% 60%; --primary-gradient: linear-gradient(45deg, #b91c1c, #dc2626, #ef4444); --weather-gradient: linear-gradient(to right, #dc2626, #ef4444, #f87171); --text-gradient-from: #b91c1c; --text-gradient-to: #ef4444; --theme-glow-1: rgba(220, 38, 38, 0.3); --theme-glow-2: rgba(239, 68, 68, 0.2); --hero-bg: linear-gradient(to bottom, #fef2f2, #fff1f2); } .dark[data-theme="cherry-red"], [data-theme="cherry-red"].dark { --primary: 0 72% 58%; --primary-foreground: 0 0% 100%; --ring: 0 72% 58%; --background: 0 30% 5%; --foreground: 0 50% 97%; --card: 0 25% 8%; --card-foreground: 0 50% 97%; --secondary: 0 20% 13%; --secondary-foreground: 0 50% 97%; --muted: 0 20% 13%; --muted-foreground: 0 12% 55%; --accent: 0 20% 13%; --accent-foreground: 0 50% 97%; --destructive: 0 63% 51%; --destructive-foreground: 0 50% 97%; --border: 0 20% 16%; --input: 0 20% 16%; --primary-gradient: linear-gradient(45deg, #ef4444, #f87171, #dc2626); --weather-gradient: linear-gradient(to right, #ef4444, #f87171, #fca5a5); --text-gradient-from: #f87171; --text-gradient-to: #fca5a5; --theme-glow-1: rgba(220, 38, 38, 0.18); --theme-glow-2: rgba(239, 68, 68, 0.12); --hero-bg: linear-gradient(to bottom, #1a0505, #270a0a); } /* ============================================ Theme 9: Golden Hour Gold, honey, warm amber ============================================ */ [data-theme="golden-hour"] { --primary: 45 93% 47%; --primary-foreground: 45 100% 6%; --ring: 45 93% 47%; --accent: 45 80% 95%; --accent-foreground: 35 40% 16%; --muted: 40 25% 93%; --muted-foreground: 35 12% 44%; --border: 40 30% 87%; --input: 40 30% 87%; --background: 45 70% 98%; --foreground: 35 40% 10%; --card: 45 30% 99%; --card-foreground: 35 40% 10%; --secondary: 40 25% 95%; --secondary-foreground: 35 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 45 100% 98%; --chart-1: 45 93% 47%; --chart-2: 33 90% 50%; --chart-3: 38 92% 50%; --chart-4: 25 80% 55%; --chart-5: 50 85% 50%; --primary-gradient: linear-gradient(45deg, #d97706, #eab308, #fbbf24); --weather-gradient: linear-gradient(to right, #eab308, #fbbf24, #fde68a); --text-gradient-from: #b45309; --text-gradient-to: #eab308; --theme-glow-1: rgba(234, 179, 8, 0.3); --theme-glow-2: rgba(217, 119, 6, 0.2); --hero-bg: linear-gradient(to bottom, #fefce8, #fffbeb); } .dark[data-theme="golden-hour"], [data-theme="golden-hour"].dark { --primary: 45 93% 55%; --primary-foreground: 35 40% 6%; --ring: 45 93% 55%; --background: 35 35% 5%; --foreground: 45 100% 97%; --card: 35 30% 8%; --card-foreground: 45 100% 97%; --secondary: 35 22% 13%; --secondary-foreground: 45 100% 97%; --muted: 35 22% 13%; --muted-foreground: 40 15% 55%; --accent: 35 22% 13%; --accent-foreground: 45 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 45 100% 97%; --border: 35 22% 16%; --input: 35 22% 16%; --primary-gradient: linear-gradient(45deg, #fbbf24, #fde68a, #eab308); --weather-gradient: linear-gradient(to right, #fbbf24, #fde68a, #fef9c3); --text-gradient-from: #fbbf24; --text-gradient-to: #fef9c3; --theme-glow-1: rgba(234, 179, 8, 0.15); --theme-glow-2: rgba(217, 119, 6, 0.1); --hero-bg: linear-gradient(to bottom, #1a1505, #261e08); } /* ============================================ Theme 10: Tropical Teal Teal, coral, palm green ============================================ */ [data-theme="tropical-teal"] { --primary: 168 76% 42%; --primary-foreground: 166 76% 97%; --ring: 168 76% 42%; --accent: 166 60% 95%; --accent-foreground: 170 40% 14%; --muted: 170 20% 93%; --muted-foreground: 170 10% 42%; --border: 170 20% 87%; --input: 170 20% 87%; --background: 166 50% 98%; --foreground: 170 40% 10%; --card: 166 20% 99%; --card-foreground: 170 40% 10%; --secondary: 170 20% 95%; --secondary-foreground: 170 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 166 76% 97%; --chart-1: 168 76% 42%; --chart-2: 25 95% 60%; --chart-3: 142 71% 45%; --chart-4: 190 80% 50%; --chart-5: 340 75% 55%; --primary-gradient: linear-gradient(45deg, #0d9488, #14b8a6, #2dd4bf); --weather-gradient: linear-gradient(to right, #14b8a6, #fb923c, #22c55e); --text-gradient-from: #0d9488; --text-gradient-to: #14b8a6; --theme-glow-1: rgba(20, 184, 166, 0.3); --theme-glow-2: rgba(251, 146, 60, 0.2); --hero-bg: linear-gradient(to bottom, #f0fdfa, #ecfdf5); } .dark[data-theme="tropical-teal"], [data-theme="tropical-teal"].dark { --primary: 168 76% 52%; --primary-foreground: 170 40% 6%; --ring: 168 76% 52%; --background: 170 35% 5%; --foreground: 166 76% 97%; --card: 170 30% 8%; --card-foreground: 166 76% 97%; --secondary: 170 22% 13%; --secondary-foreground: 166 76% 97%; --muted: 170 22% 13%; --muted-foreground: 170 15% 55%; --accent: 170 22% 13%; --accent-foreground: 166 76% 97%; --destructive: 0 63% 51%; --destructive-foreground: 166 76% 97%; --border: 170 22% 16%; --input: 170 22% 16%; --primary-gradient: linear-gradient(45deg, #2dd4bf, #5eead4, #14b8a6); --weather-gradient: linear-gradient(to right, #2dd4bf, #fb923c, #4ade80); --text-gradient-from: #2dd4bf; --text-gradient-to: #5eead4; --theme-glow-1: rgba(20, 184, 166, 0.15); --theme-glow-2: rgba(251, 146, 60, 0.1); --hero-bg: linear-gradient(to bottom, #021a17, #042f2e); } /* ============================================ Auto Theme Uses prefers-color-scheme to auto-detect. Inherits the default ocean-blue palette. No additional overrides needed beyond what variables.css and dark-mode.css provide. ============================================ */ [data-theme="auto"] { /* Light mode: inherits :root defaults */ } @media (prefers-color-scheme: dark) { [data-theme="auto"]:not(.light) { --background: 222 47% 6%; --foreground: 210 40% 98%; --card: 222 47% 9%; --card-foreground: 210 40% 98%; --popover: 222 47% 9%; --popover-foreground: 210 40% 98%; --primary: 206 85% 56%; --primary-foreground: 222 47% 6%; --secondary: 217 33% 15%; --secondary-foreground: 210 40% 98%; --muted: 217 33% 15%; --muted-foreground: 215 20% 65%; --accent: 217 33% 15%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 51%; --destructive-foreground: 210 40% 98%; --border: 217 33% 18%; --input: 217 33% 18%; --ring: 206 85% 56%; --primary-gradient: linear-gradient(45deg, #60a5fa, #818cf8, #c084fc); --weather-gradient: linear-gradient(to right, #60a5fa, #818cf8, #c084fc); --text-gradient-from: #60a5fa; --text-gradient-to: #7dd3fc; --theme-glow-1: rgba(59, 130, 246, 0.15); --theme-glow-2: rgba(99, 102, 241, 0.12); --hero-bg: linear-gradient(to bottom, #020617, #172554); color-scheme: dark; } } /* ============================================ Theme Transition Smooth transitions when switching themes ============================================ */ html[data-theme] { transition: background-color 0.4s ease, color 0.4s ease; } html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } /* ============================================ Theme Picker Swatches Small circular color previews for the theme selection UI ============================================ */ .theme-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: all 0.2s ease; position: relative; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2); } .theme-swatch:hover { transform: scale(1.15); box-shadow: 0 3px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2); } .theme-swatch:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .theme-swatch.active { border-color: hsl(var(--foreground)); box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--foreground)); } .dark .theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px rgba(255, 255, 255, 0.6); } @media (max-width: 767px) { .theme-swatch { width: 40px; height: 40px; } } /* Ocean Blue (default) */ .theme-swatch[data-theme="ocean-blue"], .theme-swatch[data-theme="auto"] { background: linear-gradient(135deg, #2563eb, #38bdf8); } /* Auto theme has a small split indicator */ .theme-swatch[data-theme="auto"]::after { content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #f8fafc 50%, #0f172a 50%); border: 1px solid rgba(0, 0, 0, 0.15); } /* Sunset Orange */ .theme-swatch[data-theme="sunset-orange"] { background: linear-gradient(135deg, #f97316, #ef4444); } /* Forest Green */ .theme-swatch[data-theme="forest-green"] { background: linear-gradient(135deg, #059669, #10b981); } /* Purple Galaxy */ .theme-swatch[data-theme="purple-galaxy"] { background: linear-gradient(135deg, #7c3aed, #6366f1); } /* Rose Pink */ .theme-swatch[data-theme="rose-pink"] { background: linear-gradient(135deg, #ec4899, #f43f5e); } /* Arctic Ice */ .theme-swatch[data-theme="arctic-ice"] { background: linear-gradient(135deg, #0ea5e9, #38bdf8); } /* Midnight Dark */ .theme-swatch[data-theme="midnight-dark"] { background: linear-gradient(135deg, #0f172a, #3b82f6); } /* Cherry Red */ .theme-swatch[data-theme="cherry-red"] { background: linear-gradient(135deg, #dc2626, #b91c1c); } /* Golden Hour */ .theme-swatch[data-theme="golden-hour"] { background: linear-gradient(135deg, #eab308, #d97706); } /* Tropical Teal */ .theme-swatch[data-theme="tropical-teal"] { background: linear-gradient(135deg, #14b8a6, #fb923c); } /* ============================================ Theme Picker Container Layout helpers for the theme selection panel ============================================ */ .theme-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .theme-picker-label { font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; } /* ============================================ Theme 11: Lavender Dream Soft purple-blue, dreamy lavender ============================================ */ [data-theme="lavender-dream"] { --primary: 239 84% 67%; --primary-foreground: 240 100% 98%; --ring: 239 84% 67%; --accent: 240 70% 96%; --accent-foreground: 240 40% 18%; --muted: 240 25% 93%; --muted-foreground: 240 10% 44%; --border: 240 25% 88%; --input: 240 25% 88%; --background: 240 60% 98%; --foreground: 240 40% 10%; --card: 0 0% 100%; --card-foreground: 240 40% 10%; --secondary: 240 25% 95%; --secondary-foreground: 240 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 240 100% 98%; --chart-1: 239 84% 67%; --chart-2: 250 80% 60%; --chart-3: 270 70% 65%; --chart-4: 220 75% 60%; --chart-5: 260 65% 55%; --primary-gradient: linear-gradient(45deg, #818cf8, #a5b4fc, #c4b5fd); --weather-gradient: linear-gradient(to right, #818cf8, #a5b4fc, #c4b5fd); --text-gradient-from: #818cf8; --text-gradient-to: #c4b5fd; --theme-glow-1: rgba(129, 140, 248, 0.3); --theme-glow-2: rgba(196, 181, 253, 0.2); --hero-bg: linear-gradient(to bottom, #eef2ff, #f5f3ff); } .dark[data-theme="lavender-dream"], [data-theme="lavender-dream"].dark { --primary: 239 84% 75%; --primary-foreground: 240 40% 6%; --ring: 239 84% 75%; --background: 240 40% 5%; --foreground: 240 100% 97%; --card: 240 35% 9%; --card-foreground: 240 100% 97%; --secondary: 240 25% 14%; --secondary-foreground: 240 100% 97%; --muted: 240 25% 14%; --muted-foreground: 240 18% 60%; --accent: 240 25% 14%; --accent-foreground: 240 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 240 100% 97%; --border: 240 25% 18%; --input: 240 25% 18%; --primary-gradient: linear-gradient(45deg, #a5b4fc, #c4b5fd, #818cf8); --weather-gradient: linear-gradient(to right, #a5b4fc, #c4b5fd, #e0e7ff); --text-gradient-from: #a5b4fc; --text-gradient-to: #e0e7ff; --theme-glow-1: rgba(129, 140, 248, 0.15); --theme-glow-2: rgba(196, 181, 253, 0.1); --hero-bg: linear-gradient(to bottom, #0a0a1a, #1e1b4b); } /* ============================================ Theme 12: Ocean Depth Deep navy-teal, undersea feel ============================================ */ [data-theme="ocean-depth"] { --primary: 175 78% 26%; --primary-foreground: 175 80% 97%; --ring: 175 78% 26%; --accent: 175 60% 95%; --accent-foreground: 175 50% 14%; --muted: 175 20% 93%; --muted-foreground: 175 10% 42%; --border: 175 20% 87%; --input: 175 20% 87%; --background: 175 40% 98%; --foreground: 175 50% 8%; --card: 0 0% 100%; --card-foreground: 175 50% 8%; --secondary: 175 20% 95%; --secondary-foreground: 175 50% 8%; --destructive: 0 84% 60%; --destructive-foreground: 175 80% 97%; --chart-1: 175 78% 26%; --chart-2: 185 70% 35%; --chart-3: 195 65% 40%; --chart-4: 165 60% 30%; --chart-5: 200 55% 45%; --primary-gradient: linear-gradient(45deg, #0f766e, #134e4a, #14b8a6); --weather-gradient: linear-gradient(to right, #0f766e, #14b8a6, #2dd4bf); --text-gradient-from: #0f766e; --text-gradient-to: #134e4a; --theme-glow-1: rgba(15, 118, 110, 0.3); --theme-glow-2: rgba(19, 78, 74, 0.2); --hero-bg: linear-gradient(to bottom, #f0fdfa, #ecfdf5); } .dark[data-theme="ocean-depth"], [data-theme="ocean-depth"].dark { --primary: 175 78% 36%; --primary-foreground: 175 50% 6%; --ring: 175 78% 36%; --background: 175 45% 4%; --foreground: 175 80% 97%; --card: 175 40% 8%; --card-foreground: 175 80% 97%; --secondary: 175 28% 14%; --secondary-foreground: 175 80% 97%; --muted: 175 28% 14%; --muted-foreground: 175 18% 55%; --accent: 175 28% 14%; --accent-foreground: 175 80% 97%; --destructive: 0 63% 51%; --destructive-foreground: 175 80% 97%; --border: 175 28% 17%; --input: 175 28% 17%; --primary-gradient: linear-gradient(45deg, #14b8a6, #2dd4bf, #0f766e); --weather-gradient: linear-gradient(to right, #14b8a6, #2dd4bf, #5eead4); --text-gradient-from: #14b8a6; --text-gradient-to: #5eead4; --theme-glow-1: rgba(15, 118, 110, 0.18); --theme-glow-2: rgba(19, 78, 74, 0.12); --hero-bg: linear-gradient(to bottom, #021a17, #042f2e); } /* ============================================ Theme 13: Peach Blossom Warm peach-coral, soft and inviting ============================================ */ [data-theme="peach-blossom"] { --primary: 28 93% 61%; --primary-foreground: 28 100% 97%; --ring: 28 93% 61%; --accent: 30 80% 96%; --accent-foreground: 25 30% 18%; --muted: 30 25% 93%; --muted-foreground: 25 10% 44%; --border: 30 30% 88%; --input: 30 30% 88%; --background: 30 80% 98%; --foreground: 25 30% 12%; --card: 0 0% 100%; --card-foreground: 25 30% 12%; --secondary: 30 25% 95%; --secondary-foreground: 25 30% 12%; --destructive: 0 84% 60%; --destructive-foreground: 28 100% 97%; --chart-1: 28 93% 61%; --chart-2: 20 85% 55%; --chart-3: 35 80% 50%; --chart-4: 15 75% 58%; --chart-5: 40 70% 52%; --primary-gradient: linear-gradient(45deg, #fb923c, #fdba74, #fed7aa); --weather-gradient: linear-gradient(to right, #fb923c, #fdba74, #fed7aa); --text-gradient-from: #fb923c; --text-gradient-to: #fdba74; --theme-glow-1: rgba(251, 146, 60, 0.3); --theme-glow-2: rgba(253, 186, 116, 0.2); --hero-bg: linear-gradient(to bottom, #fff7ed, #fffbeb); } .dark[data-theme="peach-blossom"], [data-theme="peach-blossom"].dark { --primary: 28 93% 70%; --primary-foreground: 25 30% 6%; --ring: 28 93% 70%; --background: 25 30% 5%; --foreground: 28 100% 97%; --card: 25 25% 9%; --card-foreground: 28 100% 97%; --secondary: 25 20% 14%; --secondary-foreground: 28 100% 97%; --muted: 25 20% 14%; --muted-foreground: 28 15% 58%; --accent: 25 20% 14%; --accent-foreground: 28 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 28 100% 97%; --border: 25 20% 17%; --input: 25 20% 17%; --primary-gradient: linear-gradient(45deg, #fdba74, #fed7aa, #fb923c); --weather-gradient: linear-gradient(to right, #fdba74, #fed7aa, #ffedd5); --text-gradient-from: #fdba74; --text-gradient-to: #ffedd5; --theme-glow-1: rgba(251, 146, 60, 0.15); --theme-glow-2: rgba(253, 186, 116, 0.1); --hero-bg: linear-gradient(to bottom, #1c1006, #271a08); } /* ============================================ Theme 14: Mint Fresh Cool mint-green, refreshing feel ============================================ */ [data-theme="mint-fresh"] { --primary: 155 72% 51%; --primary-foreground: 155 80% 97%; --ring: 155 72% 51%; --accent: 155 60% 95%; --accent-foreground: 155 40% 16%; --muted: 155 22% 93%; --muted-foreground: 155 10% 42%; --border: 155 22% 87%; --input: 155 22% 87%; --background: 155 50% 98%; --foreground: 155 40% 10%; --card: 0 0% 100%; --card-foreground: 155 40% 10%; --secondary: 155 22% 95%; --secondary-foreground: 155 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 155 80% 97%; --chart-1: 155 72% 51%; --chart-2: 165 65% 45%; --chart-3: 140 60% 50%; --chart-4: 175 55% 48%; --chart-5: 130 50% 55%; --primary-gradient: linear-gradient(45deg, #34d399, #6ee7b7, #a7f3d0); --weather-gradient: linear-gradient(to right, #34d399, #6ee7b7, #a7f3d0); --text-gradient-from: #34d399; --text-gradient-to: #6ee7b7; --theme-glow-1: rgba(52, 211, 153, 0.3); --theme-glow-2: rgba(110, 231, 183, 0.2); --hero-bg: linear-gradient(to bottom, #ecfdf5, #f0fdf4); } .dark[data-theme="mint-fresh"], [data-theme="mint-fresh"].dark { --primary: 155 72% 60%; --primary-foreground: 155 40% 6%; --ring: 155 72% 60%; --background: 155 35% 5%; --foreground: 155 80% 97%; --card: 155 30% 8%; --card-foreground: 155 80% 97%; --secondary: 155 22% 14%; --secondary-foreground: 155 80% 97%; --muted: 155 22% 14%; --muted-foreground: 155 15% 58%; --accent: 155 22% 14%; --accent-foreground: 155 80% 97%; --destructive: 0 63% 51%; --destructive-foreground: 155 80% 97%; --border: 155 22% 17%; --input: 155 22% 17%; --primary-gradient: linear-gradient(45deg, #6ee7b7, #a7f3d0, #34d399); --weather-gradient: linear-gradient(to right, #6ee7b7, #a7f3d0, #d1fae5); --text-gradient-from: #6ee7b7; --text-gradient-to: #d1fae5; --theme-glow-1: rgba(52, 211, 153, 0.15); --theme-glow-2: rgba(110, 231, 183, 0.1); --hero-bg: linear-gradient(to bottom, #022c22, #052e16); } /* ============================================ Theme 15: Slate Modern Neutral gray-blue, professional and clean ============================================ */ [data-theme="slate-modern"] { --primary: 215 25% 37%; --primary-foreground: 215 30% 97%; --ring: 215 25% 37%; --accent: 215 20% 95%; --accent-foreground: 215 20% 16%; --muted: 215 15% 93%; --muted-foreground: 215 10% 44%; --border: 215 15% 87%; --input: 215 15% 87%; --background: 215 20% 98%; --foreground: 215 25% 10%; --card: 0 0% 100%; --card-foreground: 215 25% 10%; --secondary: 215 15% 95%; --secondary-foreground: 215 25% 10%; --destructive: 0 84% 60%; --destructive-foreground: 215 30% 97%; --chart-1: 215 25% 37%; --chart-2: 220 30% 50%; --chart-3: 210 20% 55%; --chart-4: 225 25% 45%; --chart-5: 200 20% 48%; --primary-gradient: linear-gradient(45deg, #475569, #64748b, #94a3b8); --weather-gradient: linear-gradient(to right, #475569, #64748b, #94a3b8); --text-gradient-from: #475569; --text-gradient-to: #64748b; --theme-glow-1: rgba(71, 85, 105, 0.3); --theme-glow-2: rgba(100, 116, 139, 0.2); --hero-bg: linear-gradient(to bottom, #f8fafc, #f1f5f9); } .dark[data-theme="slate-modern"], [data-theme="slate-modern"].dark { --primary: 215 25% 48%; --primary-foreground: 215 25% 6%; --ring: 215 25% 48%; --background: 215 25% 5%; --foreground: 215 30% 97%; --card: 215 22% 9%; --card-foreground: 215 30% 97%; --secondary: 215 18% 15%; --secondary-foreground: 215 30% 97%; --muted: 215 18% 15%; --muted-foreground: 215 15% 58%; --accent: 215 18% 15%; --accent-foreground: 215 30% 97%; --destructive: 0 63% 51%; --destructive-foreground: 215 30% 97%; --border: 215 18% 18%; --input: 215 18% 18%; --primary-gradient: linear-gradient(45deg, #64748b, #94a3b8, #475569); --weather-gradient: linear-gradient(to right, #64748b, #94a3b8, #cbd5e1); --text-gradient-from: #94a3b8; --text-gradient-to: #cbd5e1; --theme-glow-1: rgba(71, 85, 105, 0.15); --theme-glow-2: rgba(100, 116, 139, 0.1); --hero-bg: linear-gradient(to bottom, #0c1017, #1e293b); } /* ============================================ Theme 16: Coral Reef Warm coral-salmon, vibrant reef tones ============================================ */ [data-theme="coral-reef"] { --primary: 348 83% 60%; --primary-foreground: 348 100% 98%; --ring: 348 83% 60%; --accent: 350 70% 96%; --accent-foreground: 348 40% 16%; --muted: 350 25% 93%; --muted-foreground: 348 10% 44%; --border: 350 25% 88%; --input: 350 25% 88%; --background: 350 60% 98%; --foreground: 348 35% 10%; --card: 0 0% 100%; --card-foreground: 348 35% 10%; --secondary: 350 25% 95%; --secondary-foreground: 348 35% 10%; --destructive: 0 84% 60%; --destructive-foreground: 348 100% 98%; --chart-1: 348 83% 60%; --chart-2: 340 75% 55%; --chart-3: 355 70% 50%; --chart-4: 10 80% 58%; --chart-5: 330 65% 52%; --primary-gradient: linear-gradient(45deg, #f43f5e, #fb7185, #fda4af); --weather-gradient: linear-gradient(to right, #f43f5e, #fb7185, #fda4af); --text-gradient-from: #f43f5e; --text-gradient-to: #fb7185; --theme-glow-1: rgba(244, 63, 94, 0.3); --theme-glow-2: rgba(251, 113, 133, 0.2); --hero-bg: linear-gradient(to bottom, #fff1f2, #fef2f2); } .dark[data-theme="coral-reef"], [data-theme="coral-reef"].dark { --primary: 348 83% 68%; --primary-foreground: 348 35% 6%; --ring: 348 83% 68%; --background: 348 30% 5%; --foreground: 348 100% 97%; --card: 348 25% 9%; --card-foreground: 348 100% 97%; --secondary: 348 20% 14%; --secondary-foreground: 348 100% 97%; --muted: 348 20% 14%; --muted-foreground: 348 15% 58%; --accent: 348 20% 14%; --accent-foreground: 348 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 348 100% 97%; --border: 348 20% 17%; --input: 348 20% 17%; --primary-gradient: linear-gradient(45deg, #fb7185, #fda4af, #f43f5e); --weather-gradient: linear-gradient(to right, #fb7185, #fda4af, #fecdd3); --text-gradient-from: #fb7185; --text-gradient-to: #fecdd3; --theme-glow-1: rgba(244, 63, 94, 0.15); --theme-glow-2: rgba(251, 113, 133, 0.1); --hero-bg: linear-gradient(to bottom, #1a0508, #2a0a10); } /* ============================================ Theme 17: Indigo Night Deep indigo-violet, nocturnal elegance ============================================ */ [data-theme="indigo-night"] { --primary: 239 84% 58%; --primary-foreground: 239 100% 98%; --ring: 239 84% 58%; --accent: 239 70% 96%; --accent-foreground: 239 45% 18%; --muted: 239 25% 93%; --muted-foreground: 239 10% 44%; --border: 239 25% 88%; --input: 239 25% 88%; --background: 239 55% 98%; --foreground: 239 45% 10%; --card: 0 0% 100%; --card-foreground: 239 45% 10%; --secondary: 239 25% 95%; --secondary-foreground: 239 45% 10%; --destructive: 0 84% 60%; --destructive-foreground: 239 100% 98%; --chart-1: 239 84% 58%; --chart-2: 245 80% 65%; --chart-3: 260 75% 60%; --chart-4: 230 70% 55%; --chart-5: 250 65% 50%; --primary-gradient: linear-gradient(45deg, #4f46e5, #6366f1, #818cf8); --weather-gradient: linear-gradient(to right, #4f46e5, #6366f1, #818cf8); --text-gradient-from: #4f46e5; --text-gradient-to: #6366f1; --theme-glow-1: rgba(79, 70, 229, 0.3); --theme-glow-2: rgba(99, 102, 241, 0.2); --hero-bg: linear-gradient(to bottom, #eef2ff, #e0e7ff); } .dark[data-theme="indigo-night"], [data-theme="indigo-night"].dark { --primary: 239 84% 68%; --primary-foreground: 239 45% 6%; --ring: 239 84% 68%; --background: 239 45% 4%; --foreground: 239 100% 97%; --card: 239 40% 8%; --card-foreground: 239 100% 97%; --secondary: 239 28% 14%; --secondary-foreground: 239 100% 97%; --muted: 239 28% 14%; --muted-foreground: 239 18% 60%; --accent: 239 28% 14%; --accent-foreground: 239 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 239 100% 97%; --border: 239 28% 18%; --input: 239 28% 18%; --primary-gradient: linear-gradient(45deg, #818cf8, #a5b4fc, #6366f1); --weather-gradient: linear-gradient(to right, #818cf8, #a5b4fc, #c7d2fe); --text-gradient-from: #818cf8; --text-gradient-to: #c7d2fe; --theme-glow-1: rgba(79, 70, 229, 0.18); --theme-glow-2: rgba(99, 102, 241, 0.12); --hero-bg: linear-gradient(to bottom, #080816, #1e1b4b); } /* ============================================ Theme 18: Autumn Ember Burnt orange-brown, warm fall tones ============================================ */ [data-theme="autumn-ember"] { --primary: 18 89% 40%; --primary-foreground: 20 100% 97%; --ring: 18 89% 40%; --accent: 20 70% 95%; --accent-foreground: 18 40% 16%; --muted: 20 25% 93%; --muted-foreground: 18 10% 42%; --border: 20 25% 87%; --input: 20 25% 87%; --background: 20 60% 98%; --foreground: 18 40% 10%; --card: 0 0% 100%; --card-foreground: 18 40% 10%; --secondary: 20 25% 95%; --secondary-foreground: 18 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 20 100% 97%; --chart-1: 18 89% 40%; --chart-2: 25 85% 48%; --chart-3: 10 80% 45%; --chart-4: 35 75% 42%; --chart-5: 5 70% 50%; --primary-gradient: linear-gradient(45deg, #c2410c, #ea580c, #f97316); --weather-gradient: linear-gradient(to right, #c2410c, #ea580c, #f97316); --text-gradient-from: #c2410c; --text-gradient-to: #ea580c; --theme-glow-1: rgba(194, 65, 12, 0.3); --theme-glow-2: rgba(234, 88, 12, 0.2); --hero-bg: linear-gradient(to bottom, #fff7ed, #fef3c7); } .dark[data-theme="autumn-ember"], [data-theme="autumn-ember"].dark { --primary: 18 89% 50%; --primary-foreground: 18 40% 6%; --ring: 18 89% 50%; --background: 18 35% 5%; --foreground: 20 100% 97%; --card: 18 30% 8%; --card-foreground: 20 100% 97%; --secondary: 18 22% 14%; --secondary-foreground: 20 100% 97%; --muted: 18 22% 14%; --muted-foreground: 18 15% 55%; --accent: 18 22% 14%; --accent-foreground: 20 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 20 100% 97%; --border: 18 22% 17%; --input: 18 22% 17%; --primary-gradient: linear-gradient(45deg, #ea580c, #f97316, #c2410c); --weather-gradient: linear-gradient(to right, #ea580c, #f97316, #fb923c); --text-gradient-from: #f97316; --text-gradient-to: #fb923c; --theme-glow-1: rgba(194, 65, 12, 0.15); --theme-glow-2: rgba(234, 88, 12, 0.1); --hero-bg: linear-gradient(to bottom, #1a0e04, #271806); } /* ============================================ Theme 19: Sky Breeze Light sky-cyan, airy and bright ============================================ */ [data-theme="sky-breeze"] { --primary: 187 86% 43%; --primary-foreground: 187 100% 97%; --ring: 187 86% 43%; --accent: 187 65% 95%; --accent-foreground: 187 40% 16%; --muted: 187 22% 93%; --muted-foreground: 187 10% 42%; --border: 187 22% 87%; --input: 187 22% 87%; --background: 187 55% 98%; --foreground: 187 40% 10%; --card: 0 0% 100%; --card-foreground: 187 40% 10%; --secondary: 187 22% 95%; --secondary-foreground: 187 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 187 100% 97%; --chart-1: 187 86% 43%; --chart-2: 195 80% 50%; --chart-3: 180 70% 45%; --chart-4: 200 75% 48%; --chart-5: 170 65% 42%; --primary-gradient: linear-gradient(45deg, #06b6d4, #22d3ee, #67e8f9); --weather-gradient: linear-gradient(to right, #06b6d4, #22d3ee, #67e8f9); --text-gradient-from: #06b6d4; --text-gradient-to: #22d3ee; --theme-glow-1: rgba(6, 182, 212, 0.3); --theme-glow-2: rgba(34, 211, 238, 0.2); --hero-bg: linear-gradient(to bottom, #ecfeff, #f0f9ff); } .dark[data-theme="sky-breeze"], [data-theme="sky-breeze"].dark { --primary: 187 86% 53%; --primary-foreground: 187 40% 6%; --ring: 187 86% 53%; --background: 187 35% 5%; --foreground: 187 100% 97%; --card: 187 30% 8%; --card-foreground: 187 100% 97%; --secondary: 187 22% 14%; --secondary-foreground: 187 100% 97%; --muted: 187 22% 14%; --muted-foreground: 187 15% 58%; --accent: 187 22% 14%; --accent-foreground: 187 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 187 100% 97%; --border: 187 22% 17%; --input: 187 22% 17%; --primary-gradient: linear-gradient(45deg, #22d3ee, #67e8f9, #06b6d4); --weather-gradient: linear-gradient(to right, #22d3ee, #67e8f9, #a5f3fc); --text-gradient-from: #22d3ee; --text-gradient-to: #a5f3fc; --theme-glow-1: rgba(6, 182, 212, 0.15); --theme-glow-2: rgba(34, 211, 238, 0.1); --hero-bg: linear-gradient(to bottom, #021c1f, #083344); } /* ============================================ Theme 20: Berry Wine Deep berry-plum, rich and luxurious ============================================ */ [data-theme="berry-wine"] { --primary: 271 81% 56%; --primary-foreground: 271 100% 98%; --ring: 271 81% 56%; --accent: 271 65% 96%; --accent-foreground: 271 45% 18%; --muted: 271 25% 93%; --muted-foreground: 271 10% 44%; --border: 271 25% 88%; --input: 271 25% 88%; --background: 271 55% 98%; --foreground: 271 45% 10%; --card: 0 0% 100%; --card-foreground: 271 45% 10%; --secondary: 271 25% 95%; --secondary-foreground: 271 45% 10%; --destructive: 0 84% 60%; --destructive-foreground: 271 100% 98%; --chart-1: 271 81% 56%; --chart-2: 280 75% 62%; --chart-3: 260 70% 50%; --chart-4: 290 65% 55%; --chart-5: 250 60% 58%; --primary-gradient: linear-gradient(45deg, #9333ea, #a855f7, #c084fc); --weather-gradient: linear-gradient(to right, #9333ea, #a855f7, #c084fc); --text-gradient-from: #9333ea; --text-gradient-to: #a855f7; --theme-glow-1: rgba(147, 51, 234, 0.3); --theme-glow-2: rgba(168, 85, 247, 0.2); --hero-bg: linear-gradient(to bottom, #faf5ff, #f5f3ff); } .dark[data-theme="berry-wine"], [data-theme="berry-wine"].dark { --primary: 271 81% 66%; --primary-foreground: 271 45% 6%; --ring: 271 81% 66%; --background: 271 40% 4%; --foreground: 271 100% 97%; --card: 271 35% 8%; --card-foreground: 271 100% 97%; --secondary: 271 25% 14%; --secondary-foreground: 271 100% 97%; --muted: 271 25% 14%; --muted-foreground: 271 18% 60%; --accent: 271 25% 14%; --accent-foreground: 271 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 271 100% 97%; --border: 271 25% 17%; --input: 271 25% 17%; --primary-gradient: linear-gradient(45deg, #a855f7, #c084fc, #9333ea); --weather-gradient: linear-gradient(to right, #a855f7, #c084fc, #d8b4fe); --text-gradient-from: #a855f7; --text-gradient-to: #d8b4fe; --theme-glow-1: rgba(147, 51, 234, 0.18); --theme-glow-2: rgba(168, 85, 247, 0.12); --hero-bg: linear-gradient(to bottom, #0e0015, #2e1065); } /* ============================================ Theme 21: Sage Garden Muted sage-olive, earthy and natural ============================================ */ [data-theme="sage-garden"] { --primary: 85 80% 35%; --primary-foreground: 85 80% 97%; --ring: 85 80% 35%; --accent: 85 50% 95%; --accent-foreground: 85 35% 16%; --muted: 85 18% 93%; --muted-foreground: 85 10% 42%; --border: 85 18% 87%; --input: 85 18% 87%; --background: 85 40% 98%; --foreground: 85 35% 10%; --card: 0 0% 100%; --card-foreground: 85 35% 10%; --secondary: 85 18% 95%; --secondary-foreground: 85 35% 10%; --destructive: 0 84% 60%; --destructive-foreground: 85 80% 97%; --chart-1: 85 80% 35%; --chart-2: 90 70% 42%; --chart-3: 75 65% 40%; --chart-4: 100 55% 38%; --chart-5: 70 50% 45%; --primary-gradient: linear-gradient(45deg, #65a30d, #84cc16, #a3e635); --weather-gradient: linear-gradient(to right, #65a30d, #84cc16, #a3e635); --text-gradient-from: #65a30d; --text-gradient-to: #84cc16; --theme-glow-1: rgba(101, 163, 13, 0.3); --theme-glow-2: rgba(132, 204, 22, 0.2); --hero-bg: linear-gradient(to bottom, #f7fee7, #ecfccb); } .dark[data-theme="sage-garden"], [data-theme="sage-garden"].dark { --primary: 85 80% 45%; --primary-foreground: 85 35% 6%; --ring: 85 80% 45%; --background: 85 30% 5%; --foreground: 85 80% 97%; --card: 85 25% 8%; --card-foreground: 85 80% 97%; --secondary: 85 18% 14%; --secondary-foreground: 85 80% 97%; --muted: 85 18% 14%; --muted-foreground: 85 12% 55%; --accent: 85 18% 14%; --accent-foreground: 85 80% 97%; --destructive: 0 63% 51%; --destructive-foreground: 85 80% 97%; --border: 85 18% 16%; --input: 85 18% 16%; --primary-gradient: linear-gradient(45deg, #84cc16, #a3e635, #65a30d); --weather-gradient: linear-gradient(to right, #84cc16, #a3e635, #bef264); --text-gradient-from: #84cc16; --text-gradient-to: #bef264; --theme-glow-1: rgba(101, 163, 13, 0.15); --theme-glow-2: rgba(132, 204, 22, 0.1); --hero-bg: linear-gradient(to bottom, #0a1504, #1a2e05); } /* ============================================ Theme 22: Storm Cloud Dark gray with electric accents ============================================ */ [data-theme="storm-cloud"] { --primary: 220 13% 26%; --primary-foreground: 220 30% 97%; --ring: 220 13% 26%; --accent: 220 15% 94%; --accent-foreground: 220 20% 16%; --muted: 220 10% 92%; --muted-foreground: 220 8% 44%; --border: 220 10% 86%; --input: 220 10% 86%; --background: 220 15% 97%; --foreground: 220 20% 10%; --card: 0 0% 100%; --card-foreground: 220 20% 10%; --secondary: 220 10% 94%; --secondary-foreground: 220 20% 10%; --destructive: 0 84% 60%; --destructive-foreground: 220 30% 97%; --chart-1: 220 13% 26%; --chart-2: 239 84% 67%; --chart-3: 230 30% 45%; --chart-4: 210 25% 40%; --chart-5: 250 60% 55%; --primary-gradient: linear-gradient(45deg, #374151, #6366f1, #4b5563); --weather-gradient: linear-gradient(to right, #374151, #6366f1, #818cf8); --text-gradient-from: #374151; --text-gradient-to: #6366f1; --theme-glow-1: rgba(55, 65, 81, 0.3); --theme-glow-2: rgba(99, 102, 241, 0.2); --hero-bg: linear-gradient(to bottom, #f3f4f6, #e5e7eb); } .dark[data-theme="storm-cloud"], [data-theme="storm-cloud"].dark { --primary: 220 13% 36%; --primary-foreground: 220 20% 6%; --ring: 239 84% 67%; --background: 220 15% 5%; --foreground: 220 30% 97%; --card: 220 12% 9%; --card-foreground: 220 30% 97%; --secondary: 220 10% 15%; --secondary-foreground: 220 30% 97%; --muted: 220 10% 15%; --muted-foreground: 220 8% 56%; --accent: 220 10% 15%; --accent-foreground: 220 30% 97%; --destructive: 0 63% 51%; --destructive-foreground: 220 30% 97%; --border: 220 10% 18%; --input: 220 10% 18%; --primary-gradient: linear-gradient(45deg, #6366f1, #818cf8, #4b5563); --weather-gradient: linear-gradient(to right, #6366f1, #818cf8, #a5b4fc); --text-gradient-from: #818cf8; --text-gradient-to: #a5b4fc; --theme-glow-1: rgba(99, 102, 241, 0.18); --theme-glow-2: rgba(55, 65, 81, 0.12); --hero-bg: linear-gradient(to bottom, #0a0c12, #111827); } /* ============================================ Theme 23: Desert Sand Warm sand-terracotta, earthy warmth ============================================ */ [data-theme="desert-sand"] { --primary: 38 92% 44%; --primary-foreground: 38 100% 97%; --ring: 38 92% 44%; --accent: 38 70% 95%; --accent-foreground: 38 40% 16%; --muted: 38 22% 93%; --muted-foreground: 38 10% 42%; --border: 38 22% 87%; --input: 38 22% 87%; --background: 38 60% 98%; --foreground: 38 40% 10%; --card: 0 0% 100%; --card-foreground: 38 40% 10%; --secondary: 38 22% 95%; --secondary-foreground: 38 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 38 100% 97%; --chart-1: 38 92% 44%; --chart-2: 30 85% 50%; --chart-3: 45 80% 42%; --chart-4: 25 75% 48%; --chart-5: 50 70% 40%; --primary-gradient: linear-gradient(45deg, #d97706, #b45309, #a16207); --weather-gradient: linear-gradient(to right, #d97706, #f59e0b, #fbbf24); --text-gradient-from: #d97706; --text-gradient-to: #a16207; --theme-glow-1: rgba(217, 119, 6, 0.3); --theme-glow-2: rgba(161, 98, 7, 0.2); --hero-bg: linear-gradient(to bottom, #fffbeb, #fef3c7); } .dark[data-theme="desert-sand"], [data-theme="desert-sand"].dark { --primary: 38 92% 54%; --primary-foreground: 38 40% 6%; --ring: 38 92% 54%; --background: 38 30% 5%; --foreground: 38 100% 97%; --card: 38 25% 8%; --card-foreground: 38 100% 97%; --secondary: 38 18% 14%; --secondary-foreground: 38 100% 97%; --muted: 38 18% 14%; --muted-foreground: 38 12% 55%; --accent: 38 18% 14%; --accent-foreground: 38 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 38 100% 97%; --border: 38 18% 16%; --input: 38 18% 16%; --primary-gradient: linear-gradient(45deg, #f59e0b, #fbbf24, #d97706); --weather-gradient: linear-gradient(to right, #f59e0b, #fbbf24, #fde68a); --text-gradient-from: #f59e0b; --text-gradient-to: #fde68a; --theme-glow-1: rgba(217, 119, 6, 0.15); --theme-glow-2: rgba(161, 98, 7, 0.1); --hero-bg: linear-gradient(to bottom, #1a1204, #261c08); } /* ============================================ Theme 24: Neon Cyber Electric neon-cyberpunk, futuristic glow ============================================ */ [data-theme="neon-cyber"] { --primary: 290 84% 58%; --primary-foreground: 290 100% 98%; --ring: 290 84% 58%; --accent: 290 65% 96%; --accent-foreground: 290 40% 18%; --muted: 290 22% 93%; --muted-foreground: 290 10% 44%; --border: 290 22% 88%; --input: 290 22% 88%; --background: 290 50% 98%; --foreground: 290 40% 10%; --card: 0 0% 100%; --card-foreground: 290 40% 10%; --secondary: 290 22% 95%; --secondary-foreground: 290 40% 10%; --destructive: 0 84% 60%; --destructive-foreground: 290 100% 98%; --chart-1: 290 84% 58%; --chart-2: 187 86% 43%; --chart-3: 310 75% 55%; --chart-4: 200 80% 50%; --chart-5: 270 70% 60%; --primary-gradient: linear-gradient(45deg, #06b6d4, #d946ef, #f0abfc); --weather-gradient: linear-gradient(to right, #06b6d4, #d946ef, #f0abfc); --text-gradient-from: #06b6d4; --text-gradient-to: #d946ef; --theme-glow-1: rgba(217, 70, 239, 0.3); --theme-glow-2: rgba(6, 182, 212, 0.2); --hero-bg: linear-gradient(to bottom, #fdf4ff, #ecfeff); } .dark[data-theme="neon-cyber"], [data-theme="neon-cyber"].dark { --primary: 290 84% 66%; --primary-foreground: 290 40% 6%; --ring: 290 84% 66%; --background: 290 35% 4%; --foreground: 290 100% 97%; --card: 290 30% 8%; --card-foreground: 290 100% 97%; --secondary: 290 22% 14%; --secondary-foreground: 290 100% 97%; --muted: 290 22% 14%; --muted-foreground: 290 15% 58%; --accent: 290 22% 14%; --accent-foreground: 290 100% 97%; --destructive: 0 63% 51%; --destructive-foreground: 290 100% 97%; --border: 290 22% 17%; --input: 290 22% 17%; --primary-gradient: linear-gradient(45deg, #22d3ee, #e879f9, #d946ef); --weather-gradient: linear-gradient(to right, #22d3ee, #e879f9, #f0abfc); --text-gradient-from: #e879f9; --text-gradient-to: #22d3ee; --theme-glow-1: rgba(217, 70, 239, 0.18); --theme-glow-2: rgba(6, 182, 212, 0.15); --hero-bg: linear-gradient(to bottom, #0e0012, #164e63); } /* ============================================ Theme 25: Monochrome Pure black/white, minimal and clean ============================================ */ [data-theme="monochrome"] { --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --ring: 0 0% 9%; --accent: 0 0% 95%; --accent-foreground: 0 0% 15%; --muted: 0 0% 93%; --muted-foreground: 0 0% 44%; --border: 0 0% 87%; --input: 0 0% 87%; --background: 0 0% 98%; --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --secondary: 0 0% 95%; --secondary-foreground: 0 0% 9%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --chart-1: 0 0% 9%; --chart-2: 0 0% 25%; --chart-3: 0 0% 40%; --chart-4: 0 0% 55%; --chart-5: 0 0% 70%; --primary-gradient: linear-gradient(45deg, #171717, #404040, #525252); --weather-gradient: linear-gradient(to right, #171717, #525252, #737373); --text-gradient-from: #171717; --text-gradient-to: #525252; --theme-glow-1: rgba(23, 23, 23, 0.2); --theme-glow-2: rgba(82, 82, 82, 0.15); --hero-bg: linear-gradient(to bottom, #fafafa, #f5f5f5); } .dark[data-theme="monochrome"], [data-theme="monochrome"].dark { --primary: 0 0% 82%; --primary-foreground: 0 0% 6%; --ring: 0 0% 82%; --background: 0 0% 5%; --foreground: 0 0% 97%; --card: 0 0% 9%; --card-foreground: 0 0% 97%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 97%; --muted: 0 0% 15%; --muted-foreground: 0 0% 58%; --accent: 0 0% 15%; --accent-foreground: 0 0% 97%; --destructive: 0 63% 51%; --destructive-foreground: 0 0% 97%; --border: 0 0% 18%; --input: 0 0% 18%; --primary-gradient: linear-gradient(45deg, #a3a3a3, #d4d4d4, #737373); --weather-gradient: linear-gradient(to right, #a3a3a3, #d4d4d4, #e5e5e5); --text-gradient-from: #d4d4d4; --text-gradient-to: #e5e5e5; --theme-glow-1: rgba(163, 163, 163, 0.12); --theme-glow-2: rgba(82, 82, 82, 0.08); --hero-bg: linear-gradient(to bottom, #0a0a0a, #171717); } /* ============================================ Theme Swatches for New Themes (11-25) ============================================ */ /* Lavender Dream */ .theme-swatch[data-theme="lavender-dream"] { background: linear-gradient(135deg, #818cf8, #c4b5fd); } /* Ocean Depth */ .theme-swatch[data-theme="ocean-depth"] { background: linear-gradient(135deg, #0f766e, #134e4a); } /* Peach Blossom */ .theme-swatch[data-theme="peach-blossom"] { background: linear-gradient(135deg, #fb923c, #fdba74); } /* Mint Fresh */ .theme-swatch[data-theme="mint-fresh"] { background: linear-gradient(135deg, #34d399, #6ee7b7); } /* Slate Modern */ .theme-swatch[data-theme="slate-modern"] { background: linear-gradient(135deg, #475569, #64748b); } /* Coral Reef */ .theme-swatch[data-theme="coral-reef"] { background: linear-gradient(135deg, #f43f5e, #fb7185); } /* Indigo Night */ .theme-swatch[data-theme="indigo-night"] { background: linear-gradient(135deg, #4f46e5, #6366f1); } /* Autumn Ember */ .theme-swatch[data-theme="autumn-ember"] { background: linear-gradient(135deg, #c2410c, #ea580c); } /* Sky Breeze */ .theme-swatch[data-theme="sky-breeze"] { background: linear-gradient(135deg, #06b6d4, #22d3ee); } /* Berry Wine */ .theme-swatch[data-theme="berry-wine"] { background: linear-gradient(135deg, #9333ea, #a855f7); } /* Sage Garden */ .theme-swatch[data-theme="sage-garden"] { background: linear-gradient(135deg, #65a30d, #84cc16); } /* Storm Cloud */ .theme-swatch[data-theme="storm-cloud"] { background: linear-gradient(135deg, #374151, #6366f1); } /* Desert Sand */ .theme-swatch[data-theme="desert-sand"] { background: linear-gradient(135deg, #d97706, #a16207); } /* Neon Cyber */ .theme-swatch[data-theme="neon-cyber"] { background: linear-gradient(135deg, #06b6d4, #d946ef); } /* Monochrome */ .theme-swatch[data-theme="monochrome"] { background: linear-gradient(135deg, #171717, #525252); }