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

Paste these into your project to get exactly what you see.

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 for the full list of tokens, and typography for the font presets.

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.