/* * Dark colour mode for the admin shell. * * Why this file exists rather than a vendor dark build: the free Materio package ships no dark * stylesheet, and the active theme (vendor/css/theme-01.css, "EduPro") paints surfaces with * hardcoded hex values instead of CSS variables. So redefining Bootstrap tokens alone is not * enough — the hardcoded rules have to be overridden too. * * Load order matters and is easy to get wrong: this must be the LAST stylesheet in the document — * after core.css / theme-01.css / demo.css / site.css AND after the per-page sheets injected by the * PageStyles section (qbank-test-generator.css, notepad-editor.css). It is therefore linked at the * end of in Views/Shared/_CommonMasterLayout.cshtml, not in Sections/_Styles.cshtml. * * Everything is scoped to [data-bs-theme="dark"], so light mode is byte-for-byte unchanged. * * NOTE ON !important: the light theme uses !important on several surfaces, and ~9 views set inline * style="background:#fff". An author !important declaration outranks a normal inline style, which is * why it is used deliberately here rather than as a shortcut. */ [data-bs-theme="dark"] { /* ---- palette -------------------------------------------------------- */ --eb-bg: #16181d; /* app background */ --eb-surface: #1e2128; /* cards, menus, modals */ --eb-surface-2: #262a33; /* raised / hover */ --eb-surface-3: #2f343f; /* input, active */ --eb-border: #363b45; --eb-text: #dfe3ea; --eb-text-muted: #a2a9b6; --eb-text-dim: #7d8593; --eb-primary: #6f9dff; /* lifted from #2563EB for contrast on dark */ --eb-primary-strong: #8fb4ff; color-scheme: dark; /* native scrollbars, form controls, date pickers */ /* ---- bootstrap tokens ----------------------------------------------- */ --bs-body-bg: var(--eb-bg); --bs-body-bg-rgb: 22, 24, 29; --bs-body-color: var(--eb-text); --bs-body-color-rgb: 223, 227, 234; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-heading-color: #f2f5f9; --bs-secondary-color: var(--eb-text-muted); --bs-secondary-bg: var(--eb-surface-2); --bs-tertiary-color: var(--eb-text-dim); --bs-tertiary-bg: var(--eb-surface); --bs-border-color: var(--eb-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-link-color: var(--eb-primary); --bs-link-color-rgb: 111, 157, 255; --bs-link-hover-color: var(--eb-primary-strong); --bs-light: #2a2f38; --bs-light-rgb: 42, 47, 56; --bs-dark: #e6e9ef; --bs-dark-rgb: 230, 233, 239; --bs-card-bg: var(--eb-surface); --bs-card-border-color: var(--eb-border); --bs-dropdown-bg: var(--eb-surface-2); --bs-dropdown-color: var(--eb-text); --bs-dropdown-border-color: var(--eb-border); --bs-dropdown-link-color: var(--eb-text); --bs-dropdown-link-hover-bg: var(--eb-surface-3); --bs-dropdown-link-hover-color: #fff; --bs-modal-bg: var(--eb-surface); --bs-modal-border-color: var(--eb-border); --bs-accordion-bg: var(--eb-surface); --bs-accordion-color: var(--eb-text); --bs-accordion-border-color: var(--eb-border); --bs-table-bg: transparent; --bs-table-color: var(--eb-text); --bs-table-border-color: var(--eb-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); } /* ---- dashboard design tokens --------------------------------------------- site.css defines its own --db-* token set at :root for the dashboard (KPI values, charts, schedule cards). Those are what made the KPI numbers invisible: --db-text is #1a1d26, i.e. near-black text that survived onto a dark surface. Redefining the tokens fixes every component that consumes them in one place, which is far better than chasing individual selectors. */ [data-bs-theme="dark"] { --db-bg: var(--eb-bg); --db-surface: var(--eb-surface); --db-border: var(--eb-border); --db-border-hover: #454b57; --db-text: var(--eb-text); --db-text-secondary: var(--eb-text-muted); --db-text-muted: var(--eb-text-dim); /* Accents keep their hue but are lifted so they read on a dark ground. */ --db-primary: #a58bff; --db-primary-light: rgba(165, 139, 255, 0.16); --db-success: #4ade80; --db-success-light: rgba(74, 222, 128, 0.16); --db-info: #60a5fa; --db-info-light: rgba(96, 165, 250, 0.16); --db-warning: #fbbf24; --db-warning-light: rgba(251, 191, 36, 0.16); --db-danger: #f87171; --db-danger-light: rgba(248, 113, 113, 0.16); /* Shadows tuned for dark: light-mode shadows are invisible, so lean on depth instead. */ --db-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --db-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --db-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --db-shadow-glow: 0 8px 32px rgba(165, 139, 255, 0.18); } /* Surfaces in site.css that hardcode a light value rather than using a token. */ [data-bs-theme="dark"] .chart-detail-panel .dp-completion-bar, [data-bs-theme="dark"] .schedule-card .table thead th, [data-bs-theme="dark"] .passcode-block.secondary-passcode, [data-bs-theme="dark"] .apexcharts-tooltip-title { background: var(--eb-surface-2) !important; color: var(--eb-text) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .schedule-card .table tbody tr:hover td { background: var(--eb-surface-2) !important; } [data-bs-theme="dark"] .schedule-count-badge { background: rgba(251, 191, 36, .18) !important; color: #ffd166 !important; } /* ApexCharts renders inline SVG with light-mode defaults. */ [data-bs-theme="dark"] .apexcharts-text, [data-bs-theme="dark"] .apexcharts-title-text, [data-bs-theme="dark"] .apexcharts-legend-text, [data-bs-theme="dark"] .apexcharts-xaxis-label, [data-bs-theme="dark"] .apexcharts-yaxis-label { fill: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .apexcharts-gridline, [data-bs-theme="dark"] .apexcharts-grid line { stroke: var(--eb-border) !important; } [data-bs-theme="dark"] .apexcharts-tooltip { background: var(--eb-surface-2) !important; color: var(--eb-text) !important; border-color: var(--eb-border) !important; } /* ---- base ---------------------------------------------------------------- */ [data-bs-theme="dark"] body { background: var(--eb-bg); color: var(--eb-text); } [data-bs-theme="dark"] .bg-body, [data-bs-theme="dark"] .content-wrapper, [data-bs-theme="dark"] .layout-page, [data-bs-theme="dark"] .layout-wrapper { background: var(--eb-bg) !important; } [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .card-title { color: var(--bs-heading-color); } [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-body-secondary { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] hr { border-color: var(--eb-border); } /* ---- shell: menu, navbar, footer ---------------------------------------- */ [data-bs-theme="dark"] .bg-menu-theme { background-color: var(--eb-surface) !important; color: var(--eb-text); border-right: 1px solid var(--eb-border); } [data-bs-theme="dark"] .bg-menu-theme .menu-link, [data-bs-theme="dark"] .bg-menu-theme .menu-header, [data-bs-theme="dark"] .menu-vertical .menu-item .menu-link { color: var(--eb-text-muted); } [data-bs-theme="dark"] .bg-menu-theme .menu-item.active > .menu-link, [data-bs-theme="dark"] .bg-menu-theme .menu-link:hover { color: #fff; background-color: var(--eb-surface-3); } [data-bs-theme="dark"] .bg-menu-theme .app-brand-text, [data-bs-theme="dark"] .app-brand-text .bg-light { color: var(--eb-text) !important; background-color: var(--eb-surface-2) !important; } [data-bs-theme="dark"] .bg-navbar-theme { background: var(--eb-surface) !important; color: var(--eb-text); border-bottom: 1px solid var(--eb-border); } [data-bs-theme="dark"] .bg-navbar-theme .nav-link, [data-bs-theme="dark"] .bg-navbar-theme i { color: var(--eb-text) !important; } [data-bs-theme="dark"] .bg-footer-theme { background: var(--eb-surface) !important; color: var(--eb-text-muted); border-top: 1px solid var(--eb-border); } [data-bs-theme="dark"] .footer-link { color: var(--eb-primary); } /* ---- surfaces ------------------------------------------------------------ */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { background: var(--eb-surface) !important; /* theme-01 uses a light gradient */ border-color: var(--eb-border); color: var(--eb-text); } [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .toast, [data-bs-theme="dark"] .popover { background: var(--eb-surface) !important; color: var(--eb-text); border-color: var(--eb-border); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer, [data-bs-theme="dark"] .offcanvas-header { border-color: var(--eb-border); } [data-bs-theme="dark"] .dropdown-menu { background-color: var(--eb-surface-2) !important; border-color: var(--eb-border); } [data-bs-theme="dark"] .dropdown-item { color: var(--eb-text); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--eb-surface-3); color: #fff; } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--eb-border); } [data-bs-theme="dark"] .list-group-item { background-color: var(--eb-surface); border-color: var(--eb-border); color: var(--eb-text); } [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--eb-text-muted); } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background: var(--eb-surface); border-color: var(--eb-border) var(--eb-border) var(--eb-surface); color: #fff; } [data-bs-theme="dark"] .nav-tabs { border-color: var(--eb-border); } /* ---- tables -------------------------------------------------------------- */ [data-bs-theme="dark"] .table { --bs-table-bg: transparent; color: var(--eb-text); border-color: var(--eb-border); } [data-bs-theme="dark"] .table > thead, [data-bs-theme="dark"] .table > thead th { background: var(--eb-surface-2) !important; /* theme-01 paints a blue gradient */ color: var(--eb-text) !important; border-color: var(--eb-border); } [data-bs-theme="dark"] .table > :not(caption) > * > * { border-color: var(--eb-border); color: var(--eb-text); } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); color: var(--eb-text); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.06); color: #fff; } /* ---- forms --------------------------------------------------------------- */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { background-color: var(--eb-surface-3); border-color: var(--eb-border); color: var(--eb-text); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--eb-text-dim); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--eb-surface-3); border-color: var(--eb-primary); color: var(--eb-text); box-shadow: 0 0 0 .2rem rgba(111, 157, 255, .25); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: var(--eb-surface-2); color: var(--eb-text-dim); } [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] .form-check-label, [data-bs-theme="dark"] label { color: var(--eb-text); } [data-bs-theme="dark"] .form-floating > label { color: var(--eb-text-dim); } /* ---- utilities the views hardcode --------------------------------------- ~190 usages of bg-white / bg-light / text-dark / table-light across ~40 views, plus a handful of inline style="background:#fff". Overriding them here keeps the views untouched and cannot affect light mode, which is far safer than rewriting them one by one. */ [data-bs-theme="dark"] .bg-white { background-color: var(--eb-surface) !important; color: var(--eb-text) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--eb-surface-2) !important; color: var(--eb-text) !important; } [data-bs-theme="dark"] .text-dark { color: var(--eb-text) !important; } [data-bs-theme="dark"] .text-black { color: var(--eb-text) !important; } [data-bs-theme="dark"] .border { border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .border-light { border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .table-light > *, [data-bs-theme="dark"] .table-light th, [data-bs-theme="dark"] .table-light td { background-color: var(--eb-surface-2) !important; color: var(--eb-text) !important; border-color: var(--eb-border) !important; } /* Inline style="background:#fff|#ffffff|white" set directly on elements in a few views. */ [data-bs-theme="dark"] [style*="background:#fff"], [data-bs-theme="dark"] [style*="background: #fff"], [data-bs-theme="dark"] [style*="background-color:#fff"], [data-bs-theme="dark"] [style*="background-color: #fff"], [data-bs-theme="dark"] [style*="background:white"], [data-bs-theme="dark"] [style*="background: white"] { background-color: var(--eb-surface) !important; background-image: none !important; color: var(--eb-text) !important; } /* ---- subtle/tinted badges and alerts ------------------------------------- */ [data-bs-theme="dark"] .bg-label-primary, [data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(111, 157, 255, .18) !important; color: var(--eb-primary-strong) !important; } [data-bs-theme="dark"] .bg-label-success, [data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(86, 202, 0, .18) !important; color: #8fe25c !important; } [data-bs-theme="dark"] .bg-label-danger, [data-bs-theme="dark"] .bg-danger-subtle { background-color: rgba(255, 76, 81, .18) !important; color: #ff8f92 !important; } [data-bs-theme="dark"] .bg-label-warning, [data-bs-theme="dark"] .bg-warning-subtle { background-color: rgba(255, 180, 0, .18) !important; color: #ffd166 !important; } [data-bs-theme="dark"] .bg-label-info, [data-bs-theme="dark"] .bg-info-subtle { background-color: rgba(22, 177, 255, .18) !important; color: #6fd0ff !important; } [data-bs-theme="dark"] .alert { border-color: var(--eb-border); } [data-bs-theme="dark"] .alert-success { background-color: rgba(86, 202, 0, .12); color: #a5e878; } [data-bs-theme="dark"] .alert-danger { background-color: rgba(255, 76, 81, .12); color: #ffa2a5; } [data-bs-theme="dark"] .alert-warning { background-color: rgba(255, 180, 0, .12); color: #ffdb8a; } [data-bs-theme="dark"] .alert-info { background-color: rgba(22, 177, 255, .12); color: #8bd8ff; } /* ---- third-party widgets loaded from CDN --------------------------------- */ [data-bs-theme="dark"] .dataTables_wrapper, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--eb-text); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background: var(--eb-surface-2) !important; color: var(--eb-text) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--eb-primary) !important; color: #10131a !important; } [data-bs-theme="dark"] .choices__inner, [data-bs-theme="dark"] .choices__list--dropdown, [data-bs-theme="dark"] .choices__list[aria-expanded] { background-color: var(--eb-surface-3) !important; border-color: var(--eb-border) !important; color: var(--eb-text) !important; } [data-bs-theme="dark"] .choices__item--choice.is-highlighted { background-color: var(--eb-surface-2) !important; } [data-bs-theme="dark"] .choices__list--multiple .choices__item { background-color: var(--eb-primary); border-color: var(--eb-primary); color: #10131a; } /* ---- brand colour lift --------------------------------------------------- theme-01.css paints links, headings, tabs, outline buttons and pagination in #2563EB (and darker shades like #1e5bd6 / #1D4ED8). Those are chosen for a white page and fall below readable contrast on a dark surface, so they are lifted to the brighter --eb-primary here. Grouped by role rather than per-selector so the intent stays visible. */ [data-bs-theme="dark"] a, [data-bs-theme="dark"] .text-primary, [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .modal-title, [data-bs-theme="dark"] .nav-tabs .nav-link.active, [data-bs-theme="dark"] .nav .nav-link:hover, [data-bs-theme="dark"] .nav .nav-link:focus, [data-bs-theme="dark"] .bg-menu-theme .menu-header, [data-bs-theme="dark"] .bg-footer-theme, [data-bs-theme="dark"] .bg-footer-theme .footer-link { color: var(--eb-primary) !important; } [data-bs-theme="dark"] a:hover, [data-bs-theme="dark"] .bg-footer-theme .footer-link:hover, [data-bs-theme="dark"] .text-body[href]:hover, [data-bs-theme="dark"] .text-heading[href]:hover { color: var(--eb-primary-strong) !important; } /* The card header keeps the surface colour set earlier; only its text is lifted. */ [data-bs-theme="dark"] .card-header { background: var(--eb-surface) !important; } /* Outline buttons: border + label both need lifting, the fill stays transparent. */ [data-bs-theme="dark"] .btn-outline-primary, [data-bs-theme="dark"] .btn-sm.btn-outline-primary, [data-bs-theme="dark"] .btn-outline-primary:not(.btn-sm) { color: var(--eb-primary) !important; border-color: var(--eb-primary) !important; } [data-bs-theme="dark"] .btn-outline-primary:hover, [data-bs-theme="dark"] .btn-sm.btn-outline-primary:hover, [data-bs-theme="dark"] .btn-outline-primary:not(.btn-sm):hover { background: var(--eb-primary) !important; color: #10131a !important; } /* theme-01 styles these as `.btn-sm.btn-outline-x` (two classes), which outranks a single-class override — both forms are listed so the small variants are actually reached. */ [data-bs-theme="dark"] .btn-outline-secondary, [data-bs-theme="dark"] .btn-sm.btn-outline-secondary { color: #b9c0cc !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .btn-outline-success, [data-bs-theme="dark"] .btn-sm.btn-outline-success { color: #8fe25c !important; border-color: #4a8f2a !important; } [data-bs-theme="dark"] .btn-outline-danger, [data-bs-theme="dark"] .btn-sm.btn-outline-danger { color: #ff8f92 !important; border-color: #a34145 !important; } [data-bs-theme="dark"] .btn-outline-warning, [data-bs-theme="dark"] .btn-sm.btn-outline-warning { color: #ffd166 !important; border-color: #9c7a1a !important; } [data-bs-theme="dark"] .btn-outline-info, [data-bs-theme="dark"] .btn-sm.btn-outline-info { color: #6fd0ff !important; border-color: #2e7ba6 !important; } /* Hover states for the same, so the label does not go dark-on-dark mid-interaction. */ [data-bs-theme="dark"] .btn-sm.btn-outline-secondary:hover { background: #b9c0cc !important; color: #10131a !important; } [data-bs-theme="dark"] .btn-sm.btn-outline-success:hover { background: #8fe25c !important; color: #10131a !important; } [data-bs-theme="dark"] .btn-sm.btn-outline-danger:hover { background: #ff8f92 !important; color: #10131a !important; } [data-bs-theme="dark"] .btn-sm.btn-outline-warning:hover { background: #ffd166 !important; color: #10131a !important; } [data-bs-theme="dark"] .btn-sm.btn-outline-info:hover { background: #6fd0ff !important; color: #10131a !important; } /* Outline pagination variant */ [data-bs-theme="dark"] .pagination-outline-primary .page-item.active .page-link { background-color: rgba(111, 157, 255, .18) !important; border-color: var(--eb-primary) !important; color: var(--eb-primary-strong) !important; } /* Pale badge with dark text */ [data-bs-theme="dark"] .badge-primary { background-color: rgba(111, 157, 255, .18) !important; color: var(--eb-primary-strong) !important; } [data-bs-theme="dark"] .footer.bg-primary .footer-link.disabled { color: var(--eb-text-dim) !important; } /* The floating-label notch is painted with the page background to punch through the input border; it has to follow the dark surface or it shows as a white bar across the field. */ [data-bs-theme="dark"] .form-floating-outline label::after, [data-bs-theme="dark"] .form-floating-outline > span::after { background: var(--eb-surface-3) !important; } [data-bs-theme="dark"] .form-floating-outline label.bg-body::after, [data-bs-theme="dark"] .form-floating-outline > span.bg-body::after { background: var(--eb-bg) !important; } /* Scrollbars */ [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--eb-bg) !important; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #454b57 !important; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #565d6b !important; } /* Pagination */ [data-bs-theme="dark"] .page-link { background: var(--eb-surface-2); border-color: var(--eb-border); color: var(--eb-text); } [data-bs-theme="dark"] .page-item .page-link:hover, [data-bs-theme="dark"] .page-item .page-link:focus { background: var(--eb-surface-3) !important; color: var(--eb-primary) !important; } [data-bs-theme="dark"] .page-item.active .page-link { background: var(--eb-primary) !important; border-color: var(--eb-primary) !important; color: #10131a !important; } [data-bs-theme="dark"] .page-item.disabled .page-link { background: var(--eb-surface); color: var(--eb-text-dim); } /* Tinted contextual variants: theme-01 pairs dark text with a pale tint, which inverts badly. */ [data-bs-theme="dark"] .alert-primary, [data-bs-theme="dark"] .list-group-item-primary { background-color: rgba(111, 157, 255, .14) !important; color: var(--eb-primary-strong) !important; border-color: rgba(111, 157, 255, .3) !important; } [data-bs-theme="dark"] .alert-primary .alert-link { color: var(--eb-primary-strong) !important; } [data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-primary > *, [data-bs-theme="dark"] .table-primary .btn, [data-bs-theme="dark"] .table-primary .btn-icon { background-color: rgba(111, 157, 255, .14) !important; color: var(--eb-text) !important; } [data-bs-theme="dark"] .list-group-item.active { background-color: var(--eb-surface-3) !important; border-color: var(--eb-border) !important; color: #fff !important; } /* Floating-label forms put the focused label in brand blue. */ [data-bs-theme="dark"] .form-floating > .form-control:focus ~ label, [data-bs-theme="dark"] .form-floating-outline :not(select):focus + label { color: var(--eb-primary) !important; } /* ---- images that assume a light backdrop --------------------------------- */ [data-bs-theme="dark"] .authentication-image, [data-bs-theme="dark"] .authentication-image-object-left, [data-bs-theme="dark"] .authentication-image-object-right { opacity: .55; } /* ---- the toggle itself --------------------------------------------------- */ .theme-toggle-btn { background: transparent; border: 0; line-height: 1; cursor: pointer; padding: .25rem .4rem; color: inherit; } /* ---- page-level stylesheets (generated) ----------------------------------- qbank-test-generator.css and notepad-editor.css ship their own light palettes for the question picker, test preview and notepad. Each rule below mirrors one hardcoded declaration found by the contrast audit; neutral greys map to the shared text/surface tokens and saturated colours keep their hue, lifted for legibility on dark. Regenerate with scratchpad/gen-dark-overrides.js after changing either source file. */ [data-bs-theme="dark"] .qbt-page-sub { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .qbt-filter-label { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .qbt-pill { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-state-msg { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .qbt-subject-header .chevron { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .qbt-cnt { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-cnt.sel { color: hsl(152 69% 72%) !important; } [data-bs-theme="dark"] .qbt-subtopic-header .subtopic-name { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-search { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-qs-loading { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .q-card-num { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .q-badge-1 { color: hsl(224 76% 72%) !important; } [data-bs-theme="dark"] .q-badge-2 { color: hsl(26 85% 72%) !important; } [data-bs-theme="dark"] .q-badge-3 { color: hsl(262 83% 72%) !important; } [data-bs-theme="dark"] .q-badge-4 { color: hsl(335 78% 72%) !important; } [data-bs-theme="dark"] .q-badge-5 { color: hsl(163 85% 72%) !important; } [data-bs-theme="dark"] .q-badge-6 { color: hsl(175 77% 72%) !important; } [data-bs-theme="dark"] .q-badge-7, [data-bs-theme="dark"] .q-badge-8, [data-bs-theme="dark"] .q-badge-9 { color: hsl(215 14% 72%) !important; } [data-bs-theme="dark"] .q-card-qtext { color: var(--eb-text) !important; } [data-bs-theme="dark"] .q-opt-key { color: hsl(229 76% 72%) !important; } [data-bs-theme="dark"] .q-answer-box { color: hsl(134 61% 72%) !important; } [data-bs-theme="dark"] .q-solution-box { color: hsl(45 85% 72%) !important; } [data-bs-theme="dark"] .qbt-summary-box { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-modal-stats { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .qbt-pattern-scheme thead th { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-pattern-scheme tbody td { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-pattern-scheme input[type="number"] { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-val-ok { color: hsl(152 69% 72%) !important; } [data-bs-theme="dark"] .qbt-ro-subj-header { color: hsl(218 24% 72%) !important; } [data-bs-theme="dark"] .qbt-ro-num { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .qbt-ro-text { color: var(--eb-text) !important; } [data-bs-theme="dark"] .qbt-ro-btn { color: var(--eb-text) !important; } [data-bs-theme="dark"] .prev-pal-title { color: var(--eb-text) !important; } [data-bs-theme="dark"] .prev-pal-subj { color: hsl(218 24% 72%) !important; } [data-bs-theme="dark"] .prev-pal-subj-count { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .prev-pal-num { color: var(--eb-text) !important; } [data-bs-theme="dark"] .prev-pal-hint-title { color: hsl(229 76% 72%) !important; } [data-bs-theme="dark"] .prev-pal-hint-list li { color: var(--eb-text) !important; } [data-bs-theme="dark"] .prev-pal-hint-list li i { color: hsl(229 76% 72%) !important; } [data-bs-theme="dark"] .prev-reorder-handle:hover { color: hsl(229 76% 72%) !important; } [data-bs-theme="dark"] .prev-pal-move-btn { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .prev-pal-toggle-mob { color: hsl(229 76% 72%) !important; } [data-bs-theme="dark"] .np-title { color: hsl(221 39% 72%) !important; } [data-bs-theme="dark"] .np-sub { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .np-btn { color: hsl(217 19% 72%) !important; } [data-bs-theme="dark"] .np-select { color: hsl(217 19% 72%) !important; } [data-bs-theme="dark"] #np-page-label { color: hsl(217 19% 72%) !important; } [data-bs-theme="dark"] .np-status.saving { color: hsl(26 85% 72%) !important; } [data-bs-theme="dark"] .np-status.saved { color: hsl(161 85% 72%) !important; } [data-bs-theme="dark"] .np-status.error { color: hsl(0 72% 72%) !important; } [data-bs-theme="dark"] .np-net.online { color: hsl(161 85% 72%) !important; } [data-bs-theme="dark"] .np-net.offline { color: hsl(26 85% 72%) !important; } [data-bs-theme="dark"] .np-fatal { color: hsl(0 72% 72%) !important; } [data-bs-theme="dark"] .np-math-tab { color: hsl(217 19% 72%) !important; } [data-bs-theme="dark"] .np-math-x { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .np-math-key { color: hsl(221 39% 72%) !important; } [data-bs-theme="dark"] .np-math-error { color: hsl(0 72% 72%) !important; } [data-bs-theme="dark"] .np-math-preview { color: hsl(221 39% 72%) !important; } [data-bs-theme="dark"] .np-math-tip { color: var(--eb-text-muted) !important; } [data-bs-theme="dark"] .np-math-del { color: hsl(0 72% 72%) !important; } [data-bs-theme="dark"] .excalidraw .HelpDialog__island-title, [data-bs-theme="dark"] .excalidraw .HelpDialog__island-content, [data-bs-theme="dark"] .excalidraw .HelpDialog__island-content * { color: hsl(215 28% 72%) !important; } [data-bs-theme="dark"] .qbt-create-count { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-filter-bar { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-filter-divider { background: hsl(210 14% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-pill { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-pill:hover { background: hsl(210 17% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-subject { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-subject-header { background: hsl(220 27% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-subject-header:hover { background: hsl(223 26% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-subject-header.expanded { background: hsl(230 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-cnt { background: hsl(210 16% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-cnt.sel { background: hsl(153 31% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-topic-header:hover { background: hsl(220 27% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-topic-header.expanded { background: hsl(224 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-subtopic-header:hover { background: hsl(220 27% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-subtopic-header.expanded { background: hsl(218 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-qs-wrap { background: hsl(240 20% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-search-wrap { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-card { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-1 { background: hsl(214 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-2 { background: hsl(48 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-3 { background: hsl(251 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-4 { background: hsl(326 78% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-5 { background: hsl(149 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-6 { background: hsl(167 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-badge-7, [data-bs-theme="dark"] .q-badge-8, [data-bs-theme="dark"] .q-badge-9 { background: hsl(220 14% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-card-qtext { background: hsl(223 47% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-card-detail { background: hsl(210 25% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-opt { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-answer-box { background: hsl(134 41% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .q-solution-box { background: hsl(46 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-summary-box { background: hsl(210 17% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-pattern-scheme thead th { background: hsl(223 47% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-reorder-item { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .qbt-ro-btn { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-palette { background: hsl(220 27% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-header { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-subj:hover { background: hsl(223 26% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-subj-count { background: hsl(210 16% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-num { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-num.drag-over { background: hsl(214 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-hint { background: hsl(224 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-num:hover { background: hsl(232 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-q-card.drag-blocked { background: hsl(0 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-num.drag-blocked { background: hsl(0 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-move-btn { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .prev-pal-toggle-mob { background: hsl(220 27% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] #np-shell { background: hsl(220 16% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-toolbar { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-btn { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-btn:hover:not(:disabled) { background: hsl(220 14% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-pagebar { background: hsl(210 20% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-select { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-net.offline { background: hsl(48 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-card { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-tab { background: hsl(210 20% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-key { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-key:hover { background: hsl(226 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-previewbox { background: var(--eb-surface) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-del { background: hsl(356 80% 62% / .16) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .np-math-del:hover { background: hsl(0 80% 62% / .16) !important; border-color: var(--eb-border) !important; } /* ---- manual refinements (keep last) --------------------------------------- Hand-written rules that must outrank the generated block above. gen-dark-overrides.js only rewrites the generated section, so anything here survives a regeneration. */ /* Light text on a dark background is rendered heavier by subpixel antialiasing — strokes bloom outward and small type reads as blurry rather than sharp. This is why the test-preview options (0.74rem) looked soft in dark mode while the same text was crisp in light mode. Greyscale antialiasing thins the glyphs back to their intended weight. Scoped to dark: light mode keeps subpixel rendering, where it is the sharper of the two. */ [data-bs-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* The option chips and their card both mapped to --eb-surface, so the boxes dissolved into the card and only a low-contrast border separated them. In light mode the same border reads clearly against #fff; on dark it does not. Raising the chips one surface step restores the separation. */ [data-bs-theme="dark"] .q-opt { background: var(--eb-surface-2) !important; } [data-bs-theme="dark"] .q-opt-val { color: var(--eb-text) !important; } /* ---- dark/light button variants ------------------------------------------- core.css defines these with literal greys, so their meaning inverts on a dark page: .btn-outline-dark is #4b4b4b text on a #16181d background — about 1.5:1, effectively invisible. The dark/light pair swaps roles here so both stay legible. The tinted variants (primary, danger, …) are handled further up; these four were simply never part of that set. */ [data-bs-theme="dark"] .btn-outline-dark, [data-bs-theme="dark"] .btn-sm.btn-outline-dark { color: var(--eb-text) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .btn-outline-dark:hover, [data-bs-theme="dark"] .btn-sm.btn-outline-dark:hover { color: var(--eb-bg) !important; background-color: var(--eb-text) !important; border-color: var(--eb-text) !important; } /* Solid .btn-dark sits at #4b4b4b, close enough to the raised surfaces to read as disabled. */ [data-bs-theme="dark"] .btn-dark { color: var(--eb-text) !important; background-color: var(--eb-surface-3) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .btn-dark:hover { background-color: var(--eb-border) !important; border-color: var(--eb-text-dim) !important; } /* Solid .btn-light is a near-white slab (#dfdfe3) — legible, but it glares against the page. */ [data-bs-theme="dark"] .btn-light { color: var(--eb-text) !important; background-color: var(--eb-surface-2) !important; border-color: var(--eb-border) !important; } [data-bs-theme="dark"] .btn-light:hover { color: var(--eb-text) !important; background-color: var(--eb-surface-3) !important; border-color: var(--eb-text-dim) !important; } /* ---- question content images ---------------------------------------------- Question, option and solution bodies are author-supplied HTML and many carry scanned or cropped artwork. Those crops are frequently transparent PNGs holding black ink, which is invisible-to- smudged once the backdrop is dark — which is why only *some* questions looked wrong. Painting a white plate behind the image restores the paper the ink was drawn for; images that already carry an opaque white background are unchanged by it. Deliberately NOT a filter/invert: inverting a scan wrecks diagrams and photographs. */ [data-bs-theme="dark"] .q-card-qtext img, [data-bs-theme="dark"] .q-opt-val img, [data-bs-theme="dark"] .q-answer-box img, [data-bs-theme="dark"] .q-solution-box img { background: #fff !important; padding: 2px; border-radius: 3px; } /* Rich-text question bodies often carry inline colours from the authoring editor (color:#000 on a span). An inline style outranks a normal rule, so those spans stayed near-black on the dark card while the rest of the box was correct — the same "only some questions" symptom. An !important author rule outranks inline, so descendants are pulled back to the box colour. Scoped to the question boxes so it cannot touch the rest of the UI. */ [data-bs-theme="dark"] .q-card-qtext *:not(img):not(svg):not(svg *), [data-bs-theme="dark"] .q-opt-val *:not(img):not(svg):not(svg *), [data-bs-theme="dark"] .q-answer-box *:not(img):not(svg):not(svg *), [data-bs-theme="dark"] .q-solution-box *:not(img):not(svg):not(svg *) { color: inherit !important; background-color: transparent !important; } /* The assign-test preview (Views/Paper/AssignTest.cshtml → #questionsPreviewContainer) is a second, older renderer for the same question data: it builds its own card markup and drops author HTML in via safeHtml(). It therefore needs the same inline-colour normalisation as the .q-* boxes above — a solution body carrying color:#000 on a span stayed black against the dark panel, which is why only questions that actually have a solution looked wrong. */ [data-bs-theme="dark"] #questionsPreviewContainer *:not(img):not(svg):not(svg *):not(.badge) { color: inherit !important; background-color: transparent !important; } [data-bs-theme="dark"] #questionsPreviewContainer img { background: #fff !important; padding: 2px; border-radius: 3px; }