/* Curated theme palettes (5.13). Ocean is the default and lives in theme.css :root; the nine themes below are selected by a `data-theme-id` attribute on , layered over the light/dark `data-theme` attribute. The active look is the combination of both: :root[data-theme-id="X"] → that theme, light variant :root[data-theme-id="X"][data-theme="dark"] → that theme, dark variant Each block overrides ONLY the colour custom properties. Spacing/radius/typography and the semantic success/warning/danger + shadow vars deliberately fall through to theme.css (its :root for light, its :root[data-theme="dark"] for dark) so semantic colours stay consistent across every theme. Because the light block (specificity 0,2,0) and theme.css's dark block (0,2,0) can both match in dark mode, every colour each theme sets in its light block is also set in its dark block — no partial-inheritance leakage. Sidebar/active and primary buttons render white text, so primaries and active backgrounds are chosen deep enough to stay legible (mirrors Ocean's convention). */ /* ===================== Forest — green, earthy and calm ===================== */ :root[data-theme-id="forest"] { --color-primary: #15803d; --color-primary-hover: #166534; --color-secondary: #0d9488; --color-accent: #65a30d; --color-bg-primary: #ffffff; --color-bg-secondary: #f1f6f2; --color-text-primary: #14271c; --color-text-secondary: #4b5d52; --color-border: #dbe7dd; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #14271c; --color-sidebar-text: #4b5d52; --color-sidebar-hover: #eef4ef; --color-sidebar-active: #15803d; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #dbe7dd; } :root[data-theme-id="forest"][data-theme="dark"] { --color-primary: #16a34a; --color-primary-hover: #22c55e; --color-secondary: #2dd4bf; --color-accent: #a3e635; --color-bg-primary: #0c1a12; --color-bg-secondary: #15271c; --color-text-primary: #e8f3ea; --color-text-secondary: #9bb6a4; --color-border: #284035; --color-sidebar-bg: #06120b; --color-sidebar-heading: #ffffff; --color-sidebar-text: #b9d0bf; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #15803d; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Sunset — warm orange, energetic ===================== */ :root[data-theme-id="sunset"] { --color-primary: #c2410c; --color-primary-hover: #9a3412; --color-secondary: #f59e0b; --color-accent: #fb7185; --color-bg-primary: #ffffff; --color-bg-secondary: #fff5ef; --color-text-primary: #2b1505; --color-text-secondary: #7c5a45; --color-border: #f1ddca; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #2b1505; --color-sidebar-text: #7c5a45; --color-sidebar-hover: #fdeee3; --color-sidebar-active: #c2410c; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #f1ddca; } :root[data-theme-id="sunset"][data-theme="dark"] { --color-primary: #ea580c; --color-primary-hover: #f97316; --color-secondary: #fbbf24; --color-accent: #fb7185; --color-bg-primary: #1f1108; --color-bg-secondary: #2c1a0f; --color-text-primary: #fbeee3; --color-text-secondary: #c2a288; --color-border: #43291a; --color-sidebar-bg: #160b04; --color-sidebar-heading: #ffffff; --color-sidebar-text: #e0c4ad; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #c2410c; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Slate — neutral grey, minimal and modern ===================== */ :root[data-theme-id="slate"] { --color-primary: #475569; --color-primary-hover: #334155; --color-secondary: #0ea5e9; --color-accent: #64748b; --color-bg-primary: #ffffff; --color-bg-secondary: #f1f5f9; --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-border: #e2e8f0; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #0f172a; --color-sidebar-text: #475569; --color-sidebar-hover: #f1f5f9; --color-sidebar-active: #475569; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #e2e8f0; } :root[data-theme-id="slate"][data-theme="dark"] { --color-primary: #94a3b8; --color-primary-hover: #cbd5e1; --color-secondary: #38bdf8; --color-accent: #64748b; --color-bg-primary: #0f1623; --color-bg-secondary: #1c2536; --color-text-primary: #eef2f7; --color-text-secondary: #97a4b8; --color-border: #2e3a4e; --color-sidebar-bg: #0a0f1a; --color-sidebar-heading: #ffffff; --color-sidebar-text: #c0cad8; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #475569; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Berry — purple/magenta, creative and bold ===================== */ :root[data-theme-id="berry"] { --color-primary: #a21caf; --color-primary-hover: #86198f; --color-secondary: #d946ef; --color-accent: #8b5cf6; --color-bg-primary: #ffffff; --color-bg-secondary: #fbf2fb; --color-text-primary: #2a0f2e; --color-text-secondary: #6b4a6f; --color-border: #ecd9ee; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #2a0f2e; --color-sidebar-text: #6b4a6f; --color-sidebar-hover: #f7e9f8; --color-sidebar-active: #a21caf; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #ecd9ee; } :root[data-theme-id="berry"][data-theme="dark"] { --color-primary: #c026d3; --color-primary-hover: #d946ef; --color-secondary: #e879f9; --color-accent: #a78bfa; --color-bg-primary: #1c0d20; --color-bg-secondary: #2a1530; --color-text-primary: #f6e9f7; --color-text-secondary: #c29bc8; --color-border: #422348; --color-sidebar-bg: #150a18; --color-sidebar-heading: #ffffff; --color-sidebar-text: #d6b8db; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #a21caf; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Rose — soft pink, elegant ===================== */ :root[data-theme-id="rose"] { --color-primary: #be123c; --color-primary-hover: #9f1239; --color-secondary: #fb7185; --color-accent: #f43f5e; --color-bg-primary: #ffffff; --color-bg-secondary: #fff1f3; --color-text-primary: #2c0b13; --color-text-secondary: #7a4a54; --color-border: #f6d9df; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #2c0b13; --color-sidebar-text: #7a4a54; --color-sidebar-hover: #fde7eb; --color-sidebar-active: #be123c; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #f6d9df; } :root[data-theme-id="rose"][data-theme="dark"] { --color-primary: #e11d48; --color-primary-hover: #f43f5e; --color-secondary: #fb7185; --color-accent: #fda4af; --color-bg-primary: #210a10; --color-bg-secondary: #2f1219; --color-text-primary: #fbe9ec; --color-text-secondary: #cf9aa3; --color-border: #46222b; --color-sidebar-bg: #19070c; --color-sidebar-heading: #ffffff; --color-sidebar-text: #e0b6bd; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #be123c; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Midnight — deep navy, sophisticated ===================== */ :root[data-theme-id="midnight"] { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-secondary: #6366f1; --color-accent: #38bdf8; --color-bg-primary: #ffffff; --color-bg-secondary: #eef0fb; --color-text-primary: #1a1830; --color-text-secondary: #4c4a6a; --color-border: #dcdcf2; --color-sidebar-bg: #1e1b4b; --color-sidebar-heading: #ffffff; --color-sidebar-text: #c7c5ec; --color-sidebar-hover: rgba(255, 255, 255, 0.08); --color-sidebar-active: #6366f1; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.1); } :root[data-theme-id="midnight"][data-theme="dark"] { --color-primary: #6366f1; --color-primary-hover: #818cf8; --color-secondary: #818cf8; --color-accent: #38bdf8; --color-bg-primary: #0b0a1f; --color-bg-secondary: #15132e; --color-text-primary: #e9e8fb; --color-text-secondary: #a3a1cc; --color-border: #2a2752; --color-sidebar-bg: #07061a; --color-sidebar-heading: #ffffff; --color-sidebar-text: #b6b4e0; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #4f46e5; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Ember — red/crimson, passionate ===================== */ :root[data-theme-id="ember"] { --color-primary: #dc2626; --color-primary-hover: #b91c1c; --color-secondary: #f97316; --color-accent: #fb7185; --color-bg-primary: #ffffff; --color-bg-secondary: #fff2f1; --color-text-primary: #2a0d0b; --color-text-secondary: #7a4a46; --color-border: #f6d8d5; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #2a0d0b; --color-sidebar-text: #7a4a46; --color-sidebar-hover: #fde6e4; --color-sidebar-active: #dc2626; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #f6d8d5; } :root[data-theme-id="ember"][data-theme="dark"] { --color-primary: #ef4444; --color-primary-hover: #f87171; --color-secondary: #fb923c; --color-accent: #fb7185; --color-bg-primary: #200b09; --color-bg-secondary: #2e1310; --color-text-primary: #fbe9e7; --color-text-secondary: #cf9a94; --color-border: #45211d; --color-sidebar-bg: #180706; --color-sidebar-heading: #ffffff; --color-sidebar-text: #e0b5b0; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #dc2626; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Sand — warm beige/tan, natural and soft ===================== */ :root[data-theme-id="sand"] { --color-primary: #b45309; --color-primary-hover: #92400e; --color-secondary: #d97706; --color-accent: #ca8a04; --color-bg-primary: #ffffff; --color-bg-secondary: #faf6ef; --color-text-primary: #29200f; --color-text-secondary: #6b5d45; --color-border: #ece2cf; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #29200f; --color-sidebar-text: #6b5d45; --color-sidebar-hover: #f5eede; --color-sidebar-active: #b45309; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #ece2cf; } :root[data-theme-id="sand"][data-theme="dark"] { --color-primary: #d97706; --color-primary-hover: #f59e0b; --color-secondary: #ca8a04; --color-accent: #eab308; --color-bg-primary: #1c1609; --color-bg-secondary: #292011; --color-text-primary: #f5eddd; --color-text-secondary: #bfac8c; --color-border: #3e3320; --color-sidebar-bg: #140f06; --color-sidebar-heading: #ffffff; --color-sidebar-text: #d8c7a6; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #b45309; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); } /* ===================== Arctic — cool light blue/white, crisp ===================== */ :root[data-theme-id="arctic"] { --color-primary: #0e7490; --color-primary-hover: #155e75; --color-secondary: #06b6d4; --color-accent: #38bdf8; --color-bg-primary: #ffffff; --color-bg-secondary: #f0f9fb; --color-text-primary: #0c2127; --color-text-secondary: #45616a; --color-border: #d4e8ee; --color-sidebar-bg: #ffffff; --color-sidebar-heading: #0c2127; --color-sidebar-text: #45616a; --color-sidebar-hover: #e7f4f7; --color-sidebar-active: #0e7490; --color-sidebar-active-text: #ffffff; --color-sidebar-border: #d4e8ee; } :root[data-theme-id="arctic"][data-theme="dark"] { --color-primary: #0891b2; --color-primary-hover: #22d3ee; --color-secondary: #22d3ee; --color-accent: #38bdf8; --color-bg-primary: #07191f; --color-bg-secondary: #0f262e; --color-text-primary: #e3f3f7; --color-text-secondary: #93b4bd; --color-border: #1d3a44; --color-sidebar-bg: #041216; --color-sidebar-heading: #ffffff; --color-sidebar-text: #aacdd5; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: #0e7490; --color-sidebar-active-text: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.08); }