/* ============================================================================ SCS — theme base ---------------------------------------------------------------------------- Four palettes, each with a light and a dark mode. Everything downstream reads these variables, so a palette change is a data-attribute swap and nothing more — no stylesheet is swapped, no page reloads a different file. Bootstrap 5 is driven through its own --bs-* variables where possible, so native components (buttons, forms, alerts) pick the palette up without being restyled one by one. To add a fifth palette: copy one block, change the six accent values. Nothing else needs to know it exists. ========================================================================= */ :root { /* Shape and motion — shared by every palette. */ --scs-radius: 10px; --scs-radius-sm: 7px; --scs-radius-lg: 14px; --scs-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06); --scs-shadow-lg: 0 4px 12px rgba(16, 24, 40, .06), 0 16px 32px rgba(16, 24, 40, .10); --scs-ring: 0 0 0 3px var(--scs-accent-ring); --scs-speed: .16s; --scs-sidebar-w: 232px; --scs-sidebar-mini: 62px; --scs-header-h: 54px; /* Segoe UI Variable Text first: on Windows 11 it is the same design as Segoe UI but drawn for reading at small sizes, which is most of this application. Older Windows falls through to Segoe UI and nothing looks different. */ --scs-font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Headings and figures. A serif on a data screen is a deliberate choice: it separates a heading from the eighty other pieces of text around it without resorting to another size or weight, and a school has the gravity to carry one. Cambria ships with Windows and Office, so nothing is downloaded and nothing silently falls back mid-morning. */ --scs-font-display: "Cambria", "Iowan Old Style", Georgia, "Times New Roman", serif; --scs-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; } /* ============================================================================ THE SIX PALETTES Saturated on purpose, but the saturation is spent on the accent and on state — never on the page itself. Bright on bright is what makes a screen tiring after twenty minutes, and school staff sit in front of this all day. So: vivid accent, quiet ground. Each palette also carries a second accent (--scs-accent-2). The pair is used as a 135° gradient on the things that should catch the eye — the active menu item, the primary button, the sidebar crest. A flat fill reads as painted; a gradient across two neighbouring hues reads as lit, which is the difference between "bright" and "cheap". The keys are unchanged from the first four palettes on purpose. They are already saved in AspNetUserClaims for every user who has picked a theme — see ThemePreference.cs. ========================================================================= */ /* ── Violet — the default ────────────────────────────────────────────────── */ [data-theme="indigo"] { --scs-accent: #6D28D9; --scs-accent-2: #9333EA; --scs-accent-hover: #5B21B6; --scs-accent-soft: #f3ecff; --scs-accent-ink: #4C1D95; --scs-accent-ring: rgba(109, 40, 217, .24); --scs-sidebar-bg: #1E1533; --scs-sidebar-ink: #c6bade; --scs-sidebar-active:#9333EA; } [data-theme="indigo"][data-mode="dark"] { --scs-accent: #B49BFF; --scs-accent-2: #D8B4FE; --scs-accent-hover: #C9B8FF; --scs-accent-soft: #241a3d; --scs-accent-ink: #E9DDFF; --scs-accent-ring: rgba(180, 155, 255, .28); --scs-sidebar-bg: #150F24; --scs-sidebar-ink: #a99fc4; --scs-sidebar-active:#B49BFF; } /* ── Ocean — bright blue ─────────────────────────────────────────────────── */ [data-theme="ocean"] { --scs-accent: #0369C4; --scs-accent-2: #0EA5E9; --scs-accent-hover: #025399; --scs-accent-soft: #e8f3fd; --scs-accent-ink: #024b8c; --scs-accent-ring: rgba(3, 105, 196, .24); --scs-sidebar-bg: #0C1F33; --scs-sidebar-ink: #b9cade; --scs-sidebar-active:#0EA5E9; } [data-theme="ocean"][data-mode="dark"] { --scs-accent: #63BDFF; --scs-accent-2: #9AD7FF; --scs-accent-hover: #8ACEFF; --scs-accent-soft: #0f2941; --scs-accent-ink: #CDE9FF; --scs-accent-ring: rgba(99, 189, 255, .28); --scs-sidebar-bg: #08141F; --scs-sidebar-ink: #90a3b8; --scs-sidebar-active:#63BDFF; } /* ── Teal — blue-green (key kept as "forest") ────────────────────────────── */ [data-theme="forest"] { --scs-accent: #0D9488; --scs-accent-2: #14B8A6; --scs-accent-hover: #0B7A70; --scs-accent-soft: #e4f7f4; --scs-accent-ink: #115E59; --scs-accent-ring: rgba(13, 148, 136, .24); --scs-sidebar-bg: #0C2926; --scs-sidebar-ink: #b2cec9; --scs-sidebar-active:#14B8A6; } [data-theme="forest"][data-mode="dark"] { --scs-accent: #40D9C6; --scs-accent-2: #86EFDF; --scs-accent-hover: #6BE5D6; --scs-accent-soft: #0e2f2b; --scs-accent-ink: #B4F5EB; --scs-accent-ring: rgba(64, 217, 198, .28); --scs-sidebar-bg: #071B19; --scs-sidebar-ink: #8bada8; --scs-sidebar-active:#40D9C6; } /* ── Emerald — green ─────────────────────────────────────────────────────── */ [data-theme="emerald"] { --scs-accent: #15803D; --scs-accent-2: #22C55E; --scs-accent-hover: #116631; --scs-accent-soft: #e7f6ec; --scs-accent-ink: #14532D; --scs-accent-ring: rgba(21, 128, 61, .24); --scs-sidebar-bg: #0F2618; --scs-sidebar-ink: #b6cfbf; --scs-sidebar-active:#22C55E; } [data-theme="emerald"][data-mode="dark"] { --scs-accent: #5FE08B; --scs-accent-2: #A3F5C1; --scs-accent-hover: #86E9A8; --scs-accent-soft: #102c1b; --scs-accent-ink: #C6F7D8; --scs-accent-ring: rgba(95, 224, 139, .28); --scs-sidebar-bg: #08180E; --scs-sidebar-ink: #8dab97; --scs-sidebar-active:#5FE08B; } /* ── Saffron — warm orange (key kept as "ember") ─────────────────────────── */ [data-theme="ember"] { --scs-accent: #D2690E; --scs-accent-2: #F59E0B; --scs-accent-hover: #AC540A; --scs-accent-soft: #fdf1e2; --scs-accent-ink: #7C3D06; --scs-accent-ring: rgba(210, 105, 14, .24); --scs-sidebar-bg: #2A1D0E; --scs-sidebar-ink: #d6c6b1; --scs-sidebar-active:#F59E0B; } [data-theme="ember"][data-mode="dark"] { --scs-accent: #FFB454; --scs-accent-2: #FFD48A; --scs-accent-hover: #FFC777; --scs-accent-soft: #33230f; --scs-accent-ink: #FFE3B8; --scs-accent-ring: rgba(255, 180, 84, .28); --scs-sidebar-bg: #1C1409; --scs-sidebar-ink: #b6a58c; --scs-sidebar-active:#FFB454; } /* ── Magenta — pink-red ──────────────────────────────────────────────────── */ [data-theme="magenta"] { --scs-accent: #BE185D; --scs-accent-2: #EC4899; --scs-accent-hover: #9D1450; --scs-accent-soft: #fceaf2; --scs-accent-ink: #831843; --scs-accent-ring: rgba(190, 24, 93, .24); --scs-sidebar-bg: #2B0F1E; --scs-sidebar-ink: #dcb9cb; --scs-sidebar-active:#EC4899; } [data-theme="magenta"][data-mode="dark"] { --scs-accent: #FF80B4; --scs-accent-2: #FFB3D1; --scs-accent-hover: #FF9EC6; --scs-accent-soft: #331322; --scs-accent-ink: #FFD6E7; --scs-accent-ring: rgba(255, 128, 180, .28); --scs-sidebar-bg: #1D0A14; --scs-sidebar-ink: #b8909f; --scs-sidebar-active:#FF80B4; } /* ── Derived from whichever palette is active ────────────────────────────── */ :root { --scs-sheen: linear-gradient(135deg, var(--scs-accent), var(--scs-accent-2)); --scs-glow: 0 4px 14px var(--scs-accent-ring); --scs-tint: color-mix(in oklab, var(--scs-accent) 12%, transparent); } /* Only for a page rendered before the palette attribute is on — with no :not() this would sit at the same specificity as the palette blocks, come later in the file, and flatten every gradient in the application back to one colour. That is the whole reason for the :not(). */ html:not([data-theme]) { --scs-accent-2: var(--scs-accent); } /* ── Light mode surfaces ────────────────────────────────────────────────── Mixed from whichever accent is active rather than taken from one grey ramp. A pure grey beside a saturated accent reads as unconsidered — the page looks like a neutral template that a colour was dropped onto. Four to eight percent is invisible as colour and visible as care: on Teal the panels go faintly green, on Saffron faintly warm, and each palette becomes a whole scheme instead of one coloured button. The percentages stay small on purpose. The text sits on these surfaces all day, and tinting the ground is where "vivid" turns into "tiring". color-mix resolves at the point of use, and both --scs-accent and this block land on , so each palette gets its own surfaces with no per-palette duplication. ------------------------------------------------------------------------ */ [data-mode="light"], :root:not([data-mode]) { /* The ground carries the colour; the paper the work sits on stays near-white. That split is what keeps a tinted scheme readable — tint the window, not the page someone reads a fee ledger off. */ --scs-bg: color-mix(in oklab, var(--scs-accent) 13%, #fbfcfe); --scs-panel: color-mix(in oklab, var(--scs-accent) 3%, #ffffff); --scs-panel-2: color-mix(in oklab, var(--scs-accent) 17%, #f7f9fc); --scs-ink: color-mix(in oklab, var(--scs-accent) 8%, #12161f); --scs-ink-soft: color-mix(in oklab, var(--scs-accent) 10%, #55617a); --scs-ink-faint: color-mix(in oklab, var(--scs-accent) 12%, #8b95a5); --scs-line: color-mix(in oklab, var(--scs-accent) 18%, #e3e8ef); --scs-line-soft: color-mix(in oklab, var(--scs-accent) 12%, #eef1f6); --scs-ok: #15803d; --scs-ok-soft: #eaf7ef; --scs-warn: #b45309; --scs-warn-soft: #fdf4e3; --scs-danger: #b91c1c; --scs-danger-soft: #fdeceb; --scs-info: #0369a1; --scs-info-soft: #e9f4fb; } /* ── Dark mode surfaces ──────────────────────────────────────────────────── */ /* Dark mode gets a heavier hand — a dark ground takes more colour before it shows, and a dark grey with no hue in it looks like switched-off glass. */ [data-mode="dark"] { /* Dark mode is where the palette should be unmistakable: the whole window is a dark shade OF the chosen colour, not a neutral charcoal with a coloured button on it. The accents in the dark palettes are already light, so a heavy mix lands as a deep tinted ground rather than a muddy one. */ --scs-bg: color-mix(in oklab, var(--scs-accent) 16%, #0b0e14); --scs-panel: color-mix(in oklab, var(--scs-accent) 13%, #141922); --scs-panel-2: color-mix(in oklab, var(--scs-accent) 20%, #1b212b); --scs-ink: color-mix(in oklab, var(--scs-accent) 6%, #e6eaf0); --scs-ink-soft: color-mix(in oklab, var(--scs-accent) 14%, #9aa5b5); --scs-ink-faint: color-mix(in oklab, var(--scs-accent) 16%, #6b7688); --scs-line: color-mix(in oklab, var(--scs-accent) 22%, #29313e); --scs-line-soft: color-mix(in oklab, var(--scs-accent) 16%, #222935); --scs-ok: #4ade80; --scs-ok-soft: #14251b; --scs-warn: #fbbf24; --scs-warn-soft: #2a2113; --scs-danger: #f87171; --scs-danger-soft: #2b1719; --scs-info: #38bdf8; --scs-info-soft: #12242f; --scs-shadow: 0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.34); --scs-shadow-lg: 0 4px 12px rgba(0,0,0,.34), 0 16px 32px rgba(0,0,0,.44); } /* ============================================================================ Hand Bootstrap its own variables, so native components follow the palette without each one being restyled. ========================================================================= */ :root { --bs-primary: var(--scs-accent); --bs-primary-rgb: 37, 99, 235; --bs-link-color: var(--scs-accent); --bs-link-hover-color: var(--scs-accent-hover); --bs-body-bg: var(--scs-bg); --bs-body-color: var(--scs-ink); --bs-border-color: var(--scs-line); --bs-border-radius: var(--scs-radius); --bs-border-radius-sm: var(--scs-radius-sm); --bs-border-radius-lg: var(--scs-radius-lg); --bs-font-sans-serif: var(--scs-font); --bs-body-font-size: 14px; --bs-body-line-height: 1.55; --bs-emphasis-color: var(--scs-ink); --bs-secondary-color: var(--scs-ink-soft); --bs-tertiary-bg: var(--scs-panel-2); } /* Bootstrap's own dark switch, kept in step with ours so its components (dropdowns, modals, offcanvas) render dark without extra rules. */ [data-mode="dark"] { color-scheme: dark; } [data-mode="light"] { color-scheme: light; } /* ============================================================================ --scs-on-accent — what to write on top of the accent White is the obvious answer and it is wrong for two of the six. Measured on a filled button in light mode: Teal came out at 3.74:1 and Saffron at 3.64:1 with white text, both under the 4.5:1 a button label needs. The other four are comfortably clear. The fix could have been to darken those two accents, but "chatakh aur chamakne wale" was the brief — so the colour stays vivid and the label goes dark instead. In dark mode every palette uses a light accent, so dark ink is right across the board there. Written last, with two attributes per selector, so it beats both the palette blocks and the mode blocks above regardless of their order. ========================================================================= */ :root { --scs-on-accent: #ffffff; } [data-mode="dark"] { --scs-on-accent: #10141c; } [data-theme="forest"][data-mode="light"], [data-theme="forest"]:not([data-mode]), [data-theme="ember"][data-mode="light"], [data-theme="ember"]:not([data-mode]) { --scs-on-accent: #10141c; } [data-theme="forest"][data-mode="dark"], [data-theme="ember"][data-mode="dark"] { --scs-on-accent: #10141c; }