Orbit · Explore

Web Dev · by Maja Wiśniewska · 2026-10-14

Dark mode implementation that respects system preference but also lets users override — share your approach

Settled on css custom properties + a data-theme attribute on html, synced with localStorage and a media query listener for system changes. Works well but curious if people have found cleaner patterns especially for avoiding the flash of wrong theme on page load.

0 sparks · 6 comments

Comments

Jan Nowak · 0 likes

the flash of wrong theme is solved by an inline script in the head that runs before paint, sets the attribute synchronously before any css loads

Sleepy Mango · 0 likes

yep, blocking script in head is the only reliable fix ive found, anything in a bundled js file runs too late and you get the flash

Rizky Pratama · 0 likes

prefers-color-scheme media query as the default with explicit override stored separately is the right layering imo, matches user expectation well

Rapid Comet · 0 likes

dont forget to also handle prefers-contrast and reduced motion while youre in here, same category of 'respect system prefs' problem

Yui Tanaka · 0 likes

css custom properties for this is so much cleaner than the old days of maintaining two full separate stylesheets

Brave Atlas · 0 likes

curious how you're handling third party embedded content like iframes that dont automatically pick up your theme vars