How to recolor a website with CSS variables

A custom property holds a value; var() reads it. Put the palette on :root and point the rules at it:

:root {
  --color-primary: #2a9d8f;
  --color-surface: #ffffff;
  --color-text: #264653;
}

.button {
  background: var(--color-primary);
  color: var(--color-surface);
}

body {
  background: var(--color-surface);
  color: var(--color-text);
}

A second palette is a second set of definitions, switched by an attribute, a class or a media query such as prefers-color-scheme. Nothing else in the stylesheet changes:

/* A second palette: only the definitions change. */
[data-palette="sunset"] {
  --color-primary: #e76f51;
  --color-text: #3d1d00;
}

The work is in step 1. Colors sit in more places than color and background-color: border shorthands, box-shadow and text-shadow, every stop of a gradient, outlines, SVG fill and stroke, inline styles in the HTML, and transparent versions such as rgb(0 0 0 / 0.5). A hover color left as a literal hex keeps the old palette the moment someone points at the button. Recolor's engine reads all of these, which is why it can repaint sites that never used variables; How Recolor repaints a page lists what it covers.

Name variables by what they do, --color-primary or --color-surface, not by what they are, --teal: the name then survives the next palette. Tints, shades and transparent versions do not each need a variable; modern CSS can derive them from one:

.badge {
  /* A light tint of the primary color, without a variable of its own. */
  background: color-mix(in oklch, var(--color-primary) 15%, white);
}

.overlay {
  /* The same color at half opacity, with relative color syntax. */
  background: rgb(from var(--color-primary) r g b / 50%);
}

Recolor uses the second form itself: on pages built with Tailwind 3, colors whose opacity comes from a variable are rewritten into relative colors, so they keep their opacity when the palette changes. If your palette ends up in Tailwind, Tailwind v4 @theme colors from a palette shows the same idea there.

Scripts can change a variable on any element; on :root it reaches the whole page:

// One write repaints every element that uses the variable.
document.documentElement.style.setProperty("--color-primary", "#e76f51");

For many colors at once it is cheaper to replace the text of one <style> element that defines them all, so the browser restyles once. That is what Recolor does on every press of Space. On October 7, 2026 the production build wrote the new variables 3 ms after the key on its landing sample, and on github.com, with 28,104 declarations, the browser repainted 1 to 3 frames after the palette strip.

When a page loads, the engine walks every stylesheet it can read, the inline styles and the color attributes of SVG and old HTML. Each exact color gets its own variable, named like --rc-c3m1, and every declaration that used the color is rewritten to var(--rc-c3m1), keeping its !important and its place in the cascade. The variables start at the original values, so the page looks the same. Then the palette only ever touches the variables. Which color each variable gets is the mapping, explained on Strength, neutral tint and overrides.

Pixels. Photos, PNG logos, video, canvas drawings and WebGL keep their colors whatever the CSS says, which is easy to see by previewing a palette on the real website; an SVG file loaded through an <img> does too, while SVG written into the HTML follows CSS. Plan for that in a redesign: a logo or an illustration may need a new file. And a new value is not automatically a readable one: keep text and its background apart in lightness, as keeping a palette accessible explains.