/* ══════════════════════════════════════════════════════════════ RORU Theme System ────────────────────────────────────────────────────────────── Applies via: ══════════════════════════════════════════════════════════════ */ /* ── Base Light Token Defaults ──────────────────────────────── */ :root, [data-mode="light"] { /* Brand */ --primary: #0D2B4E; --secondary: #4A9FD4; --accent: #7DC4E8; /* Surfaces */ --bg: #ffffff; --bg-alt: #f9fafb; --bg-muted: #f3f4f6; /* Text */ --text: #1A1A2E; --text-muted: #4b5563; --text-faint: #9ca3af; /* Borders */ --border: #e5e7eb; --border-light:#f3f4f6; /* Sidebar (dark surface) */ --sidebar-bg: var(--primary); --sidebar-text: rgba(255,255,255,.7); --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255,255,255,.12); --sidebar-active-bg:rgba(255,255,255,.15); --sidebar-accent: var(--accent); --sidebar-border: rgba(255,255,255,.08); /* Cards */ --card-bg: #ffffff; --card-border: #e5e7eb; --card-shadow: rgba(0,0,0,.06); /* Inputs */ --input-bg: #ffffff; --input-border: #e5e7eb; --input-focus: var(--secondary); --input-text: var(--text); /* Navbar */ --navbar-bg: #ffffff; --navbar-border: #e5e7eb; --navbar-shadow: rgba(0,0,0,.1); /* Footer */ --footer-bg: var(--primary); --footer-text: rgba(255,255,255,.8); --footer-heading: #ffffff; --footer-link: rgba(255,255,255,.7); --footer-accent: var(--accent); /* Pre-header */ --preheader-bg: var(--primary); --preheader-text: rgba(255,255,255,.85); --preheader-icon: var(--accent); /* Functional */ --success: #16a34a; --danger: #dc2626; --warning: #ca8a04; --info: #2563eb; /* Misc */ --overlay: rgba(0,0,0,.5); --scrollbar: rgba(0,0,0,.1); --white: #ffffff; --gray-300: #d1d5db; /* Alert light mode */ --alert-success-bg: #f0fdf4; --alert-success-text: #15803d; --alert-success-border: #bbf7d0; --alert-error-bg: #fef2f2; --alert-error-text: #b91c1c; --alert-error-border: #fecaca; --alert-warning-bg: #fffbeb; --alert-warning-text: #b45309; --alert-warning-border: #fde68a; --alert-info-bg: #eff6ff; --alert-info-text: #1d4ed8; --alert-info-border: #bfdbfe; } /* ── Dark Mode ──────────────────────────────────────────────── */ [data-mode="dark"] { --bg: #0f1219; --bg-alt: #161b26; --bg-muted: #1e2533; --text: #e2e8f0; --text-muted: #94a3b8; --text-faint: #64748b; --border: #2d3748; --border-light:#1e2533; --sidebar-bg: #0a0e17; --sidebar-text: rgba(255,255,255,.7); --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255,255,255,.08); --sidebar-active-bg:rgba(255,255,255,.1); --sidebar-accent: var(--accent); --sidebar-border: rgba(255,255,255,.08); --card-bg: #161b26; --card-border: #2d3748; --card-shadow: rgba(0,0,0,.3); --input-bg: #1e2533; --input-border: #2d3748; --input-text: #e2e8f0; --navbar-bg: #0f1219; --navbar-border: #2d3748; --navbar-shadow: rgba(0,0,0,.4); --footer-bg: #0a0e17; --footer-text: rgba(255,255,255,.7); --footer-heading: #ffffff; --footer-link: rgba(255,255,255,.6); --footer-accent: var(--accent); --preheader-bg: #0a0e17; --preheader-text: rgba(255,255,255,.8); --preheader-icon: var(--accent); /* Functional */ --success: #22c55e; --danger: #ef4444; --warning: #eab308; --info: #3b82f6; --overlay: rgba(0,0,0,.7); --scrollbar: rgba(255,255,255,.1); --white: #ffffff; --gray-300: #4a5568; /* Alert dark mode */ --alert-success-bg: #052e16; --alert-success-text: #4ade80; --alert-success-border: #166534; --alert-error-bg: #450a0a; --alert-error-text: #fca5a5; --alert-error-border: #991b1b; --alert-warning-bg: #451a03; --alert-warning-text: #fbbf24; --alert-warning-border: #92400e; --alert-info-bg: #172554; --alert-info-text: #93c5fd; --alert-info-border: #1e40af; color-scheme: dark; } /* ── Auto Mode (follow OS) ──────────────────────────────────── */ @media (prefers-color-scheme: dark) { [data-mode="auto"] { --bg: #0f1219; --bg-alt: #161b26; --bg-muted: #1e2533; --text: #e2e8f0; --text-muted: #94a3b8; --text-faint: #64748b; --border: #2d3748; --border-light:#1e2533; --sidebar-bg: #0a0e17; --sidebar-text: rgba(255,255,255,.7); --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255,255,255,.08); --sidebar-active-bg:rgba(255,255,255,.1); --sidebar-accent: var(--accent); --sidebar-border: rgba(255,255,255,.08); --card-bg: #161b26; --card-border: #2d3748; --card-shadow: rgba(0,0,0,.3); --input-bg: #1e2533; --input-border: #2d3748; --input-text: #e2e8f0; --navbar-bg: #0f1219; --navbar-border: #2d3748; --navbar-shadow: rgba(0,0,0,.4); --footer-bg: #0a0e17; --footer-text: rgba(255,255,255,.7); --footer-heading: #ffffff; --footer-link: rgba(255,255,255,.6); --footer-accent: var(--accent); --preheader-bg: #0a0e17; --preheader-text: rgba(255,255,255,.8); --preheader-icon: var(--accent); /* Functional */ --success: #22c55e; --danger: #ef4444; --warning: #eab308; --info: #3b82f6; --overlay: rgba(0,0,0,.7); --scrollbar: rgba(255,255,255,.1); --white: #ffffff; --gray-300: #4a5568; /* Alert dark mode */ --alert-success-bg: #052e16; --alert-success-text: #4ade80; --alert-success-border: #166534; --alert-error-bg: #450a0a; --alert-error-text: #fca5a5; --alert-error-border: #991b1b; --alert-warning-bg: #451a03; --alert-warning-text: #fbbf24; --alert-warning-border: #92400e; --alert-info-bg: #172554; --alert-info-text: #93c5fd; --alert-info-border: #1e40af; color-scheme: dark; } } /* ══════════════════════════════════════════════════════════════ THEME PRESETS — Brand Colors ══════════════════════════════════════════════════════════════ */ /* ── 1. Ocean Navy (Default) ────────────────────────────────── */ [data-theme="ocean"] { --primary: #0D2B4E; --secondary: #4A9FD4; --accent: #7DC4E8; } /* ── 2. Forest Green ────────────────────────────────────────── */ [data-theme="forest"] { --primary: #1a4332; --secondary: #38a169; --accent: #68d391; } /* ── 3. Royal Purple ────────────────────────────────────────── */ [data-theme="royal"] { --primary: #3b1f6e; --secondary: #805ad5; --accent: #b794f4; } /* ── 4. Sunset Amber ────────────────────────────────────────── */ [data-theme="sunset"] { --primary: #7b341e; --secondary: #dd6b20; --accent: #fbd38d; } /* ── 5. Slate Modern ────────────────────────────────────────── */ [data-theme="slate"] { --primary: #1e293b; --secondary: #6366f1; --accent: #a5b4fc; } /* ── Theme-dependent sidebar recolor ────────────────────────── */ [data-theme] { --sidebar-bg: var(--primary); --footer-bg: var(--primary); --preheader-bg: var(--primary); } [data-mode="dark"][data-theme] { --sidebar-bg: #0a0e17; --footer-bg: #0a0e17; --preheader-bg: #0a0e17; } @media (prefers-color-scheme: dark) { [data-mode="auto"][data-theme] { --sidebar-bg: #0a0e17; --footer-bg: #0a0e17; --preheader-bg: #0a0e17; } }