Dark Mode Snippets — Free HTML CSS JS Dark Mode Theme Examples

Dark mode is now an expectation, and the components that survive it are the ones built on tokens rather than hard-coded colours. These snippets cover the whole pattern: a variable-driven palette, a toggle with three states (light, dark, follow system), persistence that avoids a flash of the wrong theme on load, and components that look deliberate in both.

The recurring lesson is that dark mode is not an inversion. Shadows stop working, pure black is harsher than a dark grey, and saturated brand colours usually need to be softened rather than reused unchanged.

Semantic tokens, not hard-coded colours

A component that references --color-background and --color-text, rather than a literal hex value, gets a second theme for free the moment those custom properties are redefined under a dark selector. Every snippet in this tag is built against a small set of named tokens — surface, text, border, accent — for exactly this reason: adding a theme is then a values-only change, never a rewrite of the components themselves.

Three states, not two

A toggle limited to light and dark forces every user to make an explicit choice, including the majority who would be perfectly happy following their operating system's setting. These snippets default to prefers-color-scheme and layer an explicit override on top only once the user picks one — which is also what lets a three-state control offer "system" as a way back to automatic that a plain two-state switch has no room for.

No flash of the wrong theme

Applying the stored theme from inside a framework's mount effect happens after the first paint, which is precisely when a visible flash of the wrong theme occurs. The fix used throughout this tag is a small inline script in the document head that reads the stored preference and sets a class or data-theme attribute on the root element before the stylesheet-dependent paint happens at all.

Why dark mode is not simply inverted colours

A shadow calculated for a light surface has almost no visible contrast against a dark one, so elevation in these components comes from a lighter surface colour instead, sometimes with a subtle light border rather than a shadow. Saturated brand colours that look vivid on white frequently vibrate uncomfortably against a dark background and need their lightness or saturation adjusted specifically for the dark palette rather than reused unchanged from the light one.