/* ========================================================================== dallelha admin — colour themes Chosen from the navbar menu built by dallelha-themes.js, which sets data-dl-theme on (and the data-bs-theme the theme is drawn for). "Normal" is the absence of that attribute. Three rules keep this file safe, and dallelha/tests_admin_themes.py enforces each of them: 1. Every selector names data-dl-theme (or the menu's own .dl-theme-* classes), so with no theme chosen nothing here applies and Normal is exactly what it was. 2. Colour only. No spacing, no direction, no fonts — which is why this works in the Arabic admin where Jazzmin's Bootswatch themes (full LTR Bootstrap sheets) do not, and why it needs no twin in admin/rtl/. 3. Every text/background pair of every theme clears WCAG 4.5:1. A theme is one block of --dl-t-* tokens (section 1). Section 2 points Bootstrap's and AdminLTE's own variables at those tokens once, for all themes; the project's sheets already read those variables, so the sidebar, dashboard, record lists, forms and custom pages follow without per-page work. Tokens are "r, g, b" triplets because Bootstrap needs both a colour and its bare triplet (--bs-body-bg and --bs-body-bg-rgb). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens — one block per theme bg: the page · surface: cards, top bar, inputs · raised: hover, chips strong: headings and table text, and what the top bar's icons are a 65% tint of · highlight: link hover and decoration · danger: required marks and field errors · sidebar-*: the sidebar is dark in every theme, so it carries its own text and accent -------------------------------------------------------------------------- */ [data-dl-theme="neon"] { --dl-t-bg: 11, 10, 26; --dl-t-surface: 19, 17, 43; --dl-t-raised: 30, 26, 69; --dl-t-text: 243, 240, 255; --dl-t-strong: 255, 255, 255; --dl-t-muted: 183, 176, 221; --dl-t-border: 46, 42, 92; --dl-t-accent: 73, 228, 237; --dl-t-on-accent: 8, 16, 22; --dl-t-highlight: 255, 95, 220; --dl-t-danger: 234, 134, 143; --dl-t-sidebar: 14, 12, 34; --dl-t-sidebar-text: 230, 226, 255; --dl-t-sidebar-accent: 73, 228, 237; --dl-t-backdrop: radial-gradient(ellipse at top, rgba(var(--dl-t-accent), 0.08), transparent 55%), radial-gradient(ellipse at bottom, rgba(var(--dl-t-highlight), 0.07), transparent 55%); } [data-dl-theme="cyberpunk"] { --dl-t-bg: 12, 13, 19; --dl-t-surface: 21, 22, 31; --dl-t-raised: 32, 34, 46; --dl-t-text: 250, 247, 233; --dl-t-strong: 255, 255, 255; --dl-t-muted: 185, 182, 166; --dl-t-border: 47, 49, 64; --dl-t-accent: 242, 232, 92; --dl-t-on-accent: 17, 18, 23; --dl-t-highlight: 255, 77, 141; --dl-t-danger: 234, 134, 143; --dl-t-sidebar: 16, 17, 24; --dl-t-sidebar-text: 241, 238, 222; --dl-t-sidebar-accent: 242, 232, 92; --dl-t-backdrop: repeating-linear-gradient(135deg, rgba(var(--dl-t-accent), 0.03) 0 2px, transparent 2px 16px); } [data-dl-theme="cybersecurity"] { --dl-t-bg: 5, 13, 9; --dl-t-surface: 10, 22, 16; --dl-t-raised: 17, 36, 26; --dl-t-text: 228, 243, 233; --dl-t-strong: 255, 255, 255; --dl-t-muted: 159, 194, 171; --dl-t-border: 26, 58, 38; --dl-t-accent: 74, 222, 128; --dl-t-on-accent: 4, 17, 10; --dl-t-highlight: 163, 230, 53; --dl-t-danger: 234, 134, 143; --dl-t-sidebar: 7, 18, 12; --dl-t-sidebar-text: 214, 234, 220; --dl-t-sidebar-accent: 74, 222, 128; --dl-t-backdrop: linear-gradient(rgba(var(--dl-t-accent), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--dl-t-accent), 0.05) 1px, transparent 1px); --dl-t-backdrop-size: 28px 28px; } [data-dl-theme="aurora"] { --dl-t-bg: 12, 18, 32; --dl-t-surface: 20, 28, 46; --dl-t-raised: 29, 39, 64; --dl-t-text: 237, 241, 250; --dl-t-strong: 255, 255, 255; --dl-t-muted: 169, 180, 204; --dl-t-border: 40, 52, 80; --dl-t-accent: 114, 222, 211; --dl-t-on-accent: 12, 23, 26; --dl-t-highlight: 179, 157, 250; --dl-t-danger: 234, 134, 143; --dl-t-sidebar: 15, 22, 38; --dl-t-sidebar-text: 227, 233, 246; --dl-t-sidebar-accent: 114, 222, 211; --dl-t-backdrop: radial-gradient(ellipse at top, rgba(var(--dl-t-accent), 0.11), transparent 60%), radial-gradient(ellipse at bottom, rgba(var(--dl-t-highlight), 0.09), transparent 60%); } [data-dl-theme="midnight"] { --dl-t-bg: 10, 17, 30; --dl-t-surface: 17, 26, 44; --dl-t-raised: 26, 38, 61; --dl-t-text: 232, 238, 248; --dl-t-strong: 255, 255, 255; --dl-t-muted: 163, 177, 201; --dl-t-border: 36, 50, 76; --dl-t-accent: 146, 184, 255; --dl-t-on-accent: 11, 19, 34; --dl-t-highlight: 195, 215, 255; --dl-t-danger: 234, 134, 143; --dl-t-sidebar: 12, 20, 36; --dl-t-sidebar-text: 221, 230, 244; --dl-t-sidebar-accent: 146, 184, 255; } [data-dl-theme="graphite"] { --dl-t-bg: 19, 21, 23; --dl-t-surface: 27, 30, 34; --dl-t-raised: 38, 42, 48; --dl-t-text: 238, 240, 243; --dl-t-strong: 255, 255, 255; --dl-t-muted: 170, 177, 187; --dl-t-border: 50, 55, 62; --dl-t-accent: 199, 205, 214; --dl-t-on-accent: 22, 25, 30; --dl-t-highlight: 255, 255, 255; --dl-t-danger: 234, 134, 143; --dl-t-sidebar: 16, 18, 20; --dl-t-sidebar-text: 227, 230, 234; --dl-t-sidebar-accent: 226, 230, 236; } [data-dl-theme="ocean"] { --dl-t-bg: 234, 244, 248; --dl-t-surface: 255, 255, 255; --dl-t-raised: 220, 235, 241; --dl-t-text: 23, 51, 69; --dl-t-strong: 10, 31, 43; --dl-t-muted: 69, 96, 112; --dl-t-border: 201, 221, 230; --dl-t-accent: 15, 107, 130; --dl-t-on-accent: 255, 255, 255; --dl-t-highlight: 10, 74, 92; --dl-t-danger: 176, 42, 55; --dl-t-sidebar: 14, 51, 69; --dl-t-sidebar-text: 228, 242, 247; --dl-t-sidebar-accent: 127, 216, 234; } [data-dl-theme="sandstone"] { --dl-t-bg: 246, 239, 228; --dl-t-surface: 255, 253, 249; --dl-t-raised: 239, 228, 211; --dl-t-text: 70, 55, 42; --dl-t-strong: 43, 31, 21; --dl-t-muted: 102, 86, 70; --dl-t-border: 226, 211, 189; --dl-t-accent: 143, 84, 38; --dl-t-on-accent: 255, 255, 255; --dl-t-highlight: 106, 60, 24; --dl-t-danger: 176, 42, 55; --dl-t-sidebar: 53, 38, 27; --dl-t-sidebar-text: 244, 234, 220; --dl-t-sidebar-accent: 240, 185, 138; } /* -------------------------------------------------------------------------- 2. Bootstrap and AdminLTE, pointed at the tokens -------------------------------------------------------------------------- */ /* The page itself is body.bg-body-tertiary, hence tertiary = bg. */ :root[data-dl-theme] { --bs-body-bg: rgb(var(--dl-t-surface)); --bs-body-bg-rgb: var(--dl-t-surface); --bs-secondary-bg: rgb(var(--dl-t-raised)); --bs-secondary-bg-rgb: var(--dl-t-raised); --bs-tertiary-bg: rgb(var(--dl-t-bg)); --bs-tertiary-bg-rgb: var(--dl-t-bg); --bs-body-color: rgb(var(--dl-t-text)); --bs-body-color-rgb: var(--dl-t-text); --bs-emphasis-color: rgb(var(--dl-t-strong)); --bs-emphasis-color-rgb: var(--dl-t-strong); --bs-secondary-color: rgb(var(--dl-t-muted)); --bs-secondary-color-rgb: var(--dl-t-muted); --bs-tertiary-color: rgba(var(--dl-t-muted), 0.75); --bs-tertiary-color-rgb: var(--dl-t-muted); --bs-border-color: rgb(var(--dl-t-border)); --bs-border-color-translucent: rgba(var(--dl-t-text), 0.14); --bs-primary: rgb(var(--dl-t-accent)); --bs-primary-rgb: var(--dl-t-accent); --bs-primary-text-emphasis: rgb(var(--dl-t-accent)); --bs-primary-bg-subtle: rgba(var(--dl-t-accent), 0.14); --bs-primary-border-subtle: rgba(var(--dl-t-accent), 0.4); --bs-link-color: rgb(var(--dl-t-accent)); --bs-link-color-rgb: var(--dl-t-accent); --bs-link-hover-color: rgb(var(--dl-t-highlight)); --bs-link-hover-color-rgb: var(--dl-t-highlight); --bs-code-color: rgb(var(--dl-t-highlight)); --bs-focus-ring-color: rgba(var(--dl-t-accent), 0.3); --bs-form-invalid-color: rgb(var(--dl-t-danger)); --bs-form-invalid-border-color: rgb(var(--dl-t-danger)); } /* Bootstrap's red is drawn for a white page: too dim on a dark surface, and just short of readable on Sandstone's cream. */ :root[data-dl-theme] :is(.text-red, .text-danger, .invalid-feedback) { color: rgb(var(--dl-t-danger)) !important; } :root[data-dl-theme] body { background-image: var(--dl-t-backdrop, none); background-size: var(--dl-t-backdrop-size, auto); background-attachment: fixed; } /* The sidebar is