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:
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.