/** * IRIS Theme Toggle — class-driven theme binding * * Bridges the JS (which toggles .u-mode-light / .u-mode-dark on ) to * Webflow's Lightning CSS theme variables. Without this, clicking the toggle * changes the class but no colors move. * * The two --lightningcss-* custom properties are Webflow's mode flags: * set to `initial` -> that mode is ACTIVE * set to ``(empty) -> that mode is OFF * * Specificity note: `html.u-mode-*` (0,1,1) beats `:root` (0,1,0), so the * toggle always wins over any default/OS rule Webflow injects. */ :root { /* Don't advertise dark to the browser — the toggle is the only switch. */ color-scheme: light; } /* Default + explicit light */ :root, html.u-mode-light { --lightningcss-light: initial; --lightningcss-dark: ; } /* Dark — applied when the toggle adds .u-mode-dark to */ html.u-mode-dark { --lightningcss-light: ; --lightningcss-dark: initial; } /* ---- Toggle switch styling (unchanged from MAST) ---- */ [data-theme-toggle="checkbox"]::before { content: ""; position: absolute; width: calc(var(--_layout---spacing--s) - 0.4em); height: calc(var(--_layout---spacing--s) - 0.4em); border-radius: 50%; background-color: var(--primary--text); top: 0.2em; left: 0.2em; transition: transform 0.3s ease; } [data-theme-toggle="checkbox"]:checked::before { transform: translateX(1em); } /* ---- Designer canvas preview (shows toggle state in the Webflow Designer) ---- */ html.wf-design-mode [data-theme-toggle="checkbox"]::before { transform: translateX(1.5em); } html.wf-design-mode [data-theme-toggle="dark-label"] { display: none; } html.wf-design-mode [data-theme-toggle="light-label"] { display: block; }