# Theme builder

> Try every theming option on this page, and leave with the files to reproduce it.

Source: https://aymericchaverot.github.io/zenith-docs/customization/builder/

Every control below applies to this page as you use it, chrome included. The two files at the bottom update as you go: paste them into your project and you get what you are looking at.

<ThemeBuilder />

## Why two files

A stylesheet cannot do everything. Fonts have to be declared in the config to be self-hosted by the Astro Fonts API, and the backdrop is an attribute on the page rather than a style, so it is an option too. Everything that *is* a plain token — corner radius, content width, colors — belongs in the stylesheet, where it stays yours.

Anything you see in the snippets can also be written by hand: see [theming](/customization/theming/) for the full list of tokens, and [typography](/customization/typography/) for the font presets.

## Custom colors

The color picker next to the accent presets takes any color. The stylesheet uses it as is in light mode, and derives the dark mode accent from it with `oklch(from …)`: the same hue and chroma, with the lightness raised so it stays readable on a dark background. That syntax works in every current browser, from Chrome 119, Safari 16.4 and Firefox 128.

:::note
Nothing here is saved. Reload the page and it returns to the theme of this site.
:::