Theming

stable

Token reference for Farn's two-axis theming system. For the design rationale and live demos, see Foundations › Surfaces.

Surface Depth

Apply data-surface to set depth on any element. Tokens resolve automatically for the active theme.

`data-surface`	Light `--color-bg`	Dark `--color-bg`	Light `--color-bg-panel`	Dark `--color-bg-panel`	Use
`base`	`--bm2-birch`	`--in0-void`	inherits	inherits	Resets to page bg inside a deeper surface
`layer`	`--bm1-mist`	`--in1-iron`	`--bm2-birch`	`--in2-slate`	Cards, sidebars, panels
`overlay`	`--bm0-sand`	`--in2-slate`	inherits	`--in2-slate` (capped)	Modals, dropdowns, floating elements

The dark overlay ceiling: in dark mode --color-bg-panel inside an overlay is capped at --in2-slate — the same as the overlay background — because slate is the deepest available surface.

Theme Toggle

Set data-theme on any element to control its theme context. All semantic tokens re-declare inside [data-theme] — no extra overrides needed.

<!-- Page-level: set on <html> -->
<html data-theme="dark">

<!-- Element-level: local override -->
<section data-theme="dark">
  Always dark, regardless of the page theme
</section>

<!-- Composed: pinned theme + explicit depth -->
<section data-theme="dark" data-surface="layer">
  Dark panel, card depth
</section>

Semantic Token Reference

All component styles reference these tokens — never raw palette tokens.

Background

Token	Light	Dark	Use
`--color-bg`	`--bm2-birch`	`--in0-void`	Page background
`--color-bg-panel`	`--bm1-mist`	`--in1-iron`	Cards, panels
`--color-bg-inset`	`--bm0-sand`	`--in2-slate`	Input fills, sunken areas
`--color-bg-code`	`--fo3-deepwater`	`--in1-iron`	Code block background

Text

Token	Light	Dark	Use
`--color-text`	`--in0-void`	`--bm2-birch`	Primary text
`--color-text-secondary`	`--in2-slate`	`--bm1-mist`	Supporting text
`--color-text-tertiary`	`--in3-ash`	`--bm0-sand`	Placeholders, captions (AA Large only)

Borders

Token	Light	Dark	Use
`--color-border`	`--in3-ash`	`--in2-slate`	Default border
`--color-border-strong`	`--in1-iron`	`--bm0-sand`	Prominent dividers
`--color-border-subtle`	rgba 55,65,81 12%	rgba 75,85,99 25%	Hairline borders

Accent & State

Token	Both modes	Use
`--color-accent`	`--fo1-fern`	CTAs, links, focus ring
`--color-accent-hover`	light: forest · dark: sage	Hover state
`--color-accent-text`	`--bm2-birch`	Text on accent backgrounds
`--color-error`	`--bl0-ember`	Error, destructive
`--color-warning`	`--bl2-grain`	Warning, draft
`--color-success`	`--bl3-moss`	Success, published

FOWT Prevention

Always add the inline FOWT script to <head> before anything else renders. See Foundations › Surfaces for the full explanation, or Getting Started for setup steps.