/** * VSDM - Very Simple Dark Mode - front-end stylesheet. * The variable VALUES are injected inline (see VSDM_Frontend::inline_variables). * * Strategy * -------- * Elementor writes most backgrounds into GENERATED css files, not inline styles, * so they cannot be matched by attribute selectors. Worse, blindly clearing all * container backgrounds also destroys legitimate "card" surfaces (a white box * sitting on a background image, etc.). * * So the companion script (dark-mode.js) reads each element's ORIGINAL (light) * background once and tags every element that has a LIGHT background with the * class .vsdm-surface. Here we simply repaint those surfaces with the dark * palette. Elements that were transparent stay transparent (the dark page shows * through); background IMAGES and intentionally dark / colored sections are left * untouched. */ html.vsdm-dark, html.vsdm-dark body, html.vsdm-light, html.vsdm-light body { transition: background-color .25s ease, color .25s ease; } /* Native browser parts (scrollbars, checkboxes, select popups, date pickers) follow the active scheme. */ html.vsdm-dark { color-scheme: dark; } html.vsdm-light { color-scheme: light; } /* Visitors who ask the system for less motion get instant switches. */ @media (prefers-reduced-motion: reduce) { html.vsdm-dark, html.vsdm-dark body, html.vsdm-light, html.vsdm-light body, .vsdm-toggle--floating { transition: none !important; } .vsdm-toggle--floating:hover { transform: none !important; } } /* Measurement freeze: while the engine reads computed backgrounds it must not see in-flight transition values (Elementor puts background transitions on containers). dark-mode.js toggles this class around every measuring pass. */ html.vsdm-measure, html.vsdm-measure * { transition: none !important; animation: none !important; } /* --- Opt-out: .vsdm-ignore --- Any element carrying .vsdm-ignore keeps its native look in the alternate scheme, together with everything inside it: no surface repaint, no text or field recolouring (dark-mode.js also skips it in the contrast pass). Every scheme rule below ends with :not(:where(.vsdm-ignore, .vsdm-ignore *)): :where() has zero specificity, so the rules keep exactly the specificity they had before 0.3.1. Note: the admin "custom CSS" is NOT filtered. */ /* --- Page base (both alternate schemes consume the same variables) --- */ html.vsdm-dark body, html.vsdm-light body { background-color: var(--vsdm-bg-page) !important; color: var(--vsdm-text); } html.vsdm-dark :is(h1, h2, h3, h4, h5, h6):not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light :is(h1, h2, h3, h4, h5, h6):not(:where(.vsdm-ignore, .vsdm-ignore *)) { color: var(--vsdm-heading, var(--vsdm-text)); } html.vsdm-dark :is(p, li, td, th):not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light :is(p, li, td, th):not(:where(.vsdm-ignore, .vsdm-ignore *)) { color: var(--vsdm-text-soft); } /* --- Native-scheme surfaces detected by dark-mode.js -> alternate card --- */ html.vsdm-dark .vsdm-surface:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light .vsdm-surface:not(:where(.vsdm-ignore, .vsdm-ignore *)) { background-color: var(--vsdm-bg-card) !important; border-color: var(--vsdm-border) !important; } /* Surfaces whose native background was a CSS gradient: drop the gradient too. */ html.vsdm-dark .vsdm-surface--flat:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light .vsdm-surface--flat:not(:where(.vsdm-ignore, .vsdm-ignore *)) { background-image: none !important; } /* --- Sticky-on-scroll header (Elementor native) safety: stay solid --- */ html.vsdm-dark .elementor-sticky--effects, html.vsdm-light .elementor-sticky--effects { background-color: var(--vsdm-bg-page) !important; } /* --- Form fields --- !important: Elementor Pro form widgets style their fields with much higher specificity (per-element selectors), which would keep e.g. dark inputs on a light card after the scheme switch. */ html.vsdm-dark input:not([type="submit"]):not([type="button"]):not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-dark textarea:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-dark select:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-dark .elementor-field-group .elementor-field:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light input:not([type="submit"]):not([type="button"]):not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light textarea:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light select:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light .elementor-field-group .elementor-field:not(:where(.vsdm-ignore, .vsdm-ignore *)) { background-color: var(--vsdm-bg-elevated) !important; color: var(--vsdm-text) !important; border-color: var(--vsdm-border) !important; } /* Field labels: the repaint above covers the inputs themselves, but a label carries its own colour (Elementor Pro writes one per widget), so it would stay dark on a dark card. */ html.vsdm-dark label:not(:where(.vsdm-ignore, .vsdm-ignore *)), html.vsdm-light label:not(:where(.vsdm-ignore, .vsdm-ignore *)) { color: var(--vsdm-text) !important; } html.vsdm-dark :not(:where(.vsdm-ignore, .vsdm-ignore *))::placeholder, html.vsdm-light :not(:where(.vsdm-ignore, .vsdm-ignore *))::placeholder { color: var(--vsdm-text-soft); opacity: .8; } /* ============================================================ TOGGLE BUTTON ============================================================ */ /* !important shields the widget from theme/kit global button styles (Elementor kits style bare