# Themes

Pick from built-in themes like GitHub, Dracula, Nord, and Catppuccin.

Import one theme and add `class="kirari"` to your `<pre>`. Each file only sets fallback colors, so your own `--kirari-*` variables still win.

```ts
import '@vortexlabs/kirari/themes/github-dark.css'
```

| Theme | Appearance | Import |
| --- | --- | --- |
| Kirari | dark | `@vortexlabs/kirari/themes/default.css` |
| Ad Astra Dark | dark | `@vortexlabs/kirari/themes/ad-astra-dark.css` |
| Ad Astra Light | light | `@vortexlabs/kirari/themes/ad-astra-light.css` |
| Catppuccin Latte | light | `@vortexlabs/kirari/themes/catppuccin-latte.css` |
| Catppuccin Mocha | dark | `@vortexlabs/kirari/themes/catppuccin-mocha.css` |
| Daylight | light | `@vortexlabs/kirari/themes/daylight.css` |
| Dracula | dark | `@vortexlabs/kirari/themes/dracula.css` |
| Dusk | dark | `@vortexlabs/kirari/themes/dusk.css` |
| GitHub Dark | dark | `@vortexlabs/kirari/themes/github-dark.css` |
| GitHub Light | light | `@vortexlabs/kirari/themes/github-light.css` |
| Monokai | dark | `@vortexlabs/kirari/themes/monokai.css` |
| Nord | dark | `@vortexlabs/kirari/themes/nord.css` |
| One Dark | dark | `@vortexlabs/kirari/themes/one-dark.css` |
| Paper | light | `@vortexlabs/kirari/themes/paper.css` |
| Rosé Pine | dark | `@vortexlabs/kirari/themes/rose-pine.css` |
| Rosé Pine Dawn | light | `@vortexlabs/kirari/themes/rose-pine-dawn.css` |
| Solarized Dark | dark | `@vortexlabs/kirari/themes/solarized-dark.css` |
| Solarized Light | light | `@vortexlabs/kirari/themes/solarized-light.css` |
| Tokyo Night | dark | `@vortexlabs/kirari/themes/tokyo-night.css` |
| Vitesse Dark | dark | `@vortexlabs/kirari/themes/vitesse-dark.css` |
| Vitesse Light | light | `@vortexlabs/kirari/themes/vitesse-light.css` |

`@vortexlabs/kirari/theme.css` is the same file as `themes/default.css`. Ported themes are adaptations of the originals’ published colors, credited in each file’s header. Try any of them on your own code in the [playground](/playground/).