Guides

Guide: Theme Without Redeploying

Goal: change your app's colors, spacing, or fonts — at zero gas, no redeploy.

Presentation is a render-time parameter. Pass a presentation context when you render:

import { renderComponent } from "@chainrender/client/runtime";

const html = await renderComponent({
  rpc, hash,
  context: { themeId: "0x<theme>", chartW: 960, chartH: 520 },
});

For whole-page spacing/font changes, override the design tokens — the component CSS is token-driven, so scaling a spacing token re-flows the entire page. This happens in the browser (or via the render context) at zero gas and zero chain calls during iteration; you seed a chosen theme on-chain only once, when it's final.

To commit a theme as your app's default, seed its CSS to the on-chain store and point your app at the new theme id. See Concepts → Theming.