/* * Dark theme for the admin panel. * * Loaded AFTER css/mobiz.css (which defines the light token values on :root) and after the * third-party plugin stylesheets, so it wins the cascade without !important except where it * has to fight an inline style attribute. * * ONE condition drives everything here: :root[data-theme="dark"]. * * There is deliberately no prefers-color-scheme media query. The OS preference is resolved * into that same attribute by a small inline script in (see admin_header_incl.php), * which means every rule below is written once instead of twice - and, more importantly, * there is no half-state where a no-preference visitor gets dark tokens but light * third-party widgets. The panel is entirely AJAX-driven and unusable without JS, so * depending on that script costs nothing real. * * Resolution order, by design: * no stored choice -> follow the OS (head script stamps dark/light before first paint) * chose "dark" -> dark, even on a light OS * chose "light" -> light, even on a dark OS * * The choice is SESSION-scoped, not stored against the account: admin and client logins do * get shared between people, so one person's preference must not follow the account onto * someone else's screen. */ :root[data-theme="dark"] { /* Content surfaces */ --surface: #1e1e1e; --surface-alt: #232323; --surface-disabled: #2a2a2a; --surface-highlight: #1f3b52; --surface-hover: #2a2a2a; --surface-info: #232a3a; --surface-menu-hover: #2f3a47; --surface-mid: #4a4a4a; --surface-mid-2: #555555; --surface-muted: #2b2b2b; --surface-muted-2: #2e2e2e; --surface-muted-3: #333333; --surface-raised: #262626; --surface-selected: #2b3a4d; --surface-sunken: #1a1a1a; --surface-track: #3a3a3a; --surface-translucent: rgba(30,30,30,0.92); /* Chrome - already dark in light mode, unchanged in dark */ --chrome-0: #101010; --chrome-1: #131313; --chrome-1b: #161616; --chrome-2: #323232; --chrome-2b: #333333; --chrome-3: #606060; --chrome-4: #555555; --chrome-black: #000000; /* Text */ --text-brand: #019df5; --text-brand-dark: #0f9cff; --text-danger: #df7a6f; --text-danger-alt: #f26d64; --text-inverse: #ffffff; --text-inverse-2: #f0f0f0; --text-inverse-3: #eeeeee; --text-link: #7497dc; --text-muted: #b0b0b0; --text-muted-2: #ababab; --text-muted-3: #a6a6a6; --text-muted-4: #a3a3a3; --text-muted-5: #9c9c9c; --text-muted-6: #949494; --text-muted-7: #b5b5b5; --text-on-dark-muted: #c6c4c4; --text-on-dark-muted-2: #b8b8b8; --text-primary: #e8e8e8; --text-primary-2: #e8e8e8; --text-primary-3: #e6e6e6; --text-secondary: #c8c8c8; --text-strong: #f2f2f2; /* keyword colours: `color:black` was table-row text, `silver` a datepicker disabled state - both have to invert on dark */ --text-black: #f2f2f2; --text-silver: #8a8a8a; /* Borders */ --border-black: #000000; /* `border:1px solid black` separators are invisible on a dark surface */ --border-hairline: #5a5a5a; --border-silver: #4d4d4d; --border-dark: #575757; --border-dark-2: #5c5c5c; --border-dark-3: #6b6b6b; --border-dark-4: #606060; --border-dark-5: #595959; --border-darker: #6e6e6e; --border-default: #3d3d3d; --border-inverse: #ffffff; --border-light: #3a3a3a; --border-mid: #454545; --border-mid-2: #474747; --border-on-dark: #444444; --border-on-dark-2: #2d2d2d; --border-on-dark-3: #2a2a2a; --border-on-dark-4: #333333; --border-on-dark-5: #555555; --border-strong: #4d4d4d; --border-strong-2: #525252; --border-subtle: #2f2f2f; --border-subtle-2: #333333; /* Shadows */ --shadow-medium: rgba(0,0,0,0.65); --shadow-soft: rgba(0,0,0,0.5); --shadow-strong: rgba(0,0,0,0.85); --shadow-subtle: rgba(0,0,0,0.45); --shadow-tint: rgba(0,0,0,0.55); --shadow-tint-2: rgba(0,0,0,0.55); --shadow-tint-3: rgba(0,0,0,0.7); /* Overlays */ --overlay-0: rgba(0, 0, 0, 0); --overlay-40: rgba(0, 0, 0, 0.4); --overlay-50: rgba(0, 0, 0, 0.5); } /* ------------------------------------------------------------------------------------ * Base * * body sets no background or colour of its own in light mode - it inherits the browser * default white - so dark mode has to state both explicitly. color-scheme additionally * flips native UI (scrollbars, text-input carets, date pickers, autofill shading) that * no amount of author CSS can reach. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="dark"] body { background: var(--surface); color: var(--text-primary); } /* ------------------------------------------------------------------------------------ * Form controls * * mobiz.css styles most inputs, but not all of them state a background, so they fall back * to the UA white. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); } :root[data-theme="dark"] input:disabled, :root[data-theme="dark"] textarea:disabled, :root[data-theme="dark"] select:disabled { background-color: var(--surface-disabled); color: var(--text-muted-6); } :root[data-theme="dark"] ::-webkit-input-placeholder { color: var(--text-muted-6); } :root[data-theme="dark"] ::-moz-placeholder { color: var(--text-muted-6); } :root[data-theme="dark"] :-ms-input-placeholder { color: var(--text-muted-6); } /* ------------------------------------------------------------------------------------ * jQuery UI - dialogs are the primary UI surface in this panel, so these matter more than * anything else on this page. jquery-ui_old_mobiz.min.css ships its own light theme. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] .ui-widget-content, :root[data-theme="dark"] .ui-dialog, :root[data-theme="dark"] .ui-dialog-content { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); } :root[data-theme="dark"] .ui-widget-header, :root[data-theme="dark"] .ui-dialog-titlebar { background: var(--surface-muted); color: var(--text-primary); border-color: var(--border-default); } :root[data-theme="dark"] .ui-widget-overlay { background: var(--overlay-50); opacity: 1; } :root[data-theme="dark"] .ui-button, :root[data-theme="dark"] .ui-state-default { background: var(--surface-muted); color: var(--text-primary); border-color: var(--border-strong); } :root[data-theme="dark"] .ui-state-hover, :root[data-theme="dark"] .ui-state-focus { background: var(--surface-hover); color: var(--text-strong); } /* jQuery UI icons are a sprite sheet drawn in dark grey - invert so they read on dark */ :root[data-theme="dark"] .ui-icon { filter: invert(1) brightness(1.6); } :root[data-theme="dark"] .ui-autocomplete, :root[data-theme="dark"] .ui-menu { background: var(--surface-raised); border-color: var(--border-default); } :root[data-theme="dark"] .ui-menu-item-wrapper.ui-state-active { background: var(--surface-selected); color: var(--text-strong); border-color: var(--border-strong); } /* Datepicker */ :root[data-theme="dark"] .ui-datepicker, :root[data-theme="dark"] .ui-datepicker-header { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); } :root[data-theme="dark"] .ui-datepicker td a, :root[data-theme="dark"] .ui-datepicker td span { background: var(--surface-muted); color: var(--text-primary); } /* ------------------------------------------------------------------------------------ * Select2 - not themed by mobiz.css at all, so it is pure vendor light styling. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] .select2-container--default .select2-selection--single, :root[data-theme="dark"] .select2-container--default .select2-selection--multiple, :root[data-theme="dark"] .select2-dropdown, :root[data-theme="dark"] .select2-search__field { background-color: var(--surface-raised) !important; color: var(--text-primary); border-color: var(--border-default) !important; } :root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, :root[data-theme="dark"] .select2-results__option { color: var(--text-primary); } :root[data-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: var(--surface-muted); } :root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0178bc; color: #ffffff; } :root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--surface-muted-3); border-color: var(--border-strong); color: var(--text-primary); } /* ------------------------------------------------------------------------------------ * perfect-scrollbar - its rails are dark-on-light by default * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] .ps-scrollbar-y, :root[data-theme="dark"] .ps-scrollbar-x, :root[data-theme="dark"] .ps__thumb-y, :root[data-theme="dark"] .ps__thumb-x { background-color: var(--surface-mid) !important; } :root[data-theme="dark"] .ps-scrollbar-y-rail, :root[data-theme="dark"] .ps-scrollbar-x-rail, :root[data-theme="dark"] .ps__rail-y, :root[data-theme="dark"] .ps__rail-x { background-color: var(--surface-sunken) !important; } /* ------------------------------------------------------------------------------------ * Inline style attributes * * ~190 inline colour declarations are emitted by the PHP renderers (the admin API files * build HTML as strings). Most are muted grey TEXT, unreadable on a dark surface. * Overriding by style-attribute substring is surgical and leaves light mode byte-for-byte * untouched; the alternative - refactoring 164 inline styles across 11 live API renderers * into classes - carries real light-mode regression risk for no dark-mode benefit, so it is * tracked as follow-up rather than done here. * * Matching on ";color:#888" cannot collide with a background declaration: the tree was * checked and no inline `background-color:` uses any of the greys below. * * The semantic colours here are NOT cosmetic changes - they were measured. At their light * values #c0392b (3.07:1), #0178bc (3.50:1), #900 (1.87:1) and #856404 (3.03:1) all fail * WCAG AA against the dark surfaces, so each gets a hue-preserving lift. #27ae60 (4.93:1) * and #e67e00 (4.95:1) already pass and are deliberately left alone. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] [style^="color:#888" i], :root[data-theme="dark"] [style*=";color:#888" i], :root[data-theme="dark"] [style*="; color:#888" i] { color: var(--text-muted-5) !important; } :root[data-theme="dark"] [style^="color:#555" i], :root[data-theme="dark"] [style*=";color:#555" i], :root[data-theme="dark"] [style*="; color:#555" i] { color: var(--text-secondary) !important; } :root[data-theme="dark"] [style^="color:#bbb" i], :root[data-theme="dark"] [style*=";color:#bbb" i], :root[data-theme="dark"] [style*="; color:#bbb" i] { color: var(--text-muted-3) !important; } :root[data-theme="dark"] [style^="color:#777" i], :root[data-theme="dark"] [style*=";color:#777" i], :root[data-theme="dark"] [style*="; color:#777" i] { color: var(--text-muted-3) !important; } :root[data-theme="dark"] [style^="color:#aaa" i], :root[data-theme="dark"] [style*=";color:#aaa" i], :root[data-theme="dark"] [style*="; color:#aaa" i] { color: var(--text-muted-6) !important; } :root[data-theme="dark"] [style^="color:#666" i], :root[data-theme="dark"] [style*=";color:#666" i], :root[data-theme="dark"] [style*="; color:#666" i] { color: var(--text-muted) !important; } :root[data-theme="dark"] [style^="color:#999" i], :root[data-theme="dark"] [style*=";color:#999" i], :root[data-theme="dark"] [style*="; color:#999" i] { color: var(--text-muted-6) !important; } :root[data-theme="dark"] [style^="color:#ccc" i], :root[data-theme="dark"] [style*=";color:#ccc" i], :root[data-theme="dark"] [style*="; color:#ccc" i] { color: var(--text-muted-3) !important; } :root[data-theme="dark"] [style^="color:#333" i], :root[data-theme="dark"] [style*=";color:#333" i], :root[data-theme="dark"] [style*="; color:#333" i] { color: var(--text-primary-3) !important; } :root[data-theme="dark"] [style^="color:#222" i], :root[data-theme="dark"] [style*=";color:#222" i], :root[data-theme="dark"] [style*="; color:#222" i] { color: var(--text-strong) !important; } :root[data-theme="dark"] [style^="color:#c0392b" i], :root[data-theme="dark"] [style*=";color:#c0392b" i], :root[data-theme="dark"] [style*="; color:#c0392b" i] { color: var(--text-danger) !important; } :root[data-theme="dark"] [style^="color:#0178bc" i], :root[data-theme="dark"] [style*=";color:#0178bc" i], :root[data-theme="dark"] [style*="; color:#0178bc" i] { color: var(--text-brand) !important; } :root[data-theme="dark"] [style^="color:#900" i], :root[data-theme="dark"] [style*=";color:#900" i], :root[data-theme="dark"] [style*="; color:#900" i] { color: #ff6262 !important; } :root[data-theme="dark"] [style^="color:#856404" i], :root[data-theme="dark"] [style*=";color:#856404" i], :root[data-theme="dark"] [style*="; color:#856404" i] { color: #bf9006 !important; } :root[data-theme="dark"] [style^="color:red" i], :root[data-theme="dark"] [style*=";color:red" i], :root[data-theme="dark"] [style*="; color:red" i] { color: #ff6262 !important; } /* 1px rule dividers drawn with a mid grey - too bright as a line on a dark surface */ :root[data-theme="dark"] [style^="background:#aaa" i], :root[data-theme="dark"] [style*=";background:#aaa" i], :root[data-theme="dark"] [style*="; background:#aaa" i] { background: var(--border-strong) !important; } :root[data-theme="dark"] [style^="background:#fafafa" i], :root[data-theme="dark"] [style*=";background:#fafafa" i], :root[data-theme="dark"] [style*="; background:#fafafa" i], :root[data-theme="dark"] [style^="background-color:#fafafa" i], :root[data-theme="dark"] [style*=";background-color:#fafafa" i], :root[data-theme="dark"] [style*="; background-color:#fafafa" i] { background: var(--surface-alt) !important; } :root[data-theme="dark"] [style^="background:#e0e0e0" i], :root[data-theme="dark"] [style*=";background:#e0e0e0" i], :root[data-theme="dark"] [style*="; background:#e0e0e0" i], :root[data-theme="dark"] [style^="background-color:#e0e0e0" i], :root[data-theme="dark"] [style*=";background-color:#e0e0e0" i], :root[data-theme="dark"] [style*="; background-color:#e0e0e0" i] { background: var(--surface-muted-3) !important; } :root[data-theme="dark"] [style^="background:#f0f4f8" i], :root[data-theme="dark"] [style*=";background:#f0f4f8" i], :root[data-theme="dark"] [style*="; background:#f0f4f8" i], :root[data-theme="dark"] [style^="background-color:#f0f4f8" i], :root[data-theme="dark"] [style*=";background-color:#f0f4f8" i], :root[data-theme="dark"] [style*="; background-color:#f0f4f8" i] { background: var(--surface-info) !important; } :root[data-theme="dark"] [style^="background:#fff0f0" i], :root[data-theme="dark"] [style*=";background:#fff0f0" i], :root[data-theme="dark"] [style*="; background:#fff0f0" i], :root[data-theme="dark"] [style^="background-color:#fff0f0" i], :root[data-theme="dark"] [style*=";background-color:#fff0f0" i], :root[data-theme="dark"] [style*="; background-color:#fff0f0" i] { background: #3a2626 !important; } :root[data-theme="dark"] [style^="background:#ffe0e0" i], :root[data-theme="dark"] [style*=";background:#ffe0e0" i], :root[data-theme="dark"] [style*="; background:#ffe0e0" i], :root[data-theme="dark"] [style^="background-color:#ffe0e0" i], :root[data-theme="dark"] [style*=";background-color:#ffe0e0" i], :root[data-theme="dark"] [style*="; background-color:#ffe0e0" i] { background: #3a2626 !important; } :root[data-theme="dark"] [style^="background:#fff3cd" i], :root[data-theme="dark"] [style*=";background:#fff3cd" i], :root[data-theme="dark"] [style*="; background:#fff3cd" i], :root[data-theme="dark"] [style^="background-color:#fff3cd" i], :root[data-theme="dark"] [style*=";background-color:#fff3cd" i], :root[data-theme="dark"] [style*="; background-color:#fff3cd" i] { background: #3a331f !important; } /* ------------------------------------------------------------------------------------ * Inline style attributes, second sweep * * Found by scratchpad/inline_coverage.py once it was made property-aware. The first version * ignored the colour `white` outright because `color:white` legitimately needs no override - * which also silently excused `background:white`, and that is exactly what left the * monitoring page's expanded batch list (.mon_section) a glaring white panel with the grey * text on it being lightened for a dark surface it never got. * * 16 inline white backgrounds and 13 inline hairline borders across 5 renderers. Brand and * semantic borders (#0178bc, #ffc107, #e08080) are left alone - they read on dark. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] [style^="background:white" i], :root[data-theme="dark"] [style*=";background:white" i], :root[data-theme="dark"] [style*="; background:white" i], :root[data-theme="dark"] [style^="background-color:white" i], :root[data-theme="dark"] [style*=";background-color:white" i], :root[data-theme="dark"] [style*="; background-color:white" i] { background: var(--surface) !important; } :root[data-theme="dark"] [style^="border:1px solid #ccc" i], :root[data-theme="dark"] [style*=";border:1px solid #ccc" i], :root[data-theme="dark"] [style*="; border:1px solid #ccc" i] { border-color: var(--border-default) !important; } :root[data-theme="dark"] [style^="border:1px solid #ddd" i], :root[data-theme="dark"] [style*=";border:1px solid #ddd" i], :root[data-theme="dark"] [style*="; border:1px solid #ddd" i] { border-color: var(--border-subtle-2) !important; } :root[data-theme="dark"] [style^="border:1px solid #900" i], :root[data-theme="dark"] [style*=";border:1px solid #900" i], :root[data-theme="dark"] [style*="; border:1px solid #900" i] { border-color: var(--text-danger) !important; } :root[data-theme="dark"] [style^="border-bottom:2px solid #eee" i], :root[data-theme="dark"] [style*=";border-bottom:2px solid #eee" i], :root[data-theme="dark"] [style*="; border-bottom:2px solid #eee" i] { border-bottom-color: var(--border-subtle) !important; } :root[data-theme="dark"] [style^="border-bottom:1px solid #eee" i], :root[data-theme="dark"] [style*=";border-bottom:1px solid #eee" i], :root[data-theme="dark"] [style*="; border-bottom:1px solid #eee" i] { border-bottom-color: var(--border-subtle) !important; } :root[data-theme="dark"] [style^="border-bottom:1px solid #f2f2f2" i], :root[data-theme="dark"] [style*=";border-bottom:1px solid #f2f2f2" i], :root[data-theme="dark"] [style*="; border-bottom:1px solid #f2f2f2" i] { border-bottom-color: var(--border-subtle) !important; } :root[data-theme="dark"] [style^="border-bottom:1px solid #f0f0f0" i], :root[data-theme="dark"] [style*=";border-bottom:1px solid #f0f0f0" i], :root[data-theme="dark"] [style*="; border-bottom:1px solid #f0f0f0" i] { border-bottom-color: var(--border-subtle) !important; } :root[data-theme="dark"] [style^="border-top:1px solid #e8e8e8" i], :root[data-theme="dark"] [style*=";border-top:1px solid #e8e8e8" i], :root[data-theme="dark"] [style*="; border-top:1px solid #e8e8e8" i] { border-top-color: var(--border-subtle) !important; } /* ------------------------------------------------------------------------------------ * JS-built chrome * * These elements take their colours from .css() calls in scripts/Mobiz3Admin.js and * scripts/module_monitoring.js, which land as an inline style attribute. Matching the * attribute STRING is unreliable here because jQuery normalises colour serialisation * (`white` can come back as `rgb(255, 255, 255)`), so they are overridden by id/class * instead, which needs !important to beat the inline style. * * That is only safe because each of these is set ONCE at construction. Where JS TOGGLES an * inline colour - the .batch_menu_item hover - !important would have frozen the hover in one * state, so that one was moved into CSS instead rather than overridden here. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] #spinnerImage { background-color: var(--surface) !important; border-color: var(--border-strong) !important; } /* * The modal scrim is black at 0.1 alpha. Over a light page that reads as a dim wash; over a * dark page it is invisible, so dialogs stop looking modal. Same colour, enough alpha to read. */ :root[data-theme="dark"] #overlayDiv { opacity: 0.55 !important; } :root[data-theme="dark"] .batch_action_menu { background: var(--surface) !important; border-color: var(--border-default) !important; } /* ------------------------------------------------------------------------------------ * Inline styles emitted by JAVASCRIPT * * The PHP renderers were audited early; the admin JS was not, and it builds HTML as strings * with inline styles of its own (scratchpad/js_colour_audit.py found these). Same attribute * technique as the PHP sweep - it works here because these are literal strings in the source, * not values passed through jQuery's .css(), which re-serialises colours. * ---------------------------------------------------------------------------------- */ :root[data-theme="dark"] [style^="background:#eaf4fb" i], :root[data-theme="dark"] [style*=";background:#eaf4fb" i], :root[data-theme="dark"] [style*="; background:#eaf4fb" i] { background: var(--surface-highlight) !important; } :root[data-theme="dark"] [style^="background:#f0f0f0" i], :root[data-theme="dark"] [style*=";background:#f0f0f0" i], :root[data-theme="dark"] [style*="; background:#f0f0f0" i] { background: var(--surface-muted) !important; } :root[data-theme="dark"] [style^="background:#f5f5f5" i], :root[data-theme="dark"] [style*=";background:#f5f5f5" i], :root[data-theme="dark"] [style*="; background:#f5f5f5" i] { background: var(--surface-raised) !important; } :root[data-theme="dark"] [style^="color:#3858e0" i], :root[data-theme="dark"] [style*=";color:#3858e0" i], :root[data-theme="dark"] [style*="; color:#3858e0" i] { color: var(--text-link) !important; } :root[data-theme="dark"] [style^="color:#c00" i], :root[data-theme="dark"] [style*=";color:#c00" i], :root[data-theme="dark"] [style*="; color:#c00" i] { color: var(--text-danger) !important; } :root[data-theme="dark"] [style^="border:1px solid #b0d4e8" i], :root[data-theme="dark"] [style*=";border:1px solid #b0d4e8" i], :root[data-theme="dark"] [style*="; border:1px solid #b0d4e8" i] { border-color: var(--border-strong) !important; } :root[data-theme="dark"] [style^="border:1px solid #e0e0e0" i], :root[data-theme="dark"] [style*=";border:1px solid #e0e0e0" i], :root[data-theme="dark"] [style*="; border:1px solid #e0e0e0" i] { border-color: var(--border-subtle-2) !important; } :root[data-theme="dark"] [style^="border-bottom:1px solid #ddd" i], :root[data-theme="dark"] [style*=";border-bottom:1px solid #ddd" i], :root[data-theme="dark"] [style*="; border-bottom:1px solid #ddd" i] { border-bottom-color: var(--border-subtle-2) !important; } :root[data-theme="dark"] [style^="border-bottom:2px solid #ddd" i], :root[data-theme="dark"] [style*=";border-bottom:2px solid #ddd" i], :root[data-theme="dark"] [style*="; border-bottom:2px solid #ddd" i] { border-bottom-color: var(--border-subtle-2) !important; } :root[data-theme="dark"] [style^="border-bottom:1px solid #f0f0f0" i], :root[data-theme="dark"] [style*=";border-bottom:1px solid #f0f0f0" i], :root[data-theme="dark"] [style*="; border-bottom:1px solid #f0f0f0" i] { border-bottom-color: var(--border-subtle) !important; } :root[data-theme="dark"] [style^="border-top:1px solid #e0e0e0" i], :root[data-theme="dark"] [style*=";border-top:1px solid #e0e0e0" i], :root[data-theme="dark"] [style*="; border-top:1px solid #e0e0e0" i] { border-top-color: var(--border-subtle-2) !important; } /* * .sms_group_member: module_monitoring.js sets background-color:#f0f4f8 on grouped rows via * .css(). That is a one-shot style on an element which already carries this class, so a class * override is both possible and more reliable than matching the re-serialised inline value. */ :root[data-theme="dark"] .sms_group_member { background-color: var(--surface-menu-hover) !important; }