> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
"$schema": https://holocron.so/frontmatter.json
title: Theming
description: Colors, dark mode, and CSS variable tokens.
icon: palette
---

# Theming

Holocron uses **shadcn-compatible CSS variables**. If you already have a shadcn theme, you can port it directly by overriding the same variable names.

<Aside>
  <Note>
    Holocron follows the standard shadcn/ui v2 naming convention for all CSS tokens.
  </Note>
</Aside>

## Primary color

Set a brand color in `docs.jsonc`. This controls links, active states, and branded elements:

```jsonc
{
  "colors": {
    "primary": "#6366f1"
  }
}
```

You can also specify separate light and dark mode accent variants:

```jsonc
{
  "colors": {
    "primary": "#6366f1",
    "light": "#818cf8",
    "dark": "#4f46e5"
  }
}
```

<Info>
  Mintlify names these by the shade, not the mode: `colors.dark` is used in light mode, and `colors.light` is used in dark mode.
</Info>

## Appearance mode

Control the default color mode and whether users can toggle:

```jsonc
{
  "appearance": {
    "default": "system",
    "strict": false
  }
}
```

| Value          | Behavior                               |
| -------------- | -------------------------------------- |
| `"system"`     | Follow the user's OS setting (default) |
| `"light"`      | Force light mode                       |
| `"dark"`       | Force dark mode                        |
| `strict: true` | Hide the mode toggle                   |

## CSS variable overrides

Override tokens in your own CSS file to customize beyond the primary color:

```css
:root {
  --background: #fafafa;
  --foreground: #0a0a0a;
  --primary: #6366f1;
  --muted-foreground: #737373;
  --border: #e5e5e5;

  @variant dark {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --primary: #818cf8;
    --border: #262626;
  }
}
```

Use `@variant dark` instead of Tailwind's `dark:` prefix. This keeps all theme values in CSS variables that adapt automatically.

## Available tokens

The full token set includes:

| Token                  | Purpose                |
| ---------------------- | ---------------------- |
| `--background`         | Page background        |
| `--foreground`         | Default text color     |
| `--primary`            | Brand accent color     |
| `--muted`              | Muted background       |
| `--muted-foreground`   | Secondary text         |
| `--border`             | Border color           |
| `--accent`             | Hover/focus background |
| `--card`               | Card surface           |
| `--sidebar-foreground` | Sidebar text           |
| `--sidebar-primary`    | Sidebar active item    |

## Semantic colors

Holocron defines semantic colors for callouts and badges that auto-adapt to dark mode:

`--blue`, `--green`, `--yellow`, `--orange`, `--red`, `--purple`

These are used by components like `<Note>`, `<Warning>`, `<Tip>`, and `<Badge>`.


---

*Powered by [holocron.so](https://holocron.so)*