Color Theme Switcher — Free HTML CSS JS Snippet

When you visit a modern web app and it offers a dark mode or accent color picker, you immediately feel that the product respects your preferences. Users today expect theme customization for real reasons: high-contrast dark mode reduces eye strain during long sessions, accent color choices reinforce personal identity and brand trust, and accessibility requirements like WCAG demand sufficient contrast in every palette you ship. If your app only offers a single hard-coded color scheme, a growing segment of your users — especially those on OLED displays or with photosensitivity — will leave for a product that adapts to them. This color theme switcher HTML CSS JS snippet gives you a complete, production-ready starting point: 6 curated accent themes, a dark/light mode toggle, and a live preview panel, all driven by CSS custom properties and vanilla JavaScript with zero dependencies.

How CSS custom properties power the theming system

The entire system rests on six CSS variables declared on :root: --accent, --accent-dim, --bg, --surface, --text, and --text2. Every colored element — buttons, badges, borders, dots, code highlights — reads from these tokens rather than hardcoded hex values. When applyTheme() calls document.documentElement.style.setProperty('--accent', value) via setProperty(), the browser triggers a single recalculation pass that updates every element consuming that variable simultaneously. There is no class-toggling on hundreds of individual nodes, no stylesheet swapping, and no forced reflow. The cascade handles propagation instantly. You can pair this with a dark mode toggle for standalone mode switching or a color picker input to let users define fully custom accent values.

The 6 preset themes and the THEMES object

The THEMES object maps six named keys — Indigo, Rose, Emerald, Amber, Sky, and Violet — to a configuration record containing accent (the primary hex), accentDim (a transparent rgba tint used for hover backgrounds and chip fills), lightBg and darkBg (the page-level background for each mode), and lightSurface and darkSurface (the card/panel background). The dark variants are deep tinted backgrounds — for example, Indigo dark uses #0f1629 rather than a generic #1a1a1a — so each dark mode variant feels harmonious with its accent rather than a generic night mode. Adding a seventh theme is a single object addition; the buildSwatches() function iterates Object.entries(THEMES) and generates a swatch button automatically. Explore the theme palette generator and color swatch snippets to design and preview palettes before adding them here.

Dark/light mode toggle and the isDark flag

The isDark boolean is the second parameter of applyTheme(themeName, isDark). When setMode('dark') is called, it flips isDark to true and immediately re-applies the current theme using the dark background pair. The function then writes both values to localStorage independently — cts-theme stores the theme name and cts-dark stores '1' or '0'. Separating them lets users change theme and mode independently without either overwriting the other. Because loadPreference() runs before the first call to applyTheme(), the correct combination is applied before any elements paint, eliminating the white flash that plagues naive localStorage approaches. If no stored preference exists, you can fall back to prefers-color-scheme to honor the OS setting automatically (see the FAQ below).

The live preview panel — settings gear, swatches, and demo card

The theme settings panel slides in from the right edge using transform: translateX(100%) as its closed state and translateX(0) on the .open class. A cubic-bezier(0.4,0,0.2,1) easing curve — the same used by Material Design's standard transitions — makes the panel feel fast out of the gate and settle smoothly into place. Inside the panel, the swatch section renders six circular <button> elements colored with each theme's accent value. An SVG checkmark with opacity: 0 sits inside each swatch and becomes visible via the .active class when that theme is selected. Below the swatches, a mini preview card shows a badge, a primary button, and a ghost button all consuming the live CSS variables — so every change is visible before closing the panel. A gear icon button in the top-right of the main canvas opens the panel; it rotates 30 degrees on hover as a tactile affordance. You can see a similar full-page composition in the dashboard layout snippet.

Extending with custom themes and integrating into React or Next.js

To add a custom theme, append a key to the THEMES object with your desired accent, accentDim, lightBg, darkBg, lightSurface, and darkSurface values. The swatch and settings panel update automatically. In a React app, lift currentTheme and isDark into useState, call applyTheme() inside a useEffect that depends on both values, and place savePreference() in the same effect. For global access across routes, wrap the state in a React context so any component can read or update the theme without prop drilling. In Next.js specifically, use a suppressHydrationWarning attribute on <html> and apply the CSS variables via an inline <style> tag rendered server-side from a cookie value to eliminate the localStorage hydration flash entirely for authenticated sessions.