Themes

A theme is a CSS token file. That’s the whole contract.

No theme API, no styled-components layer, no build step. Everything the admin draws reads from a set of CSS custom properties. To restyle it: copy the file, change values, import yours after highseam.css. To follow the visitor’s preference:

admin: { theme: 'light' | 'dark' | 'system' }

lodestone, the built-in default

A lode is a seam of ore; a lodestone is the naturally magnetic stone miners navigated by. Dark shell, dark canvas, one vein of ore-bright green. The site you’re reading wears these exact tokens, because the product and its website should be visibly the same object.

highseam/themes/lodestone.css

/* lodestone — highseam's original theme, and the built-in default.
 * A lode is a seam of ore; a lodestone is the naturally magnetic
 * stone miners navigated by. Dark shell, dark canvas, one vein of
 * ore-bright green. */
[data-hs-theme],
:root {
	/* shell */
	--color-bg: #0b0c0e;
	--color-elevate: #141518;
	--color-elevate-2: #1d1f23;
	--color-border: #2c2e33;

	/* text */
	--color-fg: #e8e9eb;
	--color-muted: #8e9095;

	/* the vein */
	--color-primary: #c5f74f;
	--color-primary-fg: #101203;

	/* signals */
	--color-danger: #ef4444;
	--color-success: #34d399;

	/* the writing surface — its own token so it can diverge from
	   the shell (set it white for a paper canvas in a dark admin) */
	--hs-canvas: var(--color-elevate);
	--hs-canvas-fg: var(--color-fg);

	/* shape + type */
	--radius: 0.5rem;
	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

--color-bg

shell background
#0b0c0e
--color-elevate

raised surface
#141518
--color-elevate-2

raised again
#1d1f23
--color-border

every hairline
#2c2e33
--color-fg

text
#e8e9eb
--color-muted

secondary text
#8e9095
--color-primary

the vein
#c5f74f
--color-primary-fg

text on the vein
#101203
--color-danger

destructive
#ef4444
--color-success

confirmations
#34d399

--hs-canvas

The writing surface is its own token, so it can diverge from the shell: set it to white for a paper canvas inside a dark admin.

canvas: elevate

canvas: paper

Make yours

Copy lodestone.css, change values, import it. The file above is the canonical, documented reference; importing lodestone itself is a no-op, because its values mirror the built-in defaults. That’s deliberate: the reference theme is executable documentation.

src/routes/+layout.svelte (script)

// a theme is a CSS token file. import it after highseam.css:
import '../highseam.css';
import 'highseam/themes/lodestone.css';  // the default, explicitly
// yours: copy lodestone.css, change values, import that instead