---
title: Theming
description: Customize Imprensa with Areia tokens, dark mode, fonts, logos, and Shiki code themes.
order: 4
tags: [theme, areia]
---

# Theming

Imprensa UI is built with [Areia](https://areia.ilha.build) 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:

```css
* {
  --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`:

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

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

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

## Code themes

Configure Shiki in `vite.config.ts`:

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

Use any [Shiki bundled theme](https://shiki.style/themes). Keep contrast high in both light and dark mode.

## Styling guidance

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.