HTML and CSS State

Theme Tokens

CSS Variables Become Rendered Color

A theme card changes because JavaScript writes CSS custom properties. Each replay step connects the token write to the browser-rendered colors.

Program

The source does not draw pixels directly. It writes theme tokens and classes, then the browser resolves those values through CSS.

theme_tokens.js 
const panel = document.querySelector('#theme-panel');
const label = panel.querySelector('.theme-label');

panel.style.setProperty('--accent', '#2563eb');
panel.style.setProperty('--surface', '#dbeafe');
label.textContent = 'Ocean';

panel.classList.add('theme-contrast');
panel.dataset.theme = 'contrast';
panel.style.setProperty('--accent', '#f97316');
label.textContent = 'Contrast';

panel.classList.add('theme-ready');
panel.style.setProperty('--surface', '#dcfce7');
label.textContent = 'Ready';
custom property A CSS custom property is a named value such as `--accent` that other CSS rules can reuse with `var(--accent)`.
setProperty `element.style.setProperty('--name', value)` writes a CSS custom property from JavaScript.
computed style Computed style is the final value the browser applies after selectors, classes, attributes, and custom properties resolve.