Theming

During setup

create-svocs-docs asks for an accent color when scaffolding a new site:

Accent color (hex): (#ff3c00) #2563eb

Leave it blank to keep the default ember orange, or type any hex color — non-interactively, pass --accent=#2563eb. Everything else — buttons, links, badges, the search dialog’s focus ring, the header glow — updates to match.

After setup

The whole palette lives in src/routes/+layout.svelte, in one <style> block with two sections: :root[data-theme='dark'] and :root[data-theme='light']. Change --accent there any time:

:root[data-theme='dark'] {
	--accent: #2563eb;
	/* ... */
}

--accent-soft, --accent-strong, and --glow-a (the ambient background glow) aren’t independent colors — they’re color-mix() expressions derived from --accent:

--accent-soft: color-mix(in srgb, var(--accent) 78%, white);
--accent-strong: color-mix(in srgb, var(--accent) 60%, white);
--glow-a: color-mix(in srgb, var(--accent) 10%, black);

Changing one line re-themes buttons, links, and the header glow together — a custom accent never leaves the ambient glow stuck looking ember-colored just because it wasn’t part of the CLI prompt.

The rest of the palette

--bg, --text, --line, and friends are neutral tones (near-black/near-white grays) and stay independent of --accent on purpose — they’re what make dark mode read as dark mode regardless of brand color. Adjust them directly if you want a cooler or warmer neutral base; there’s no derivation to keep in sync there, each is its own literal value, dark and light set separately.

Reading a color-mix() custom property from JS

If you’re building something that needs the resolved color — a canvas/WebGL effect, for instance — getComputedStyle(document.documentElement).getPropertyValue('--accent-soft') returns the literal color-mix(...) text, not a computed color. Resolve it by assigning the var to a real CSS property on a probe element and reading that back:

const probe = document.createElement('div');
document.body.appendChild(probe);
probe.style.color = 'var(--accent-soft)';
getComputedStyle(probe).color; // "color(srgb 1 0.42 0.22)" or "rgb(255, 106, 56)"

Note the two possible output formats — a color-mix() result serializes as color(srgb r g b) (already 0–1 normalized) in Chromium, while a plain literal serializes as legacy rgb(r, g, b) (0–255). Code that consumes this needs to branch on which one it got.