# Styling

> Theme tokens, Notion colors and dark mode.

notionic's components are styled with Tailwind CSS classes that use shadcn/ui's tokens, so they follow your theme without configuration.

## Notion's colors

Notion's nine colors are CSS variables in `notionic/styles.css`, such as `--notionic-red`, with light values and dark ones under the `.dark` class, as in shadcn/ui. Each background color (`--notionic-red-bg`…) is mixed from its text color and your `--background`, so it follows both.

To match your brand, override the text colors after the import:

```css
:root,
.dark {
  --notionic-red: var(--destructive);
  --notionic-blue: var(--primary);
}
```

Mapping to tokens that already switch in dark mode keeps both modes right. Set `--notionic-bg-mix` (default `14%`, `22%` in dark mode) to make every background stronger or subtler, or override one `--notionic-*-bg` directly.

## The root element

`NotionRenderer` renders a `div` with the `notionic` class, a vertical gap between blocks and your text color. Add classes with `className`:

```typescript
<NotionRenderer blocks={blocks} className="text-lg" />
```

## Headings

Notion's heading 1 renders as `<h2>`, heading 2 as `<h3>`, and so on, since your page title is the `<h1>`. Every heading gets an id and an anchor link.