/* EPICURE dark theme. Scoped entirely under [data-theme="dark"] (stamped on by the inline script in includes/head.html, before any stylesheet loads, to avoid a flash of the wrong theme). Loaded after style.css and theme.css so these rules win the cascade without needing !important almost anywhere. Design note: button/badge backgrounds (--bs-primary/success/warning/danger solid fills) do NOT change between themes - their internal text contrast was chosen against their OWN background, which is independent of the page around them. Only page/card/sidebar/table/form/modal/dropdown SURFACES and BARE TEXT colors (headings, body copy, .text-*, .link-*, .alert-* utilities) need dark-mode-specific values, since those are the ones read against a background that actually changes. Where a bare-text role needs a brighter variant to pass WCAG AA against the dark surfaces below, this file reuses the brand's existing "chart hue" tones (already bright enough) rather than inventing new ones - only .text-danger/.alert-danger needed one truly new color (#F2685A), since the light-mode-safe brand danger (#B8291F) reads too dark against a dark surface. */ [data-theme="dark"] { --brand-navy: #0B3B45; --dark-bg-page: #071D22; --dark-bg-surface: #0F2B33; --dark-bg-surface-alt: #14333B; --dark-border: #1C3D45; --dark-text: #E7EDEE; --dark-text-muted: #9FB3B8; --dark-danger-text: #F2685A; --bs-body-bg: var(--dark-bg-page); --bs-body-bg-rgb: 7, 29, 34; --bs-body-color: var(--dark-text); --bs-body-color-rgb: 231, 237, 238; --bs-border-color: var(--dark-border); --bs-light: var(--dark-bg-surface); --bs-light-rgb: 15, 43, 51; --bs-dark: var(--dark-text); --bs-dark-rgb: 231, 237, 238; } /* Theme-toggle icon swap (menu item lives in includes/navigation.html). !important needed: style.css's ".dropdown-menu > li > a i" rule (specificity 0,1,3) otherwise beats a plain .theme-icon-dark class selector (0,1,0) and forces display:inline-flex regardless of theme. */ .theme-icon-dark { display: none !important; } [data-theme="dark"] .theme-icon-dark { display: inline-flex !important; } [data-theme="dark"] .theme-icon-light { display: none !important; } [data-theme="dark"] body { background-color: var(--dark-bg-page); color: var(--dark-text); } /* The :not() exclusions matter: plenty of components style an tag directly (button-links, nav-links, page-links, dropdown items, breadcrumbs), each with its own more-deliberate color rule below. A plain "a { color }" rule is specificity (0,1,1), which beats every one of those single-class rules (0,1,0) and would silently override them - e.g. making a button's text match its own background exactly, since .btn-primary's navy text rule is (0,1,0). */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.breadcrumb-item) { color: var(--brand-mint); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.breadcrumb-item):hover { color: #5EE0C4; } /* style.css sets h1-h6 and the generic (non-.app-nav) .nav-link to a near-black #222 in two separate duplicate rule blocks - fine at AA on a white background, unreadable on a dark one. */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--dark-text); } [data-theme="dark"] .nav-link { color: var(--dark-text-muted); } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link:focus { color: var(--brand-mint); } [data-theme="dark"] .nav-pills .nav-link.active, [data-theme="dark"] .nav-pills .show > .nav-link { color: #fff; } [data-theme="dark"] .nav-tabs { border-color: var(--dark-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--dark-text-muted); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--dark-border) var(--dark-border) transparent; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dark-bg-surface); color: var(--dark-text); border-color: var(--dark-border) var(--dark-border) var(--dark-bg-surface); } /* ========================================================================== App shell (theme.css hardcodes a white sidebar; navbar is already navy in both themes so needs no change here) ========================================================================== */ [data-theme="dark"] .app-sidebar { background-color: var(--dark-bg-surface); border-right-color: var(--dark-border); } [data-theme="dark"] .app-nav-caption { color: var(--dark-text-muted); } [data-theme="dark"] .app-nav .nav-link { color: var(--dark-text); } [data-theme="dark"] .app-nav .nav-link:hover, [data-theme="dark"] .app-nav .nav-link:focus { background-color: var(--dark-bg-surface-alt); color: var(--brand-mint); } /* ========================================================================== Cards - the single most common surface in the app ========================================================================== */ [data-theme="dark"] .card { background-color: var(--dark-bg-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--dark-bg-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .card-header h5, [data-theme="dark"] .card-header h6, [data-theme="dark"] .card-header .h5, [data-theme="dark"] .card-header .h6 { color: var(--dark-text); } /* ========================================================================== Tables ========================================================================== */ [data-theme="dark"] .table { color: var(--dark-text); border-color: var(--dark-border); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--dark-text); border-bottom-color: var(--dark-border); } [data-theme="dark"] .table thead th { background-color: var(--dark-bg-surface-alt); color: var(--dark-text); border-color: var(--dark-border); } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--dark-bg-surface-alt); color: var(--dark-text); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); } /* ========================================================================== Dropdowns ========================================================================== */ [data-theme="dark"] .dropdown-menu { background-color: var(--dark-bg-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .dropdown-item { color: var(--dark-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dark-bg-surface-alt); color: var(--dark-text); } [data-theme="dark"] .dropdown-divider { border-color: var(--dark-border); } /* ========================================================================== Forms ========================================================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--dark-bg-surface-alt); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--dark-bg-surface-alt); color: var(--dark-text); border-color: var(--brand-mint); } [data-theme="dark"] .form-control::placeholder { color: var(--dark-text-muted); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background-color: var(--dark-bg-surface); color: var(--dark-text-muted); } [data-theme="dark"] .form-check-input { background-color: var(--dark-bg-surface-alt); border-color: var(--dark-border); } [data-theme="dark"] .input-group-text { background-color: var(--dark-bg-surface-alt); border-color: var(--dark-border); color: var(--dark-text-muted); } [data-theme="dark"] label, [data-theme="dark"] .form-label, [data-theme="dark"] .control-label { color: var(--dark-text); } [data-theme="dark"] .help-text { background-color: var(--dark-bg-surface-alt) !important; color: var(--dark-text-muted) !important; } /* ========================================================================== Modals / offcanvas ========================================================================== */ [data-theme="dark"] .modal-content { background-color: var(--dark-bg-surface); color: var(--dark-text); border-color: var(--dark-border); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--dark-border); } [data-theme="dark"] .offcanvas { background-color: var(--dark-bg-surface); color: var(--dark-text); } /* ========================================================================== Pagination ========================================================================== */ [data-theme="dark"] .page-link { background-color: var(--dark-bg-surface); border-color: var(--dark-border); color: var(--brand-mint); } [data-theme="dark"] .page-link:hover { background-color: var(--dark-bg-surface-alt); color: var(--brand-mint); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dark-bg-surface); color: var(--dark-text-muted); border-color: var(--dark-border); } /* ========================================================================== Breadcrumbs / list groups / page-header (the breadcrumb+title wrapper used at the top of nearly every page - a separate hardcoded-white surface from .card, with its own more-specific breadcrumb-link rules that would otherwise beat the generic .breadcrumb-item override below) ========================================================================== */ [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item a { color: var(--dark-text-muted); } [data-theme="dark"] .breadcrumb-item.active { color: var(--dark-text); } [data-theme="dark"] .list-group-item { background-color: var(--dark-bg-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .page-header { background: var(--dark-bg-surface); box-shadow: 0 1px 2.94px 0.06px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .page-header h5, [data-theme="dark"] .page-header .h5 { border-bottom-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .page-header .page-header-title + .breadcrumb > .breadcrumb-item a { color: var(--brand-mint); } [data-theme="dark"] .page-header .page-header-title + .breadcrumb > .breadcrumb-item:last-child a { color: var(--dark-text); } /* ========================================================================== Alerts - dark-adapted tints (translucent accent overlay on the dark surface, paired with the brighter chart-hue text colors from the palette design note at the top of this file) ========================================================================== */ [data-theme="dark"] .alert-primary { background-color: rgba(31, 207, 166, 0.12); border-color: rgba(31, 207, 166, 0.35); color: var(--brand-mint); } [data-theme="dark"] .alert-primary .alert-link { color: #5EE0C4; } [data-theme="dark"] .alert-success { background-color: rgba(46, 216, 182, 0.12); border-color: rgba(46, 216, 182, 0.35); color: #2ED8B6; } [data-theme="dark"] .alert-success .alert-link { color: #5EE0C4; } [data-theme="dark"] .alert-info { background-color: rgba(58, 176, 214, 0.14); border-color: rgba(58, 176, 214, 0.35); color: #3AB0D6; } [data-theme="dark"] .alert-info .alert-link { color: #6BC5E0; } [data-theme="dark"] .alert-warning { background-color: rgba(240, 173, 78, 0.14); border-color: rgba(240, 173, 78, 0.35); color: #F0AD4E; } [data-theme="dark"] .alert-warning .alert-link { color: #F5C578; } [data-theme="dark"] .alert-danger { background-color: rgba(242, 104, 90, 0.14); border-color: rgba(242, 104, 90, 0.35); color: var(--dark-danger-text); } [data-theme="dark"] .alert-danger .alert-link { color: #F58E80; } /* ========================================================================== Bare-text utility classes (.text-*, .link-*, .border-*) - these read directly against the page/card background, so (unlike button/badge fills) they need the brighter dark-mode-safe variants. ========================================================================== */ [data-theme="dark"] .text-primary { color: var(--brand-mint) !important; } [data-theme="dark"] .text-success { color: #2ED8B6 !important; } [data-theme="dark"] .text-info { color: #3AB0D6 !important; } [data-theme="dark"] .text-warning { color: #F0AD4E !important; } [data-theme="dark"] .text-danger { color: var(--dark-danger-text) !important; } [data-theme="dark"] .text-muted { color: var(--dark-text-muted) !important; } [data-theme="dark"] .text-dark { color: var(--dark-text) !important; } [data-theme="dark"] .text-secondary { color: var(--dark-text-muted) !important; } [data-theme="dark"] .link-primary { color: var(--brand-mint) !important; } [data-theme="dark"] .link-success { color: #2ED8B6 !important; } [data-theme="dark"] .link-warning { color: #F0AD4E !important; } [data-theme="dark"] .link-danger { color: var(--dark-danger-text) !important; } [data-theme="dark"] .border { border-color: var(--dark-border) !important; } [data-theme="dark"] .border-primary { border-color: var(--brand-mint) !important; } /* ========================================================================== Outline buttons - unlike solid buttons/badges, these have a transparent fill, so their text/border DOES read directly against the surrounding page/card background and is NOT theme-independent the way a filled button is. The light-mode text colors (navy/dark-teal/dark-amber) were chosen for AA against white and go near-invisible on a dark surface; hover/active states still swap to a solid fill (page-independent) so need no dark-specific change. ========================================================================== */ [data-theme="dark"] .btn-outline-primary { color: var(--brand-mint); border-color: var(--brand-mint); } [data-theme="dark"] .btn-outline-success { color: #2ED8B6; border-color: #2ED8B6; } [data-theme="dark"] .btn-outline-warning { color: #F0AD4E; border-color: #F0AD4E; } [data-theme="dark"] .btn-outline-danger { color: var(--dark-danger-text); border-color: var(--dark-danger-text); } [data-theme="dark"] .btn-outline-info { color: #3AB0D6; border-color: #3AB0D6; } [data-theme="dark"] .btn-outline-secondary { color: var(--dark-text-muted); border-color: var(--dark-border); } /* ========================================================================== Common !important-marked light-surface/dark-text patterns duplicated across several templates' own