(lib/templates/
activity_header.mustache — shared by every module, not just quiz). It
commonly carries inline font-family/style overrides from the editor but
essentially never an inline colour, so its text just inherits Boost's
near-black default and goes the same illegible way as the plain
fix further up. One rule on the wrapper is enough —
- /
- //
inside it all inherit color normally since nothing here sets its own. */
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .activity-description {
color: #e8eaf0;
}
/* Bootstrap's .card component (e.g. the quiz attempt summary cards) paints
its own explicit background the same way .generaltable did, via
var(--bs-body-bg)/var(--bs-card-cap-bg) rather than inheriting the page
background, so it needs the same direct treatment — wherever a .card
turns up under dark mode, not just on the quiz page. */
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .card {
background-color: #182234;
border-color: #2a3346;
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .card-header,
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .card-footer {
background-color: #1e293d;
border-color: #2a3346;
}
/* Bootstrap's .alert-* variants (teacher-authored callouts inside forum
posts, page content, etc — as opposed to .card/.generaltable, which are
Moodle chrome) each paint their own light pastel background straight from
Bootstrap's colour variables, the same way .card/.generaltable do above,
so they need the same direct per-variant treatment. Unlike those two,
sites in production have been seen shipping their own sitewide "!important"
background/border overrides for these exact classes (theme colour
customisations, typically), which plain specificity — however many
selectors deep — can never beat; matched with !important here for the
same reason .text-muted is above. */
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-primary {
background-color: #142943 !important; /* stylelint-disable-line declaration-no-important */
border-color: #2a4a7a !important; /* stylelint-disable-line declaration-no-important */
color: #5b9bf5 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-secondary {
background-color: #1e293d !important; /* stylelint-disable-line declaration-no-important */
border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
color: #a8b0c3 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-success {
background-color: #0f2e22 !important; /* stylelint-disable-line declaration-no-important */
border-color: #1a4a37 !important; /* stylelint-disable-line declaration-no-important */
color: #34d399 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-danger {
background-color: #3a1418 !important; /* stylelint-disable-line declaration-no-important */
border-color: #5c2028 !important; /* stylelint-disable-line declaration-no-important */
color: #f87171 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-warning {
background-color: #3a2e0f !important; /* stylelint-disable-line declaration-no-important */
border-color: #5c491a !important; /* stylelint-disable-line declaration-no-important */
color: #fbbf24 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-info {
background-color: #0f2c3a !important; /* stylelint-disable-line declaration-no-important */
border-color: #1a4a5c !important; /* stylelint-disable-line declaration-no-important */
color: #5bc0f8 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-light {
background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */
border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-dark {
background-color: #0f1420 !important; /* stylelint-disable-line declaration-no-important */
border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
/* An alert's dismiss button and any .alert-link inherit Bootstrap's
near-black default text colour the same way headings/labels did above. */
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert .btn-close {
filter: invert(1) brightness(1.4);
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .alert-link {
color: inherit !important; /* stylelint-disable-line declaration-no-important */
text-decoration: underline;
}
/* A handful of other Bootstrap components paint the same kind of explicit
light background/dark text that .card, .generaltable and .alert-* do
above, and turn up often enough across ordinary Moodle pages (forum post
actions, the user menu, feedback dialogs, plain text inputs) to need the
same direct override. Backgrounds/borders carry !important for the same
sitewide-override reason the .alert-* block above does; the text colours
are given it too since they sit in the same rule and a partial win would
leave dark text on a dark background, which is worse than the original
problem. */
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .dropdown-menu {
background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */
border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .dropdown-item {
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .dropdown-item:hover,
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .dropdown-item:focus {
background-color: #1e293d !important; /* stylelint-disable-line declaration-no-important */
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .dropdown-divider {
border-top-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .list-group-item {
background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */
border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .modal-content {
background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */
color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */
}
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .modal-header,
body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .modal-footer {
border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */
}
/* Moodle still raises some dialogues through the older YUI widget stack
rather than Bootstrap — the quiz preflight "Start attempt" check and the
activity chooser are the two common ones — and those never carry
.modal-content, so none of the modal rules above reach them. Same
treatment, applied to the YUI wrapper instead.
`color` on the wrapper is what fixes the body copy: .form-control-static
(the preflight message) is not styled by Boost at all, so like the CoIFish
diagnostics it simply inherits from . Setting it on the container
rather than the individual elements means anything else these dialogues
render inherits it too, and any descendant that does declare its own
colour still wins.
The header needs its own entry despite that: Boost sets `color: initial`
on .moodle-dialogue-hd, which resolves to black and blocks inheritance.
Its
title escapes that via the heading rule earlier in this file — which is why the titles already looked right — but the close button is an `×` glyph drawn with ::after content, so it takes the header's colour and was being painted black on a dark bar. Recolouring the header catches it without needing a separate rule, and no filter trick: unlike .btn-close's background image, this one is text. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .moodle-dialogue-base .moodle-dialogue-wrap { background-color: #182234; border-color: #2a3346; color: #e8eaf0; box-shadow: 0 0 10px #b6bdff; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd { color: #e8eaf0; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .moodle-dialogue .moodle-dialogue-bd .content-lightbox { background: #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .breadcrumb { background-color: transparent !important; /* stylelint-disable-line declaration-no-important */ } /* The right-hand blocks drawer (#page.drawers is its outer scroll container, already darkened above; .drawer is the sliding panel itself, drawn by Boost with its own literal #f8f9fa background — a plain single-class selector, so no !important needed here to win. Blocks inside it render as .card, already covered elsewhere in this file, so this only needs to handle the drawer chrome: the panel background, the scrollbar (both the standard scrollbar-color property and its Webkit ::-webkit-scrollbar-* equivalent), and the header's scrolled-state shadow, which is tuned for a light panel and all but disappears against a dark one. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawer { background-color: #182234; } /* boost_union's own sticky-header feature paints .drawerheader with its own translucent white — rgb(255 255 255 / .7) — layered on top of whatever .drawer sits behind it, so even with the drawer panel itself now dark the header band reads as a washed-out light strip. Our usual compound selector outranks that bare .drawerheader class the same way it wins everywhere else in this file. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawerheader { background-color: rgb(24 34 52 / 0.85); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawer.scrolled .drawerheader { box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.6); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawercontent { scrollbar-color: #4a5568 #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawercontent::-webkit-scrollbar-track { background: #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawercontent::-webkit-scrollbar-thumb { background-color: #4a5568; border-color: #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .drawercontent::-webkit-scrollbar-thumb:hover { background-color: #5b6578; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .breadcrumb-item, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .breadcrumb-item a { color: #a8b0c3 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .form-control, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .form-select, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] textarea, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] select, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] input[type="text"], body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] input[type="email"], body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] input[type="number"], body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] input[type="search"], body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] input[type="password"] { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .form-control:focus, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .form-select:focus { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } /* Placeholder text (e.g. "Search users" in the gradebook's user search) is a pseudo-element with its own colour rule, so the field's own `color` fix above never reaches it no matter how much !important it carries. Boost gives it var(--bs-secondary-color) — rgba(29, 33, 37, 0.75), a near-black tuned for a white field and effectively invisible on a dark one. Given the file's established muted tone rather than full-strength body text, since a placeholder is a hint and should stay subordinate to real input. No !important needed: Bootstrap's own rule carries none. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .form-control::placeholder { color: #a8b0c3; } /* An unchecked checkbox/radio paints its box from --bs-form-check-bg, which Bootstrap defines as var(--bs-body-bg) — white, regardless of the page's own dark background — with a mid-grey border. Redeclaring the custom property here is the same override mechanism used for the plain .table fix earlier in this file; the checked state already paints a solid accent-blue box regardless of page background, so it needs no separate fix. No !important: Boost's own .form-check-input rule doesn't carry one either, so our extra specificity is already enough. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .form-check-input { --bs-form-check-bg: #182234; border-color: #4a5568; } /* The section/preferences collapse-expand toggle (.icons-collapse-expand) is a second, more specific .btn-icon rule — two classes rather than one — that paints its own light pill (a pale blue background behind a blue chevron) rather than inheriting the plain .btn-icon colour fix above, so it needs its own override at matching specificity. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-icon.icons-collapse-expand { background-color: #1e293d; color: #5b9bf5; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-icon.icons-collapse-expand:hover { outline-color: #5b9bf5; } /* Moodle's combobox widgets (the gradebook's "Grader report" report picker, its "Filter by name" initials widget, the single view grade search) render as a bare .btn with no colour variant, so Bootstrap gives them --bs-btn-color: var(--bs-body-color) — near-black, and var(--bs-body-color) is left alone here for the same reason var(--bs-body-bg) is. role="combobox" on a .btn.dropdown-toggle is core Moodle's own convention for these (lib/templates/select_menu.mustache and comboboxsearch.mustache both emit exactly that pairing), which makes it a far steadier hook than the incidental utility classes around it, and narrow enough not to touch the variant buttons (.btn-primary and friends) that set their own --bs-btn-color and would be broken by a blanket .btn rule. --bs-btn-hover-color is set alongside because bare .btn never defines it: the var() reference is invalid, `color` falls back to the inherited value, and the hover colour would otherwise depend on whatever happens to wrap the widget. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn.dropdown-toggle[role="combobox"] { --bs-btn-color: #e8eaf0; --bs-btn-hover-color: #fff; } /* Outline buttons (e.g. CoIFish's "Log intervention") draw their resting state as coloured text on a transparent fill, and Boost deliberately darkens Bootstrap's stock values — #0f6cbf, #357a32, #ca3120, #a6670e, #1f7e9a — to hit AA against a white page, which leaves them barely separable from a dark one. Only the resting and disabled states need lifting: hover, focus and active all fill with that same colour and put white text on top, so they already read correctly whatever the page behind them (which matches the reported behaviour — these buttons look fine on hover and only fail at rest). Disabled reuses the lifted colour and keeps Bootstrap's own --bs-btn-disabled-opacity: 0.65 to stay visibly subordinate, rather than being dimmed twice into invisibility. Hues come from the palette the .alert-* and CoIFish blocks already use. .btn-outline-light is left alone: it is light by definition and is the one variant that was already legible here. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-primary { --bs-btn-color: #5b9bf5; --bs-btn-border-color: #5b9bf5; --bs-btn-disabled-color: #5b9bf5; --bs-btn-disabled-border-color: #5b9bf5; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-secondary { --bs-btn-color: #a8b0c3; --bs-btn-border-color: #a8b0c3; --bs-btn-disabled-color: #a8b0c3; --bs-btn-disabled-border-color: #a8b0c3; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-success { --bs-btn-color: #34d399; --bs-btn-border-color: #34d399; --bs-btn-disabled-color: #34d399; --bs-btn-disabled-border-color: #34d399; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-border-color: #f87171; --bs-btn-disabled-color: #f87171; --bs-btn-disabled-border-color: #f87171; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-warning { --bs-btn-color: #fbbf24; --bs-btn-border-color: #fbbf24; --bs-btn-disabled-color: #fbbf24; --bs-btn-disabled-border-color: #fbbf24; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-info { --bs-btn-color: #5bc0f8; --bs-btn-border-color: #5bc0f8; --bs-btn-disabled-color: #5bc0f8; --bs-btn-disabled-border-color: #5bc0f8; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .btn-outline-dark { --bs-btn-color: #e8eaf0; --bs-btn-border-color: #7c8598; --bs-btn-disabled-color: #e8eaf0; --bs-btn-disabled-border-color: #7c8598; } /* Bootstrap's tooltip/popover components render in a portal appended to , outside every wrapper above, but the body-level dark-theme attribute this whole section keys off is still their ancestor, so they are reachable the same way .dropdown-menu is. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .popover { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .popover-header { background-color: #1e293d !important; /* stylelint-disable-line declaration-no-important */ border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .popover-body { color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .tooltip .tooltip-inner { background-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } /* The quiz overview report's "Highest grade" indicator (and any other #page-mod-quiz-report .highlight) gets a light blue pill from mod_quiz's own styles.css (border: 1px solid #bce8f1; background-color: #d9edf7), layered under Boost's separate .highlight { color: #008196 } text-colour rule. Neither was designed against a dark page, so the pill reads as an odd light patch. Scoped to the quiz report specifically, rather than the bare .highlight class Boost also uses for e.g. search-term highlighting elsewhere, which should keep its own light styling untouched. #page-mod-quiz-report is Moodle's own body id for this page — the same element the .format-simple class and [data-simple-theme] attribute live on — so this has to be one compound selector (no space before the id) rather than body-then-descendant like the rest of this file; written as a descendant combinator it would look for a *nested* element with that id, which doesn't exist, and silently match nothing. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"]#page-mod-quiz-report .highlight { background-color: #007dbb; border-color: #007dbb; color: #fff; } /* The A-Z name-filter bar (.initialbargroups, e.g. the quiz overview report's "First name"/"Last name" jump links) is Bootstrap's .pagination component, themed entirely through --bs-pagination-* custom properties — --bs-pagination-bg defaults to var(--bs-body-bg), i.e. always white — the same override mechanism already used for .table earlier in this file. The active/current-letter state (--bs-pagination-active-bg, solid blue with white text) already reads fine against a dark page as-is, so it is left untouched. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .pagination { --bs-pagination-bg: #182234; --bs-pagination-border-color: #2a3346; --bs-pagination-hover-bg: #1e293d; --bs-pagination-hover-border-color: #2a3346; --bs-pagination-focus-bg: #1e293d; --bs-pagination-disabled-bg: #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .initialbarlabel { color: #e8eaf0; } /* mod_quiz ships its own styles.css (a third stylesheet, separate from Boost/Boost Union) that paints the attempt-summary table's cells with literal greys — table.quizreviewsummary th.cell/td.cell — bypassing the .generaltable fix above entirely, since these more specific selectors (element+class, twice) outrank a single .generaltable class. Matched here at the same specificity so ours wins. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] table.quizreviewsummary th.cell { background: #1e293d; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] table.quizreviewsummary td.cell { background: #182234; } /* Same problem again: mod_quiz/styles.css marks a fully-graded attempt's row (tr.gradedattempt, in the overview report table) with the same light blue used for the "highest grade" pill — border-color: #bce8f1; background-color: #d9edf7 — via body.path-mod-quiz .gradedattempt and two more selectors for the cells themselves (a plain
and the sticky name column need separate rules since the sticky column is repositioned and would otherwise poke out from under a row-level background). .path- mod-quiz is a second class Moodle puts directly on , alongside .format-simple, so it chains onto our usual selector as one more compound class rather than a descendant — the same fix as the #page-mod-quiz-report id lesson, just via a class instead of an id. Setting the border-color shorthand (not just border-top-color, which the general .generaltable fix already covers) matters here — it's what was still leaving a light sliver on the other three edges of each row after that top-only fix. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"].path-mod-quiz .gradedattempt, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"].path-mod-quiz table tbody tr.gradedattempt > td, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"].path-mod-quiz table tbody tr.gradedattempt > td.sticky-column { border-color: #1e5a7d; background-color: #0f3a52; } /* A quiz question's .formulation (the question text itself), .outcome and .comment (feedback panels) all paint their own explicit light pastel background plus a matching dark text colour, the same way .generaltable and .card do — so the general p/li text-colour fix elsewhere in this file never reaches them; their own `color` declaration always wins over an inherited one regardless of specificity. Each pairing below is darkened together for exactly that reason: fixing only the background would leave the box's own dark text sitting on top of it. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .formulation { background-color: #182234; border-color: #2a3346; color: #e8eaf0; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .outcome { background-color: #3a2e0f; border-color: #5c491a; color: #fbe6cf; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .comment { background-color: #0f2e22; border-color: #1a4a37; color: #cdf2e2; } /* The question-number/state/grade/flag sidebar (.que .info) is Boost chrome with its own hardcoded light-grey panel — same "light box left behind on a dark page" issue .activity-header had elsewhere in this file — but, unlike .formulation above, it sets no colour of its own on its child divs (.state, .grade), which just inherit Boost's ordinary near-black body text. That text needs its own fix here since .info > div is neither a p/li (covered by the general rich-text rule) nor part of .formulation. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .info { background-color: #182234; border-color: #2a3346; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .info > div { color: #e8eaf0; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .editquestion a { color: #cfe0fb; } /* The draggable word/answer pills in this drag-and-drop question type (.draggable.answers) turned out not to inherit a usable colour from .formulation the way assumed above — confirmed against the live question rather than that type's own stylesheet, which isn't present in this project's codebase to inspect. Given an explicit background here rather than one inferred blind. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .que .draggable.answers { background: #0b4376; color: #e8eaf0; } /* plagiarism_copyleaks's report widget (shown under a submitted assignment or forum post) is a third-party plugin not present in this project's own codebase to inspect directly, unlike the Boost/tiny_c4l/widgethub rules above — its light-card-plus-dark-text pattern is inferred from its class names rather than confirmed against its actual stylesheet, so this is a best-effort dark treatment rather than a verified one. !important is used defensively for that same reason: without sight of the source rules, this assumes they may be at least as specific, the same posture taken for the .alert-* and .twh-callout rules above when a rule turned out to carry !important itself. The small score-level indicator dot is left alone — it is almost certainly a solid semantic colour (green/amber/red for low/medium/high), which stays legible on any background and risks looking wrong if recoloured blind. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .cls-large-report-details { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ border-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .cls-text-result, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .cls-score-container { color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } /* Bootstrap's .text-muted resolves to a mid-grey that disappears against the dark page background — matched to the same colour the fix below uses, so muted and regular body text stay a single consistent shade. Boost's own .text-muted rule is the one genuinely unavoidable case in this file: it carries !important itself, so a plain declaration — however specific — can never beat it; matching it here is the only way to win, hence the explicit sniff exemption. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .text-muted { color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } /* The automatic-completion badges' mix-blend-mode fix now lives with the other .badge rules further down, keyed to the background utility rather than to :first-child. core_course/completion_automatic.mustache only ever emits three variants — .bg-success and .bg-danger for met/failed conditions, and .bg-light.text-dark for pending ones — so :first-child was wrong in both directions: it caught whichever pill happened to come first, including a coloured one that needs no help, and missed the second pending pill entirely. */ /* Body copy inside an activity (mod/page and friends render their own rich text directly, outside the format's own wrapper) is still Boost's near-black default text colour, effectively invisible on the dark page background introduced above. This is reading content, so it gets pushed well past the general AA text minimum: #e8eaf0 against the #0f1420 page background and #182234 card surface both measure comfortably above a 6:1 contrast ratio. Covers the plain-text elements a rich-text editor actually produces — not span/div, which carry too much unrelated UI (badges, pills, icons) to recolour wholesale. .text_to_html is the one div-level exception: it is the exact wrapper format_text() puts around FORMAT_HTML content (forum posts, feedback, etc — lib/outputrenderers.php), so it is exactly as narrowly scoped as p/ul/li above, and it needs its own entry because Moodle sometimes fills it with bare text nodes and
rather thanchildren, which the element list above never reaches. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] p, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] ul, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] ol, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] li, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] dl, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] dt, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] dd, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] blockquote, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .text_to_html { color: #e8eaf0; } /* A checkbox/advcheckbox form element's inline description — the text passed as its second label, rendered as a bare right next to the input (lib/form/templates/element- checkbox.mustache, element-advcheckbox.mustache) — carries no class at all, so neither a class-based fix nor the p/li list above (span is deliberately excluded there, as it carries too much unrelated UI) can reach it. Moodle only ever uses this "_description" id suffix for this one purpose, so the attribute selector is safe to match sitewide rather than needing to be re-scoped per form. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] span[id$="_description"] { color: #e8eaf0; } /* Activity/resource card titles (.aalink) inherit Boost's default link colour, which is too dark to read comfortably against the dark card surface. Lightened to rgba(96, 165, 226, 1) — checked at ~6:1 contrast against the dark surface/background tokens above. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .format-simple-wrapper .aalink { color: rgba(96, 165, 226, 1); } /* Two spots build their active-tab gradient from a literal light-mode hex rather than the accent-light token; point them at the token so dark mode repaints them too. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-nav-item.is-active, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-nav.is-collapsed .simple-nav-item.is-active { background: linear-gradient(to right, var(--simple-accent-light), var(--simple-bg)); } /* ---- Progress ring SVGs ---- These circles are drawn with literal fill/stroke attributes (inline SVG presentation attributes carry the lowest CSS priority), so any rule here wins over them without needing !important. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-progress-bg { stroke: var(--simple-border); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-progress-bar { stroke: var(--simple-success); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-progress-svg.is-complete circle { fill: var(--simple-success); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-progress-svg.is-complete polyline { stroke: var(--simple-surface); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-progress-svg.is-notstarted circle { stroke: var(--simple-border); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-progress-svg.is-untracked circle { fill: var(--simple-border); } /* ---- tiny_c4l ("Content for Learning") and Widget Hub callouts ---- These TinyMCE-inserted content blocks (lib/editor/tiny/plugins/c4l/ styles.css) are teacher-authored rich text, so they turn up anywhere format_text() runs — course content, forum posts, assignment feedback — same as .text_to_html above. Each variant hardcodes its own light pastel background plus, in most cases, no explicit text colour of its own (it inherits the surrounding paragraph colour), which is exactly why the general p/li dark-text rule above was enough to make the text legible but left the light pastel background behind it — light text on a light card. Both halves are overridden together here. The plugin emits two class prefixes for the same components — c4l- (editor/edit-mode markup) and c4lv- (viewer/rendered markup) — so both are targeted throughout. !important matches the .alert-* treatment above: this is another plugin's CSS painting its own explicit colours, external to this stylesheet's own cascade. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-keyconcept, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-keyconcept, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-allpurposecard, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-allpurposecard, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-learningoutcomes, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-learningoutcomes, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-tag, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-tag, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-estimatedtime, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-estimatedtime, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-duedate, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-duedate, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-gradingvalue, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-gradingvalue { background-color: #142943 !important; /* stylelint-disable-line declaration-no-important */ color: #cfe0fb !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-keyconcept, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-keyconcept { border-left-color: #5b9bf5 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-tip, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-tip { background-color: #3a1a34 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #d16fc4 !important; /* stylelint-disable-line declaration-no-important */ color: #f0d9ec !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-reminder, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-reminder { background-color: #0f2c3a !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #5bc0f8 !important; /* stylelint-disable-line declaration-no-important */ color: #d3edfb !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-attention, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-attention { background-color: #3a2a12 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #fbbf24 !important; /* stylelint-disable-line declaration-no-important */ color: #fbe6cf !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-dodontcards-do, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-dodontcards-do { background: #0f2e22 !important; /* stylelint-disable-line declaration-no-important */ color: #cdf2e2 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-dodontcards-dont, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-dodontcards-dont { background: #3a1418 !important; /* stylelint-disable-line declaration-no-important */ color: #f9d6d9 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-readingcontext, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-readingcontext, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-example, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-example, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-expectedfeedback, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-expectedfeedback, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-conceptreview, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-conceptreview, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-furtherreading, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-furtherreading { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-example h1, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-example h1 { color: #5b9bf5 !important; /* stylelint-disable-line declaration-no-important */ border-bottom-color: #5b9bf5 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-conceptreview .c4l-concept-review-title, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-conceptreview .c4l-concept-review-title { color: #d16fc4 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-furtherreading .c4l-further-reading-title, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-furtherreading .c4l-further-reading-title { color: #5bc0f8 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-aiuseallowed, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-aiuseallowed { background-color: #0f2e22 !important; /* stylelint-disable-line declaration-no-important */ color: #34d399 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-aiusenotallowed, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-aiusenotallowed { background-color: #3a1418 !important; /* stylelint-disable-line declaration-no-important */ color: #f87171 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-aiusereported, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-aiusereported { background-color: #3a2a12 !important; /* stylelint-disable-line declaration-no-important */ color: #fbbf24 !important; /* stylelint-disable-line declaration-no-important */ } /* Text-only variants: no background of their own, just a hardcoded literal colour tuned for a white page, too dark to read against the dark page background/card surfaces introduced above. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-proceduralcontext, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-proceduralcontext { color: #93b4f5 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4l-figure figcaption, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .c4lv-figure figcaption { color: #a8b0c3 !important; /* stylelint-disable-line declaration-no-important */ } /* .c4l-learningoutcomes-title keeps its own solid blue pill with white text in both themes — already legible against a dark card, so left untouched. */ /* ---- Plain Bootstrap .table (Widget Hub tables, etc.) ---- Unlike .generaltable, this is stock Boost/Bootstrap 5 table CSS, which themes itself through custom properties rather than literal colours: .table > :not(caption) > * > * reads background-color from var(--bs-table-bg), which .table itself defines as var(--bs-body-bg) — i.e. always white, regardless of the page's own dark background — and text colour from var(--bs-table-color)/var(--bs-emphasis-color), always near-black. Redeclaring those same custom properties here, on the same .table element the originals are declared on, is the override mechanism Bootstrap's own table theming is built around — it needs no !important and no fight over descendant-selector specificity, since every cell underneath simply reads the new values through the same var() call. table-group-divider's border-top: ... solid currentcolor follows the text-colour fix automatically, for the same reason. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .table { --bs-table-bg: #182234; --bs-table-color: #e8eaf0; --bs-emphasis-color: #e8eaf0; --bs-table-border-color: #2a3346; border-color: #2a3346; } /* ---- Bootstrap utility backgrounds (e.g. a "jumbotron" bg-light panel) ---- Every Bootstrap .bg-* utility carries !important itself (it is meant to always win over a component's own background), so overriding it needs the same exemption already used for .text-muted/.alert-* above — no selector, however specific, beats it without matching that !important. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .bg-light { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ } /* .bg-white and .bg-body-tertiary turn up in the unified grading panel's own header (mod_assign/mod_quiz's marking interface) — same story as .bg-light above, and the same !important is required for the same reason. .bg-white reads rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) rather than a plain background-color, but that only affects how Bootstrap computes ITS value; ours still overrides the resulting background-color property outright. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .bg-white { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .bg-body-tertiary { background-color: #1e293d !important; /* stylelint-disable-line declaration-no-important */ } /* Darkening those .bg-* utilities above leaves anything pairing them with a .text-dark/.text-black utility (activity completion badges are the common case: .badge.rounded-pill.bg-light.text-dark) with near-black text on a now-dark fill. Those text utilities carry their own !important, so this needs one too. Deliberately keyed to the three surfaces this file actually darkens rather than to .text-dark on its own: on a fill that is still genuinely light in dark mode — .bg-warning, .bg-info and friends, which are untouched — near-black is the *correct* pairing, and a blanket .text-dark override would wreck exactly those, the same trap the CoIFish black-on-cyan badge posed. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] :is(.bg-light, .bg-white, .bg-body-tertiary):is(.text-dark, .text-black) { color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } /* A badge is a chip that has to separate from whatever it sits on, and these sit on cards this file already paints #182234 — so the plain .bg-light mapping above would render them the same tone as their own background and make them all but disappear, which is the second half of the reported problem. Badges therefore get the elevated surface tone used elsewhere for tracks and tooltips instead. Higher specificity than the .bg-* rules above (two classes rather than one), so this wins for badges while panels keep the flatter tone that suits them against the page. plus-lighter then adds the chip to whatever is behind it rather than covering it, which lifts it clear of the card without having to hardcode a brighter tone: over the #182234 card the #2a3346 fill lands around #42557a. Being backdrop-relative is the point — it keeps its separation over the page, a card or a modal alike — but it is also the caveat: on a genuinely light surface the chip and its text would both blow out towards white. These badges only ever sit on dark surfaces in this theme, so that case does not arise today; if it ever does, a flat background-color: #42557a reproduces the same look here without the blend. invert(1) then flips the chip to a bright, near-white pill so it actually registers as a chip rather than a slightly lighter patch of card. Filters apply before blending, so the two compose predictably: the #2a3346 fill inverts to a light tan and the blend lifts it to roughly #ededed, while the text inverts from #e8eaf0 down to a dark slate that lands near #2f3743 over it — around 11:1, comfortably legible. That text path is deliberately roundabout and worth knowing before editing: the .text-dark override above lightens the text precisely so this inversion can bring it back down. Change one without the other and the pill loses its contrast. This also carries the mix-blend-mode fix these badges used to get from a separate :first-child rule (removed above): Boost sets multiply on .path-mod .automatic-completion-conditions .badge, which crushes a light pill toward black on a dark page. That selector is (0,3,0) against this one's (0,5,1), so this wins without needing !important, and it applies to both pending pills while leaving the .bg-success/.bg-danger ones alone — inverting those would send green to magenta. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .badge:is(.bg-light, .bg-white, .bg-body-tertiary) { background-color: #2a3346 !important; /* stylelint-disable-line declaration-no-important */ mix-blend-mode: plus-lighter; filter: invert(1); } /* The unified grader's own nav dropdown (local_unifiedgrader) paints a literal white background — no !important, so our usual extra specificity is enough on its own, unlike the Bootstrap .bg-* utilities above. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .local-unifiedgrader-nav-dropdown { background-color: #182234; border-color: #2a3346; } /* The grade-entry input group's addon spans (e.g. the unified grader's "/ 40" max-grade and "(73%)" percentage badges either side of the grade input) read background-color from var(--bs-tertiary-bg) — Boost's light grey, not the page's own dark background. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .input-group-text { background-color: #1e293d; border-color: #2a3346; color: #e8eaf0; } /* The unified grader's student-profile popout (local_unifiedgrader) is another literal #fff background/light border, same story as the nav dropdown and grade addons above. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .local-unifiedgrader-profile-popout { background: #182234; border-color: #2a3346; } /* The gradebook grader report (#user-grades / .gradereport-grader-table) doesn't get its cell backgrounds from Bootstrap's own .table machinery at all — Boost's compiled CSS carries a grader-specific rule that paints every .cell with background-color: var(--bs-body-bg) directly, bypassing the --bs-table-bg override on .table used everywhere else in this file (var(--bs-body-bg) is never touched by that fix, deliberately, since redefining it sitewide would be much harder to audit for side effects than overriding --bs-table-bg per component). .path-grade-report-grader is one of the path-* classes Moodle builds from the script path and puts on itself (lib/pagelib.php), so it chains onto our selector as another compound class — with a space it would be asking for a nested element that does not exist and would match nothing at all, which is exactly the trap the #page-mod-quiz-report highlight fix further up this file already documents. Painting the cells is also the only thing that works: a background on sits *behind* the cells, and these cells set their own opaque background, so it would never be visible no matter how much !important it carried. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"].path-grade-report-grader .gradeparent tr .cell, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"].path-grade-report-grader .gradeparent .floater .cell { background-color: #182234; } /* ---- Widget Hub ("tiny_widgethub") callouts ---- lib/editor/tiny/plugins/widgethub/styles.css paints .twh-callout and its four contextual variants (important/warning/example/extension) the same light-pastel-background-plus-hardcoded-dark-text way tiny_c4l's callouts do above, so they need the same paired background+text treatment. .twh-callout-body's #374151 text colour is shared by every variant (only the title/icon get a variant colour), so one rule fixes body text everywhere; the base/variant rules below only need to handle each one's distinct background, border-left accent, and title/icon colour. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-body { color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout { background-color: #182234 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #7c8598 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-important { background-color: #3a2a12 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #fbbf24 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-important .twh-callout-title, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-important .twh-callout-icon { color: #fbbf24 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-warning { background-color: #3a1418 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #f87171 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-warning .twh-callout-title, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-warning .twh-callout-icon { color: #f87171 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-example { background-color: #0f2e22 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #34d399 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-example .twh-callout-title, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-example .twh-callout-icon { color: #34d399 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-extension { background-color: #142943 !important; /* stylelint-disable-line declaration-no-important */ border-left-color: #5b9bf5 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-extension .twh-callout-title, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-callout-extension .twh-callout-icon { color: #5b9bf5 !important; /* stylelint-disable-line declaration-no-important */ } /* ---- Widget Hub quote and text-fragment components ---- .twh-quote hardcodes both a light lavender background and its own #222222 text colour (rather than inheriting the page's text colour the way the callouts above do), so both need overriding; .twh-quote cite only sets opacity, not its own colour, so fixing .twh-quote's colour fixes the citation too. The decorative oversized quote-mark glyphs (:before/:after) are a low-alpha purple tuned to sit faintly on a white card; brightened here so they stay visible at the same low-key alpha on a dark one instead of disappearing into it. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-quote { background: #182234 !important; /* stylelint-disable-line declaration-no-important */ color: #e8eaf0 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-quote::before, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-quote::after { color: rgba(139, 148, 255, 0.35) !important; /* stylelint-disable-line declaration-no-important */ } /* .twh-fragment is a "torn paper stack" effect: the visible card is a plain white background, with two ::before/::after layers in a slightly different light grey peeking out from behind at a rotation to look like loose sheets underneath — lighter than the page around it either way, so the stack reads as paper sitting on a surface. #182234/#0f1420 (this file's ordinary card-surface/page tokens) turned out to be the wrong choice here: the surrounding content area is already painted with those same two tones, so the "paper" was exactly the same colour as the table it was sitting on and vanished. This card needs its own lighter tones, one step up from --simple-surface, to actually stand out the way the white card stands out against Boost's off-white light-mode page. Main card lighter than the peeking layers, same relationship as the original #fff-over-#f6f6f6. Text colour is already handled by the general h4/p rules elsewhere in this file — .twh-fragment sets none of its own. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-fragment { background: #2a3a56 !important; /* stylelint-disable-line declaration-no-important */ } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-fragment::before, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .twh-fragment::after { background: #1e2b40 !important; /* stylelint-disable-line declaration-no-important */ } /* ---- Dark mode toggle button ---- Sits in the same fixed left rail as the cog and course-info buttons, and is appended directly to — outside the wrapper — so it cannot read the wrapper's scoped tokens and gets its own literal colours below, matching the light-mode values already used by its neighbours. */ .format-simple .simple-darkmode-wrap { position: relative; margin-top: 6px; } .format-simple .simple-darkmode-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border: none; border-radius: 0 10px 10px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); font-size: 1.25rem; color: #6b7280; cursor: pointer; transition: color 200ms, background 200ms; } .format-simple .simple-darkmode-btn:hover, .format-simple .simple-darkmode-btn[aria-expanded="true"] { color: #2563eb; background: #f0f4ff; } .format-simple .simple-darkmode-popover { position: absolute; top: 0; left: 48px; background: #fff; border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06); padding: 16px; opacity: 0; pointer-events: none; transform: translateX(-12px); transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1); min-width: 220px; z-index: 1041; } .format-simple .simple-darkmode-popover.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); } .format-simple .simple-darkmode-heading { font-size: 0.6875rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px 4px; } .format-simple .simple-darkmode-options { display: flex; flex-direction: column; gap: 4px; } .format-simple .simple-darkmode-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #374151; font-size: 0.8125rem; font-weight: 500; text-align: left; cursor: pointer; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .format-simple .simple-darkmode-option i { width: 18px; text-align: center; color: #6b7280; } .format-simple .simple-darkmode-option:hover { background: #f0f4ff; } .format-simple .simple-darkmode-option.is-active { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; } .format-simple .simple-darkmode-option.is-active i { color: #1d4ed8; } .format-simple .simple-darkmode-schedule { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e7eb; } .format-simple .simple-darkmode-timelabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.75rem; color: #6b7280; } .format-simple .simple-darkmode-timelabel input[type="time"] { border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 6px; font-size: 0.75rem; color: #1a1a1a; background: #fff; } /* The toggle button itself lives outside the wrapper's dark scope, so it needs its own dark palette to match the rest of the fixed rail below. Now that the outer page background goes dark too (see below), these buttons are lifted a shade lighter than that background, with a border and a paler shadow, so they still read as distinct floating tabs rather than blending into the page behind them. */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-btn, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-btn, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-home-btn, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-s0-modal-btn { background: #1e293d; color: #a8b0c3; border: 1px solid #2f3b54; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-btn:hover, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-btn[aria-expanded="true"], body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-btn:hover, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-home-btn:hover, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-s0-modal-btn:hover { background: #142943; color: #5b9bf5; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-btn.is-open { background: #142943; color: #5b9bf5; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-popover, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-popover { background: #1e293d; border: 1px solid #2f3b54; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2); } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-heading, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-heading { color: #7c8598; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-option, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-tile { color: #a8b0c3; background: #26324a; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-option i { color: #a8b0c3; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-option:hover, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-tile:hover { background: #142943; color: #5b9bf5; border-color: #1e3a5f; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-option.is-active, body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-tile.is-active { background: #16304d; border-color: #2b5484; color: #8fbdfb; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-option.is-active i { color: #8fbdfb; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-tile-icon { background: #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-cog-tile.is-active .simple-cog-tile-icon { background: #5b9bf5; color: #0f1420; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-schedule { border-top-color: #2a3346; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-timelabel { color: #a8b0c3; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-darkmode-timelabel input[type="time"] { background: #0f1420; border-color: #2a3346; color: #e8eaf0; color-scheme: dark; } /* ---- Section 0 modal (also outside the wrapper) ---- */ body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-s0-modal { background: #182234; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-s0-modal-close { background: rgba(255, 255, 255, 0.08); color: #a8b0c3; } body.format-simple[data-simple-theme="dark"][data-simple-theme="dark"] .simple-s0-modal-close:hover { background: rgba(255, 255, 255, 0.15); color: #e8eaf0; } /* ---- Native form controls, scrollbars ---- Tells the browser to draw its own chrome (scrollbars, date/time pickers, and — see the dropdown fix below — a