/* ═══════════════════════════════════════════════════════════════════════════ Roots Academy — Light / Dark theme ═══════════════════════════════════════════════════════════════════════════ HOW IT WORKS The portal's page CSS is already token-driven: student_portal.css and assignments.css each declare the same design-system palette (--paper, --surface, --ink, --line, --brand …), and the per-page sheets (fees.css, attendance.css, appointments.css, learning-process.css …) consume those tokens instead of re-declaring colours. Analytics re-declares the same palette under `.ra-db` with a --c-* prefix, and the academic pages under `body.acad` with an --acad-* prefix. So dark mode is mostly ONE job: re-point those tokens. Everything below the "TOKENS" section is clean-up for the places that hardcoded a colour instead of using a token (notifications panel, Bootstrap, a few page sheets). ACTIVATION `data-theme="dark"` on , set before first paint by the inline snippet in partials/theme_boot.html and thereafter by static/js/theme.js. SPECIFICITY This file is included from student_portal_head.html, which several templates include BEFORE their own page CSS — so load order cannot be relied on. Every rule here is therefore prefixed with `html[data-theme="dark"]` (0,1,1), which outranks the `:root` (0,1,0) and `body.acad` (0,1,1 + later-in-file) declarations it replaces. Keep that prefix on anything added here. The toggle button styles at the top are NOT prefixed — the control has to render in both themes. ══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 1. The toggle control Sized to match the notification bell it sits beside (42px circle, see notifications_panel.css .rn-bell) so the topbar reads as one row of controls. Also used standalone on the login page. The selector is `button.theme-toggle[data-roots-theme-toggle]` (0,2,1) and not the bare class, because assignments.css — loaded on nearly every student page — resets `body.assignments-page button { border: none; background: none }` at (0,1,1). A plain `.theme-toggle` (0,1,0) loses to it and the control renders as a naked icon beside a pill-shaped bell. The bell itself dodges this the same way, via .topbar-notif-wrap .notif-btn at (0,2,0). ───────────────────────────────────────────────────────────────────────── */ button.theme-toggle[data-roots-theme-toggle] { /* Deliberately no `position` — the bell needs relative for its badge, this does not, and setting it here (at 0,2,1) would outrank a page that wants the toggle taken out of flow, e.g. .theme-switch on the login page. */ width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid #E9E3D9; background: #fff; color: #5C5568; cursor: pointer; padding: 0; display: grid; place-items: center; transition: color .12s, border-color .12s, background .12s; } button.theme-toggle[data-roots-theme-toggle]:hover { color: #6E5E8A; border-color: #6E5E8A; } button.theme-toggle[data-roots-theme-toggle] svg { width: 19px; height: 19px; pointer-events: none; /* No `display` here. This selector is (0,2,2) and the icon swap below is (0,2,0), so a `display: block` on this rule outranked `.ic-sun { display: none }` and the button showed a moon AND a sun at once -- on the shared sign-in page and every student topbar. The button is `display: grid`, which blockifies its children anyway. */ } button.theme-toggle[data-roots-theme-toggle]:focus-visible { outline: 2px solid #6E5E8A; outline-offset: 2px; } /* Show the mode you would switch TO: a moon while light, a sun while dark. Keyed off the hook attribute rather than .theme-toggle, because the document viewers mount their toggle with their OWN toolbar button class (.pv-icobtn / .cv-icobtn / .ta-ico) so it matches the compact toolbar it sits in — only the icon-swapping behaviour is shared, not the pill styling below. */ [data-roots-theme-toggle] .ic-sun { display: none; } [data-roots-theme-toggle] .ic-moon { display: block; } html[data-theme="dark"] [data-roots-theme-toggle] .ic-sun { display: block; } html[data-theme="dark"] [data-roots-theme-toggle] .ic-moon { display: none; } html[data-theme="dark"] button.theme-toggle[data-roots-theme-toggle] { background: var(--surface, #2b2f35); border-color: var(--line, #3d434b); color: var(--ink-2, #b2b9c4); } html[data-theme="dark"] button.theme-toggle[data-roots-theme-toggle]:hover { color: var(--brand-2, #b7a4e6); border-color: var(--brand-2, #b7a4e6); } /* The topbar is a tight flex row on phones — the toggle shrinks with the hamburger and bell rather than pushing the page title out. */ @media (max-width: 680px) { button.theme-toggle[data-roots-theme-toggle] { width: 38px; height: 38px; } button.theme-toggle[data-roots-theme-toggle] svg { width: 17px; height: 17px; } } @media (prefers-reduced-motion: reduce) { button.theme-toggle[data-roots-theme-toggle] { transition: none; } } /* ───────────────────────────────────────────────────────────────────────── 2. TOKENS — the design-system palette, re-pointed for dark Page background is a neutral dark gray (#23262b) with cards one step lighter, so the card/page separation the light theme gets from a white card on cream paper survives. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --paper: #23262b; --surface: #2b2f35; --surface-2: #33373e; --ink: #e7eaee; --ink-2: #b2b9c4; /* --ink-3 is the muted/caption tone and is used far more widely than a "hint" colour usually is — KPI sublabels, empty states, table captions, card subtitles. A straight inversion of the light value landed at 4.3:1 on a card, just under AA, which is what made a whole class of small text look washed out. Lifted to 5.8:1 on --surface / 6.6:1 on --paper. */ --ink-3: #a3abb7; --ink-soft: #b2b9c4; /* used by the install modal in student_portal.css */ --line: #3d434b; --line-2: #343941; /* --brand is used as TEXT about twice as often as it is used as a fill (117 vs 61 declarations across the portal's sheets), so it is tuned for text: #ad96e0 measures 5.3:1 on --surface and 4.6:1 on --surface-2. The earlier mid-tone (#9a83d4) tried to serve both roles and ended up at 3.7-4.3:1 as text — under AA, which is what made small purple labels look washed out on Schedule, Study Materials and the flowchart. Every FILL that carries white text is redirected to --brand-fill instead; the list is in section 6 and is verified by the contrast audit. */ --brand: #ad96e0; --brand-2: #b7a4e6; --brand-soft: #3a3155; /* The *-fill tokens exist because the semantic tokens flip role between themes. In light, --brand/--danger/--warn are dark enough to carry white text AND to read as text on white. Inverted for dark they are light, which is right for text on a card but leaves white labels floating on a pale fill (the Submit button, the "on" filter chips). Anything that fills a surface and puts #fff on top uses these instead — see section 6. */ --brand-fill: #6d59a8; /* white text 5.8:1 — measured, not estimated */ --danger-fill: #b8453a; /* white text 5.3:1 */ --warn-fill: #8a6906; /* white text 4.9:1 (yellow needs to go deep) */ --success: #9a83d4; /* the portal styles "success" purple, not green */ --success-soft: #3a3155; --warn: #e8b45f; --warn-soft: #443619; --danger: #f0897e; --danger-soft: #4a2a26; --indigo: #8f92ff; --indigo-soft: #2e3060; --amber: #f0b45c; --amber-soft: #45351a; --slate: #9aa5b5; --slate-soft: #333a44; /* Shadows carry no weight over a dark page unless they are near-black. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .24); --shadow-md: 0 4px 14px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .26); --shadow-lg: 0 18px 40px rgba(0, 0, 0, .50), 0 6px 14px rgba(0, 0, 0, .32); } /* Analytics dashboard — same palette, --c-* prefix, scoped to .ra-db. */ html[data-theme="dark"] .ra-db { --c-brand: #9a83d4; --c-brand2: #b7a4e6; --c-bsoft: #3a3155; --c-surf: #2b2f35; --c-surf2: #33373e; --c-paper: #23262b; --c-ink: #e7eaee; --c-ink2: #b2b9c4; --c-ink3: #a3abb7; --c-line: #3d434b; --c-line2: #343941; --c-ok: #9a83d4; --c-oksoft: #3a3155; --c-warn: #e8b45f; --c-wsoft: #443619; --c-err: #f0897e; --c-esoft: #4a2a26; --c-ind: #8f92ff; --c-isoft: #2e3060; --c-amb: #f0b45c; --c-asoft: #45351a; --sh-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .24); --sh-md: 0 4px 14px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .26); --sh-lg: 0 18px 40px rgba(0, 0, 0, .50), 0 6px 14px rgba(0, 0, 0, .32); } /* Academic pages (announcements) — --acad-* prefix, scoped to body.acad. */ html[data-theme="dark"] body.acad { --acad-paper: #23262b; --acad-paper-2: #1e2126; --acad-surface: #2b2f35; --acad-surface-2: #33373e; --acad-ink: #e7eaee; --acad-ink-2: #b2b9c4; --acad-ink-3: #a3abb7; --acad-line: #3d434b; --acad-line-2: #343941; --acad-brand: #9a83d4; --acad-brand-2: #b7a4e6; --acad-brand-dark: #6d59a8; --acad-brand-soft: #3a3155; --acad-success: #4cae7e; --acad-success-soft: #23402f; --acad-warn: #e8b45f; --acad-warn-soft: #443619; --acad-danger: #f0897e; --acad-danger-soft: #4a2a26; --acad-indigo: #8f92ff; --acad-indigo-soft: #2e3060; --acad-amber: #f0b45c; --acad-amber-soft: #45351a; --acad-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .24); --acad-shadow-md: 0 4px 14px rgba(0, 0, 0, .38); --acad-shadow-lg: 0 18px 40px rgba(0, 0, 0, .50); } /* Per-page accent tokens. Only the *-soft tints need re-pointing — a pale wash designed to sit on white turns into a glare panel on a dark card. The saturated partners stay put; they read fine either way. */ /* NOTE THE SELECTOR: `html[data-theme="dark"] body`, not the root block above. These accents are declared by their pages on `body.fees-page`, `body.attendance-page`, `body.engagement-page` … — i.e. on BODY. A custom property set on body beats one inherited from html for everything inside body, so declaring them in the root block silently lost every time: the attendance calendar kept its pale mint day cells in dark mode. Adding `body` to the selector (0,1,2) outranks `body.attendance-page` (0,1,1) and fixes it. */ html[data-theme="dark"] body { --fees-paid-soft: #1e3d2b; /* fees.css */ --att-present-soft: #1e3d2b; /* attendance.css */ --att-present: #7fd3a3; --eng-excellent-soft: #1e3d2b; /* engagement.css */ --eng-excellent: #7fd3a3; --eng-needs-soft: #45311c; --eng-needs: #f0a56b; --video-soft: #4a2038; /* learning-process.css */ --video: #f090bd; --fb-good-soft: #1e3d2b; /* feedback.css */ --fb-good: #7fd3a3; --fb-warn-soft: #443619; /* quizzes.css reaches for `var(--acad-surface, #fff)` on the topic-quiz pages, which carry no body.acad — so the block below never applies and the #fff fallback wins. Defining the handful it falls back on at root level kills the fallback everywhere. */ --acad-surface: #2b2f35; --acad-surface-2: #33373e; --acad-line: #3d434b; --acad-ink: #e7eaee; --acad-ink-2: #b2b9c4; --brand-50: #33373e; /* study-materials.css hover fallback */ } /* ───────────────────────────────────────────────────────────────────────── 3. Page canvas ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background: var(--paper); color: var(--ink); } /* The light theme's two purple radial page-glows are removed outright in section 11 (no gradients in dark mode), not dimmed here. */ html[data-theme="dark"] .portal-topbar { background: rgba(35, 38, 43, .84); } /* Scrollbars — hardcoded warm grays in student_portal.css / assignments.css. */ html[data-theme="dark"] .portal-main { scrollbar-color: #4c525b var(--paper); } html[data-theme="dark"] .portal-main::-webkit-scrollbar-track { background: var(--paper); } html[data-theme="dark"] .portal-main::-webkit-scrollbar-thumb { background: #4c525b; border-color: var(--paper); } html[data-theme="dark"] .portal-main::-webkit-scrollbar-thumb:hover { background: #5c636e; } html[data-theme="dark"] body.assignments-page ::-webkit-scrollbar-thumb { background: #4c525b; border-color: var(--paper); } html[data-theme="dark"] body.assignments-page ::-webkit-scrollbar-thumb:hover { background: #5c636e; } /* The feedback gate card sets background:#fff inline, so it needs !important. */ html[data-theme="dark"] #feedback-gate-card { background: var(--surface) !important; color: var(--ink); } /* ───────────────────────────────────────────────────────────────────────── 4. Notifications panel notifications_panel.css hardcodes the cream/white palette throughout, so every surface in it has to be named here. Several of its rules already use !important (they fight Bootstrap's dropdown), which is why some of these do. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .roots-notif-wrap .rn-bell, html[data-theme="dark"] .topbar-notif-wrap .notif-btn { background: var(--surface); border-color: var(--line); color: var(--ink-2); } html[data-theme="dark"] .roots-notif-wrap .rn-bell:hover, html[data-theme="dark"] .topbar-notif-wrap .notif-btn:hover { color: var(--brand-2); border-color: var(--brand-2); } html[data-theme="dark"] .roots-notif-wrap .rn-badge, html[data-theme="dark"] .topbar-notif-wrap .rn-badge, html[data-theme="dark"] .topbar-notif-wrap #notification-count, html[data-theme="dark"] .topbar-notif-wrap .badge-danger { border-color: var(--paper); } html[data-theme="dark"] .rn-panel, html[data-theme="dark"] .notif-dropdown, html[data-theme="dark"] .topbar-notif-wrap .dropdown-menu.dropdown-menu-lg { background: var(--surface); border-color: var(--line) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, .34), 0 18px 50px rgba(0, 0, 0, .52) !important; } html[data-theme="dark"] .rn-head h2 { color: var(--ink); } html[data-theme="dark"] .rn-head .rn-count { background: var(--brand-soft); color: var(--brand-2); } html[data-theme="dark"] .rn-mark-read { color: var(--brand-2); } html[data-theme="dark"] .rn-mark-read:hover { background: var(--brand-soft); } html[data-theme="dark"] .rn-tabs { border-bottom-color: var(--line); } html[data-theme="dark"] .rn-tab { color: var(--ink-3); } html[data-theme="dark"] .rn-tab:hover { color: var(--ink); } html[data-theme="dark"] .rn-tab[aria-selected="true"] { background: var(--brand-fill); color: #fff; } html[data-theme="dark"] .rn-list::-webkit-scrollbar-thumb { background: #4c525b; border-color: var(--surface); } html[data-theme="dark"] .rn-group { color: var(--ink-3); } html[data-theme="dark"] .rn-item { border-top-color: var(--line-2); } html[data-theme="dark"] .rn-item:hover { background: var(--surface-2); } html[data-theme="dark"] .rn-line1 { color: var(--ink-2); } html[data-theme="dark"] .rn-line1 b, html[data-theme="dark"] .rn-line1 strong { color: var(--ink); } html[data-theme="dark"] .rn-item.read .rn-line1 b, html[data-theme="dark"] .rn-item.read .rn-line1 strong { color: var(--ink-2); } html[data-theme="dark"] .rn-meta { color: var(--ink-3); } html[data-theme="dark"] .rn-chip { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); } html[data-theme="dark"] .rn-unread-dot { background: var(--brand-2); } html[data-theme="dark"] .rn-i-assign { background: #3a3155; color: #c3b1ee; } html[data-theme="dark"] .rn-i-test { background: #443619; color: #edc274; } html[data-theme="dark"] .rn-i-submit { background: #1e3d2b; color: #79cfa1; } html[data-theme="dark"] .rn-i-system { background: #24374f; color: #8db4e2; } html[data-theme="dark"] .rn-i-alert { background: #4a2a26; color: #f0897e; } html[data-theme="dark"] .rn-mini { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); } html[data-theme="dark"] .rn-mini:hover { border-color: var(--brand-2); color: var(--brand-2); } html[data-theme="dark"] .rn-mini.primary { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } html[data-theme="dark"] .rn-mini.primary:hover { background: var(--brand); border-color: var(--brand); } html[data-theme="dark"] .rn-empty, html[data-theme="dark"] .rn-state { color: var(--ink-3); } html[data-theme="dark"] .rn-empty .rn-empty-ic { background: var(--surface-2); color: var(--brand-2); } html[data-theme="dark"] .rn-empty p b { color: var(--ink); } html[data-theme="dark"] .rn-foot { background: var(--surface); border-top-color: var(--line); } html[data-theme="dark"] .rn-foot a { color: var(--brand-2); } html[data-theme="dark"] .rn-foot a:hover { background: var(--brand-soft); } html[data-theme="dark"] .rn-foot a + a { border-left-color: var(--line); } html[data-theme="dark"] .rn-push-optin { background: var(--surface-2); border-bottom-color: var(--line); } html[data-theme="dark"] .rn-push-optin-text strong { color: var(--ink); } html[data-theme="dark"] .rn-push-optin-text span { color: var(--ink-2); } html[data-theme="dark"] .rn-push-later { border-color: var(--line); color: var(--ink-2); } html[data-theme="dark"] .rn-push-later:hover { background: var(--surface-2); color: var(--ink); } html[data-theme="dark"] .rn-push-enable { background: var(--brand-fill); border-color: var(--brand-fill); } html[data-theme="dark"] .rn-push-enable:hover { background: var(--brand); border-color: var(--brand); } /* ───────────────────────────────────────────────────────────────────────── 5. Bootstrap 4 + legacy admin theme (app.min.css) Queries, Marks, Announcements and the OTP/confirm modals across the portal render straight Bootstrap, which ships a white-page palette. ───────────────────────────────────────────────────────────────────────── */ /* This project's bootstrap.min.css is a customised admin theme, not stock Bootstrap. It paints globals stock Bootstrap leaves alone: h1-h6 { color: #495057 } ← every heading in the portal, dim on dark body { border-top: 2px solid #eff2f7 } ← a bright hairline up top a { color: #174a83 } Those three have to be answered here or dark mode looks broken on pages that never hardcoded a colour of their own. */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3, html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color: var(--ink); } /* …except the ones sitting on a filled brand panel, which stay white. The rule above ties with .upgrade h4 on specificity and would otherwise win on order. */ html[data-theme="dark"] .upgrade h4 { color: #fff; } html[data-theme="dark"] body { border-top-color: var(--line); } /* Only unclassed links: `a.btn-primary` and friends carry their own colour at a lower specificity than this selector and would be repainted by it. */ html[data-theme="dark"] a:not([class]) { color: var(--brand-2); } html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .popover, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .accordion > .card { background-color: var(--surface); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: var(--surface-2); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .modal-title, html[data-theme="dark"] .card-title { color: var(--ink); } html[data-theme="dark"] .dropdown-item { color: var(--ink); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-2); color: var(--ink); } html[data-theme="dark"] .dropdown-divider { border-top-color: var(--line); } html[data-theme="dark"] .table, html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { color: var(--ink); border-color: var(--line); } html[data-theme="dark"] .table thead th { color: var(--ink-2); border-bottom-color: var(--line); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .06); color: var(--ink); } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered td, html[data-theme="dark"] .table-bordered th { border-color: var(--line); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] select { background-color: var(--surface-2); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .custom-select:focus { background-color: var(--surface-2); border-color: var(--brand); color: var(--ink); box-shadow: 0 0 0 3px rgba(154, 131, 212, .22); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--ink-3); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: #262a2f; color: var(--ink-3); } html[data-theme="dark"] .input-group-text { background-color: var(--surface-2); border-color: var(--line); color: var(--ink-2); } html[data-theme="dark"] label, html[data-theme="dark"] .col-form-label { color: var(--ink); } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--line); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--ink-2); } html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--line); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--surface); border-color: var(--line) var(--line) var(--surface); color: var(--ink); } html[data-theme="dark"] .page-link { background-color: var(--surface); border-color: var(--line); color: var(--brand-2); } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--surface-2); border-color: var(--line); color: var(--ink-3); } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } html[data-theme="dark"] .close, html[data-theme="dark"] .btn-close { color: var(--ink); text-shadow: none; opacity: .7; } html[data-theme="dark"] .close:hover { color: var(--ink); opacity: 1; } html[data-theme="dark"] .alert-success { background-color: #1e3d2b; border-color: #2c5a3f; color: #a3e0bf; } html[data-theme="dark"] .alert-danger { background-color: #4a2a26; border-color: #6d3b35; color: #f5b0a8; } html[data-theme="dark"] .alert-warning { background-color: #443619; border-color: #63512a; color: #f0cd8e; } html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-primary { background-color: #2e3060; border-color: #43468a; color: #b6b8ff; } html[data-theme="dark"] .alert-secondary, html[data-theme="dark"] .alert-light { background-color: var(--surface-2); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .badge-light { background-color: var(--surface-2); color: var(--ink); } html[data-theme="dark"] .progress { background-color: var(--surface-2); } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-right, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left { border-color: var(--line) !important; } html[data-theme="dark"] hr { border-top-color: var(--line); } /* Bootstrap utilities that paint a light surface or dark ink outright. */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--surface) !important; color: var(--ink); } html[data-theme="dark"] .text-dark { color: var(--ink) !important; } html[data-theme="dark"] .text-muted { color: var(--ink-3) !important; } html[data-theme="dark"] .text-body { color: var(--ink) !important; } /* Select2 (Queries, Marks) */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-search__field { background-color: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); } html[data-theme="dark"] .select2-results__option { color: var(--ink); } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--surface-2); } /* DataTables (Announcements) */ html[data-theme="dark"] .dataTables_wrapper, html[data-theme="dark"] .dataTables_info, html[data-theme="dark"] .dataTables_length, html[data-theme="dark"] .dataTables_filter { color: var(--ink-2); } html[data-theme="dark"] table.dataTable tbody tr { background-color: transparent; } /* ───────────────────────────────────────────────────────────────────────── 6. Filled brand controls --brand has to double as a text colour on dark cards, so it is lighter than the light-theme purple. Controls that fill with it AND carry small white labels are moved to --brand-fill, which keeps them ~6:1. The light-theme rules for several of these already use !important. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .act-primary, html[data-theme="dark"] .student-portal-page .btn-primary:not(.btn-link), html[data-theme="dark"] .btn-primary:not(.btn-link) { background: var(--brand-fill) !important; border-color: var(--brand-fill) !important; color: #fff !important; } html[data-theme="dark"] .install-banner-cta, html[data-theme="dark"] .update-banner-cta, html[data-theme="dark"] .install-modal-cta { background: var(--brand-fill); border-color: var(--brand-fill); } html[data-theme="dark"] .ra-db .ra-btn, html[data-theme="dark"] .ra-db .ra-print-btn, html[data-theme="dark"] .ra-db .ra-you-tag { background: var(--brand-fill); } /* "How to do your assignments" (assignments.css) is built from three stage colours, each in two roles: --ac is the LINE (card outlines, numbers, chevrons) and --acf is the FILL that carries #fff (the lane header band, the step icon tiles). In light both roles share one value. They cannot in dark: a fill still has to be deep enough for white text while a line has to be light enough to read on --surface, which is the split the *-fill tokens above exist for. Ratios measured, not estimated. */ html[data-theme="dark"] .asg-guide { --ag-s1: #98a2f5; --ag-s1f: #4a57c9; /* line 5.7:1 on card · white on fill 6.0:1 */ --ag-s2: #b6a4e8; --ag-s2f: #6d59a8; /* line 6.1:1 · white on fill 5.8:1 */ --ag-s3: #e2a755; --ag-s3f: #96601a; /* line 6.3:1 · white on fill 5.3:1 */ } /* Submit is `background: var(--danger)` with white text. --danger is light in dark mode (it has to read as error text on a card), so the button came out pale coral with unreadable white on it. student_portal.css sets it !important, hence the !important here. */ html[data-theme="dark"] .act-submit { background: var(--danger-fill) !important; } /* ── The "ink as a fill" family ────────────────────────────────────────── The most persistent trap in this theme. Several components use the INK token as a background with white text on top — a near-black pill in light mode: assignments.css .chip.on, .btn-asg attendance.css .mbtn.on student_analytics .ra-rec-n (the 1/2/3 badges on "next actions") canvas_viewer.css .cv-toast (--cv-ink) annotator .ta-toast (--ink) Inverted for dark, --ink becomes near-WHITE, so every one of them turned into white text on a white pill — invisible. They cannot be fixed by re-pointing the token (--ink has to be light; it is the body text colour), so each is redirected to a fill token instead. This is the same failure as --brand/--danger/--warn had; the fix list is kept together here so the next component that borrows --ink for a fill is easy to add. Chips/badges take the brand fill (that is what "selected" reads as on dark); toasts stay neutral-dark, since a toast is not a selection. */ html[data-theme="dark"] .chip.on, html[data-theme="dark"] .btn-asg, html[data-theme="dark"] body.attendance-page .mbtn.on, html[data-theme="dark"] .ra-db .ra-rec-n { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } html[data-theme="dark"] .cv-toast, html[data-theme="dark"] .ta-toast { background: #14171b; color: var(--ink); } html[data-theme="dark"] .chip.on.danger { background: var(--danger-fill); border-color: var(--danger-fill); } html[data-theme="dark"] .chip.on.warn { background: var(--warn-fill); border-color: var(--warn-fill); } html[data-theme="dark"] .chip.on.success { background: var(--brand-fill); border-color: var(--brand-fill); } html[data-theme="dark"] .chip:hover { border-color: var(--brand-2); } /* ── Measured contrast fixes ────────────────────────────────────────────── Found by walking the rendered DOM of every student page in dark mode and measuring each visible text node against its effective background, rather than by reading CSS. Ratios below are WCAG (gamma-linearised). */ /* The active sidebar item — --brand on --brand-soft — was the single most widespread failure in the portal: 3.75:1 on 26 pages. --brand cannot simply be lightened (it doubles as a fill), so the active label steps up to --brand-2 instead: 5.4:1. Same for sub-items and the topbar accent. */ html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .nav-sub a.active, html[data-theme="dark"] .avatar-dropdown a:hover, html[data-theme="dark"] .portal-topbar h1 em { color: var(--brand-2); } html[data-theme="dark"] .nav-item.active::before { background: var(--brand-2); } /* Filled controls whose white label sat on --brand (3.2:1): the feedback wizard's Continue button and the selected annotation tool in both viewers. */ html[data-theme="dark"] .feedback-page .fb-btn-primary, html[data-theme="dark"] .cv-tool.active, html[data-theme="dark"] .ta-tool.active { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; box-shadow: none; } /* The two viewer bars that hardcode #fbfafd — the annotation toolbar and the thumbnail rail. They are chrome, and at 1.9:1 their labels were unreadable. */ html[data-theme="dark"] .cv-toolbar, html[data-theme="dark"] .cv-thumbs { background: var(--cv-surface); border-color: var(--cv-line); } /* Viewer submit buttons: white label on --brand / --cv-brand (3.2:1). */ html[data-theme="dark"] .cv-submitbtn, html[data-theme="dark"] .ta-submit, html[data-theme="dark"] .ta-foot .ta-submit { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } html[data-theme="dark"] .cv-submitbtn:hover:not(:disabled), html[data-theme="dark"] .ta-submit:hover:not(:disabled) { background: #7d68bd; } /* The autosave chip ("Saved") sat at --ink-3, 3.9:1 on the toolbar. The two viewers name it differently: .cv-savestate and .ta-chip. */ html[data-theme="dark"] .cv-savestate, html[data-theme="dark"] .cv-savestate .txt, html[data-theme="dark"] .ta-chip, html[data-theme="dark"] .ta-chip .txt { color: var(--ink-2); } /* Shaded table headers are a filled brand/blue bar carrying white labels. The generic `.table thead th { color: var(--ink-2) }` above is right for a transparent header but wrong here — it dropped these to 2.5:1. */ html[data-theme="dark"] tr.header-shaded th, html[data-theme="dark"] .header-shaded th, html[data-theme="dark"] .header-shaded { color: #fff; } html[data-theme="dark"] tr.header-shaded { background-color: var(--brand-fill); } /* ── Community (community.css) ── Posts and replies are pale blue/green cards with page-coloured text: 1.1:1 once the page went dark. Each keeps its hue as a deep tint. */ html[data-theme="dark"] .post-item { background-color: var(--surface); box-shadow: var(--shadow-sm); } html[data-theme="dark"] .post-item .query { background-color: #1b3448; border-left-color: #3f7db3; } html[data-theme="dark"] .post-item .response-item { background-color: #1e3d2b; border-left-color: #35935a; box-shadow: var(--shadow-sm); } html[data-theme="dark"] .btn-outline-danger { color: var(--danger); border-color: var(--danger); } html[data-theme="dark"] .btn-outline-danger:hover { background: var(--danger-fill); color: #fff; } /* ── Take-a-quiz (inline