Theming

Imprensa UI is built with Areia and Tailwind CSS v4. The starter keeps styling mostly in utility classes and theme tokens, so you can rebrand without rewriting components.

Theme tokens

Set tokens in src/app.css. The most common change is the primary color:

* {
  --areia-primary: #7c3aed;
}

Areia components, links, focus rings, and active navigation states use these tokens automatically.

Light, dark, and system mode

The starter includes a theme toggle with three modes:

Light — force light colors
Dark — force dark colors
System — follow prefers-color-scheme

The choice is saved in localStorage as imprensa:theme. The runtime applies the theme before rendering to avoid a flash of the wrong color scheme.

Logo and brand name

Replace public/logo.svg with your logo. The default LogoButton from imprensa/components renders /logo.svg beside the text “Imprensa”.

For a product site, create your own logo button or top bar in src/lib/components/ and use it from the landing page or layout.

Fonts

The starter imports Geist in src/main.ts:

import "@fontsource-variable/geist";
import "@fontsource-variable/geist-mono";

To use another font, replace those imports and update the Areia font tokens:

* {
  --areia-font-sans: "Inter", system-ui, sans-serif;
  --areia-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Code themes

Configure Shiki in vite.config.ts:

imprensa({
  shiki: {
    themes: { light: "night-owl-light", dark: "houston" },
  },
});

Use any Shiki bundled theme. Keep contrast high in both light and dark mode.

Prefer small local components and theme tokens over global overrides. If a style should affect all docs pages, put it in src/app.css; if it belongs to one UI section, keep it next to that component.