# Guide: Authoring & Committing a Theme

ChainRender themes are built from **design tokens** and generated as CSS on-chain. You can author a theme, preview
it at zero gas, and commit it once — all through the SDK.

## Preview a theme locally (zero gas)

The runtime exposes the theme-CSS generators, so you can produce and preview a theme's CSS in-process:

```ts
import { lightThemeCss, darkThemeCss, fullThemeCss } from "@chainrender/client/runtime";

const light = lightThemeCss();       // the default light theme CSS
const dark = darkThemeCss();         // the dark preset
const custom = fullThemeCss(myTokens); // your own token set → CSS
```

Inject the CSS into your preview and iterate — spacing, colors, fonts — instantly, with no chain interaction. The
component CSS is token-driven, so changing a spacing or size token re-flows the whole preview.

## The token model

Tokens are semantic (W3C-aligned): colors (with fg/bg pairs), typography (family, size scale, weights), spacing
(xs–xl), sizing, borders, elevation, motion. Components reference tokens (`var(--cr-space-md)`), never hardcoded
values — which is what makes a theme change re-flow the entire page.

Three presets ship: **light**, **dark**, **high-contrast** (WCAG AAA). A **contrast invariant** and a
**legibility floor** (no font < 12px) are enforced — an inaccessible theme can't ship.

## Commit a theme on-chain (once)

When your theme is final, seed its CSS to the on-chain source store (content-addressed → a theme id) and point your
app at that id. From then on, the app renders with your theme via the presentation context — at zero gas per
render. To publish it for others, submit it to a **ThemeSet** (the ownerless theme registry).

## Change without redeploying

Because presentation is a render-time parameter, you can re-theme a *deployed* app just by rendering it with a
different theme id — no redeploy, no new app hash. See **[Theme Without Redeploying](./theme-without-redeploy.md)**.

## Related
- **[Presentation & Theming](../concepts/theming.md)** · **[Build, Grade & Style Before Deploy](./test-before-deploy.md)**