Dark Mode Switcher for Shopify
A dark mode toggle for Online Store 2.0 and vintage themes, built as two Liquid snippets plus a static stylesheet and script. A blocking inline script in <head> resolves the theme from localStorage, prefers-color-scheme and a merchant default, and writes data-theme plus color-scheme on <html> before the browser paints its first frame; the toggle keeps a fixed box in every state so switching cannot reflow the header. It ships a semantic CSS custom property layer wired to theme settings, cross-tab sync via the storage event, reduced-motion handling, and re-sync on the Shopify theme editor's section events. It does not automatically restyle an existing theme - the buyer has to point their own CSS at the tokens. 1.1.0 adds a settings/schema/README cross-checker, light/dark screenshots, and `npm run measure`: a dependency-free headless-Chrome tool that reproduces the pre-paint and CLS measurements on the buyer's own machine, against the bundled harness or their own storefront, including a control mode that makes the same measurement fail on purpose.
iTechVista Studio