/* * Site-wide theme overrides. Each page already defines a :root block with * a consistent set of CSS variables — we just override them here based on * the `data-theme` attribute set on . The selectors use a tag+attr * combination so they outrank the per-page :root defaults regardless of * stylesheet load order. * * The "default" theme is the current Discord-y indigo dark UI; we don't * redeclare it (the per-page :root already covers it). */ /* ── Forest Green — dark backgrounds, green accents ─────────────────── */ html[data-theme="forest"] { --blurple: #43b581; --blurple-hover: #36976b; --dark-bg: #0f1d16; --darker-bg: #081610; --card-bg: #14291d; --card-bg2: #102218; --sidebar-bg: #0b1e14; --text-primary: #ecfdf3; --text-secondary: #b4d5c0; --text-muted: #7a9c87; --border: #1f3b2a; --green: #43b581; --green-hover: #36976b; } html[data-theme="forest"] body { background: #0f1d16; } /* ── Ocean Blue — cool deep-blue palette ────────────────────────────── */ html[data-theme="ocean"] { --blurple: #1e88e5; --blurple-hover: #1565c0; --dark-bg: #0c1424; --darker-bg: #060c18; --card-bg: #142342; --card-bg2: #0f1c33; --sidebar-bg: #0c1830; --text-primary: #e3f2fd; --text-secondary: #b3c8e0; --text-muted: #7a8fb0; --border: #1f3358; --green: #43b581; --danger: #ef5350; } html[data-theme="ocean"] body { background: #0c1424; } /* ── AMOLED — pure black for OLED screens ───────────────────────────── */ html[data-theme="amoled"] { --blurple: #5865F2; --blurple-hover: #4752c4; --dark-bg: #000000; --darker-bg: #000000; --card-bg: #0c0c0c; --card-bg2: #050505; --sidebar-bg: #050505; --text-primary: #ffffff; --text-secondary: #c8c8c8; --text-muted: #8a8a8a; --border: #1a1a1a; --green: #43b581; --danger: #ed4245; } html[data-theme="amoled"] body { background: #000000; } /* Smooth visual transition when the user toggles between themes from Settings; doesn't affect first paint (data-theme is set before CSS). */ html[data-theme] body, html[data-theme] .settings-card, html[data-theme] .news-post, html[data-theme] .servers-rail, html[data-theme] .modal, html[data-theme] .channels-sidebar, html[data-theme] .members-sidebar { transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease; }