/* ============================================================ Dark Mode Switcher — CSS Strategy: filter: invert(1) on inverts every pixel (white→black, black→white) regardless of theme CSS or inline styles. Images/video are counter-inverted so they keep their original colours. ============================================================ */ /* --- Page-wide inversion ---------------------------------- */ html[data-darkmode="dark"] { filter: invert(1); background: #000 !important; } /* --- Restore images, video, iframes to original colours --- A second invert(1) cancels out the html-level invert. canvas is intentionally excluded so it gets inverted along with the rest of the page. */ [data-darkmode="dark"] img, [data-darkmode="dark"] video, [data-darkmode="dark"] iframe, [data-darkmode="dark"] embed, [data-darkmode="dark"] object, [data-darkmode="dark"] picture { filter: invert(1); } /* --- Icons / logos that should follow dark mode ---------- Remove the counter-invert so the page-level invert(1) applies — black icon becomes white and vice versa. */ [data-darkmode="dark"] a[href*="instagram"] img, [data-darkmode="dark"] a[href*="instagram"] svg, [data-darkmode="dark"] .instagram img, [data-darkmode="dark"] .instagram svg, [data-darkmode="dark"] .social-instagram img, [data-darkmode="dark"] .social-instagram svg, [data-darkmode="dark"] img[src*="instagram"] { filter: none; } /* --- Scrollbar (Chromium) --------------------------------- */ html[data-darkmode="dark"] ::-webkit-scrollbar { background: #000; width:6px; } html[data-darkmode="dark"] ::-webkit-scrollbar-thumb { background: #555; } /* ============================================================ Circle button ============================================================ */ .darkmode-switcher { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; outline: none; } .darkmode-switcher:focus-visible .darkmode-switcher__circle { box-shadow: 0 0 0 3px #888; } .darkmode-switcher__circle { width: 20px; height: 20px; border-radius: 50%; background: #ffffff; /* white in light mode; html invert(1) flips it to black in dark mode */ display: block; transition: background 0.3s ease, box-shadow 0.3s ease; }