Customize
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.
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.
// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)// a little light
const name = 'kirari'
shine(name, 42)