---
title: "Theming"
description: "Every color, radius, shadow, font, size and width is a CSS variable in @arbol-ai/ui/theme.css. Dark mode, the mono appearance and fonts."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

Every color, radius, shadow, font, size and width the components draw with is a CSS variable in
`@arbol-ai/ui/theme.css`: change one and every component, block and app that uses the library follows.
Components never carry a color or size of their own, so a theme change never misses one.

## Override a token

Set it after the import, for your app only:

```css title="app.css"
@import 'tailwindcss';
@import '@arbol-ai/ui/theme.css';

:root {
  --app-shell-sidebar-width: 16rem;
  --table-row-height-compact: 2.75rem;
}
```

Tailwind exposes the tokens as utilities through `@theme inline`: `bg-primary`, `text-muted-foreground`,
`border-border`, `rounded-field`, `shadow-md`, and the gray and status ramps (`bg-gray-a2`,
`bg-red-3 text-red-11 border-red-a3`).

## Dark mode and mono

- **Dark mode** is the `dark` class on `<html>`.
- **The grayscale appearance** is `data-theme="mono"` on `<html>`; `brand`, the default, is the
  surgical teal.

Set both before the first paint, with an inline script in `index.html`, to avoid a flash. Every
[component page](https://epidermis.getarbol.com/components/) has a switch for the appearance, and its examples follow this site's dark
mode.

## Fonts

The theme names font families and never ships font files. Each stack tries the app's own faces first
(Arbol's licensed ones), then the brand's open faces, Schibsted Grotesk and Martian Mono (SIL Open Font
License, from Fontsource or Google Fonts), then the system's. Load your faces with `@font-face`, or
override the stacks:

```css
:root {
  --ui-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ui-font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ui-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
```

Source: https://epidermis.getarbol.com/guides/theming/index.mdx