# Themes

> Gallery generated by `src/web/wizard/gen_themes.py gallery`; previews by `tools/render_theme_previews.cjs`. Do not edit by hand.

**112 themes.** Opt a served page into one with a build directive - `<!--#theme dracula-->` or `<!--#theme generated/dracula-->` before `</head>` (see [src/web/README.md](../src/web/README.md)). Need an exact color that is not here? Generate your own from one anchor color:

```sh
python src/web/wizard/gen_themes.py custom --base '#36454f' --mode dark --name charcoal --out my.css
```

&dagger; = named after a company/product trademark: shipped in the open-source (AGPL) build, but dropped from a commercial build (`DETWS_THEMES_INCLUDE_TRADEMARKED=0`). The palette is just colors; only the branded name is gated.

## Bespoke

Hand-authored, with personality the palette engine cannot capture (CRT scanlines, nyan trails).

<table>
<tr>
<td align="center"><img src="theme_preview/bubbly.png" width="240" alt="bubbly"><br><code>bubbly</code></td>
<td align="center"><img src="theme_preview/crt-green.png" width="240" alt="crt-green"><br><code>crt-green</code></td>
<td align="center"><img src="theme_preview/cute.png" width="240" alt="cute"><br><code>cute</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/keroppi.png" width="240" alt="keroppi"><br><code>keroppi</code> &dagger;</td>
<td align="center"><img src="theme_preview/nyancat.png" width="240" alt="nyancat"><br><code>nyancat</code> &dagger;</td>
<td align="center"><img src="theme_preview/rainbow.png" width="240" alt="rainbow"><br><code>rainbow</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/ssh-terminal.png" width="240" alt="ssh-terminal"><br><code>ssh-terminal</code></td>
</tr>
</table>

## Enterprise

Calm, boardroom-safe. Reach for these on a product.

<table>
<tr>
<td align="center"><img src="theme_preview/azure-pro.png" width="240" alt="azure-pro"><br><code>azure-pro</code></td>
<td align="center"><img src="theme_preview/bordeaux.png" width="240" alt="bordeaux"><br><code>bordeaux</code></td>
<td align="center"><img src="theme_preview/corporate-slate.png" width="240" alt="corporate-slate"><br><code>corporate-slate</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/fluent-dark.png" width="240" alt="fluent-dark"><br><code>fluent-dark</code></td>
<td align="center"><img src="theme_preview/forest-exec.png" width="240" alt="forest-exec"><br><code>forest-exec</code></td>
<td align="center"><img src="theme_preview/graphite.png" width="240" alt="graphite"><br><code>graphite</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/ibm-carbon.png" width="240" alt="ibm-carbon"><br><code>ibm-carbon</code></td>
<td align="center"><img src="theme_preview/ibm-g10.png" width="240" alt="ibm-g10"><br><code>ibm-g10</code></td>
<td align="center"><img src="theme_preview/ibm-g90.png" width="240" alt="ibm-g90"><br><code>ibm-g90</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/linear.png" width="240" alt="linear"><br><code>linear</code></td>
<td align="center"><img src="theme_preview/mono-minimal.png" width="240" alt="mono-minimal"><br><code>mono-minimal</code></td>
<td align="center"><img src="theme_preview/navy-oxford.png" width="240" alt="navy-oxford"><br><code>navy-oxford</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/neutral-dark.png" width="240" alt="neutral-dark"><br><code>neutral-dark</code></td>
<td align="center"><img src="theme_preview/notion-dark.png" width="240" alt="notion-dark"><br><code>notion-dark</code></td>
<td align="center"><img src="theme_preview/sandstone.png" width="240" alt="sandstone"><br><code>sandstone</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/steel.png" width="240" alt="steel"><br><code>steel</code></td>
<td align="center"><img src="theme_preview/stripe.png" width="240" alt="stripe"><br><code>stripe</code></td>
<td align="center"><img src="theme_preview/tailwind-stone.png" width="240" alt="tailwind-stone"><br><code>tailwind-stone</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/tailwind-zinc.png" width="240" alt="tailwind-zinc"><br><code>tailwind-zinc</code></td>
<td align="center"><img src="theme_preview/vercel.png" width="240" alt="vercel"><br><code>vercel</code></td>
</tr>
</table>

## Editor

Recognizable code-editor schemes, matched to their canonical palettes.

<table>
<tr>
<td align="center"><img src="theme_preview/andromeda.png" width="240" alt="andromeda"><br><code>andromeda</code></td>
<td align="center"><img src="theme_preview/aura.png" width="240" alt="aura"><br><code>aura</code></td>
<td align="center"><img src="theme_preview/ayu-dark.png" width="240" alt="ayu-dark"><br><code>ayu-dark</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/ayu-light.png" width="240" alt="ayu-light"><br><code>ayu-light</code></td>
<td align="center"><img src="theme_preview/ayu-mirage.png" width="240" alt="ayu-mirage"><br><code>ayu-mirage</code></td>
<td align="center"><img src="theme_preview/bluloco-dark.png" width="240" alt="bluloco-dark"><br><code>bluloco-dark</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/catppuccin-frappe.png" width="240" alt="catppuccin-frappe"><br><code>catppuccin-frappe</code></td>
<td align="center"><img src="theme_preview/catppuccin-latte.png" width="240" alt="catppuccin-latte"><br><code>catppuccin-latte</code></td>
<td align="center"><img src="theme_preview/catppuccin-macchiato.png" width="240" alt="catppuccin-macchiato"><br><code>catppuccin-macchiato</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/catppuccin-mocha.png" width="240" alt="catppuccin-mocha"><br><code>catppuccin-mocha</code></td>
<td align="center"><img src="theme_preview/city-lights.png" width="240" alt="city-lights"><br><code>city-lights</code></td>
<td align="center"><img src="theme_preview/cobalt2.png" width="240" alt="cobalt2"><br><code>cobalt2</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/darcula.png" width="240" alt="darcula"><br><code>darcula</code> &dagger;</td>
<td align="center"><img src="theme_preview/dracula.png" width="240" alt="dracula"><br><code>dracula</code></td>
<td align="center"><img src="theme_preview/everforest.png" width="240" alt="everforest"><br><code>everforest</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/firewatch.png" width="240" alt="firewatch"><br><code>firewatch</code></td>
<td align="center"><img src="theme_preview/github-dark.png" width="240" alt="github-dark"><br><code>github-dark</code></td>
<td align="center"><img src="theme_preview/github-light.png" width="240" alt="github-light"><br><code>github-light</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/gruvbox-dark.png" width="240" alt="gruvbox-dark"><br><code>gruvbox-dark</code></td>
<td align="center"><img src="theme_preview/gruvbox-light.png" width="240" alt="gruvbox-light"><br><code>gruvbox-light</code></td>
<td align="center"><img src="theme_preview/gruvbox-material.png" width="240" alt="gruvbox-material"><br><code>gruvbox-material</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/horizon.png" width="240" alt="horizon"><br><code>horizon</code></td>
<td align="center"><img src="theme_preview/kanagawa.png" width="240" alt="kanagawa"><br><code>kanagawa</code></td>
<td align="center"><img src="theme_preview/material-darker.png" width="240" alt="material-darker"><br><code>material-darker</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/material-ocean.png" width="240" alt="material-ocean"><br><code>material-ocean</code></td>
<td align="center"><img src="theme_preview/molokai.png" width="240" alt="molokai"><br><code>molokai</code></td>
<td align="center"><img src="theme_preview/monokai.png" width="240" alt="monokai"><br><code>monokai</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/moonlight.png" width="240" alt="moonlight"><br><code>moonlight</code></td>
<td align="center"><img src="theme_preview/night-owl.png" width="240" alt="night-owl"><br><code>night-owl</code></td>
<td align="center"><img src="theme_preview/nightfly.png" width="240" alt="nightfly"><br><code>nightfly</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/nord.png" width="240" alt="nord"><br><code>nord</code></td>
<td align="center"><img src="theme_preview/oceanic-next.png" width="240" alt="oceanic-next"><br><code>oceanic-next</code></td>
<td align="center"><img src="theme_preview/one-dark.png" width="240" alt="one-dark"><br><code>one-dark</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/one-light.png" width="240" alt="one-light"><br><code>one-light</code></td>
<td align="center"><img src="theme_preview/palenight.png" width="240" alt="palenight"><br><code>palenight</code></td>
<td align="center"><img src="theme_preview/panda.png" width="240" alt="panda"><br><code>panda</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/poimandres.png" width="240" alt="poimandres"><br><code>poimandres</code></td>
<td align="center"><img src="theme_preview/rose-pine.png" width="240" alt="rose-pine"><br><code>rose-pine</code></td>
<td align="center"><img src="theme_preview/rose-pine-dawn.png" width="240" alt="rose-pine-dawn"><br><code>rose-pine-dawn</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/shades-of-purple.png" width="240" alt="shades-of-purple"><br><code>shades-of-purple</code></td>
<td align="center"><img src="theme_preview/solarized-dark.png" width="240" alt="solarized-dark"><br><code>solarized-dark</code></td>
<td align="center"><img src="theme_preview/solarized-light.png" width="240" alt="solarized-light"><br><code>solarized-light</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/synthwave.png" width="240" alt="synthwave"><br><code>synthwave</code></td>
<td align="center"><img src="theme_preview/tokyo-night.png" width="240" alt="tokyo-night"><br><code>tokyo-night</code></td>
<td align="center"><img src="theme_preview/tomorrow-night.png" width="240" alt="tomorrow-night"><br><code>tomorrow-night</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/vitesse-dark.png" width="240" alt="vitesse-dark"><br><code>vitesse-dark</code></td>
<td align="center"><img src="theme_preview/vitesse-light.png" width="240" alt="vitesse-light"><br><code>vitesse-light</code></td>
<td align="center"><img src="theme_preview/zenburn.png" width="240" alt="zenburn"><br><code>zenburn</code></td>
</tr>
</table>

## Retro

Terminals and 8-bit machines.

<table>
<tr>
<td align="center"><img src="theme_preview/amber-crt.png" width="240" alt="amber-crt"><br><code>amber-crt</code></td>
<td align="center"><img src="theme_preview/borland.png" width="240" alt="borland"><br><code>borland</code></td>
<td align="center"><img src="theme_preview/c64.png" width="240" alt="c64"><br><code>c64</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/commodore-pet.png" width="240" alt="commodore-pet"><br><code>commodore-pet</code></td>
<td align="center"><img src="theme_preview/gameboy.png" width="240" alt="gameboy"><br><code>gameboy</code> &dagger;</td>
<td align="center"><img src="theme_preview/green-phosphor.png" width="240" alt="green-phosphor"><br><code>green-phosphor</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/ibm-3270.png" width="240" alt="ibm-3270"><br><code>ibm-3270</code></td>
<td align="center"><img src="theme_preview/pip-boy.png" width="240" alt="pip-boy"><br><code>pip-boy</code> &dagger;</td>
<td align="center"><img src="theme_preview/zx-spectrum.png" width="240" alt="zx-spectrum"><br><code>zx-spectrum</code></td>
</tr>
</table>

## Pastel

Soft and friendly.

<table>
<tr>
<td align="center"><img src="theme_preview/cotton-candy.png" width="240" alt="cotton-candy"><br><code>cotton-candy</code></td>
<td align="center"><img src="theme_preview/lavender.png" width="240" alt="lavender"><br><code>lavender</code></td>
<td align="center"><img src="theme_preview/mint.png" width="240" alt="mint"><br><code>mint</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/peach.png" width="240" alt="peach"><br><code>peach</code></td>
<td align="center"><img src="theme_preview/seafoam.png" width="240" alt="seafoam"><br><code>seafoam</code></td>
<td align="center"><img src="theme_preview/sky.png" width="240" alt="sky"><br><code>sky</code></td>
</tr>
</table>

## Nature

Earth, sea, and seasons.

<table>
<tr>
<td align="center"><img src="theme_preview/arctic.png" width="240" alt="arctic"><br><code>arctic</code></td>
<td align="center"><img src="theme_preview/autumn.png" width="240" alt="autumn"><br><code>autumn</code></td>
<td align="center"><img src="theme_preview/cherry-blossom.png" width="240" alt="cherry-blossom"><br><code>cherry-blossom</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/deep-sea.png" width="240" alt="deep-sea"><br><code>deep-sea</code></td>
<td align="center"><img src="theme_preview/desert.png" width="240" alt="desert"><br><code>desert</code></td>
<td align="center"><img src="theme_preview/sakura.png" width="240" alt="sakura"><br><code>sakura</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/volcano.png" width="240" alt="volcano"><br><code>volcano</code></td>
</tr>
</table>

## Meme

Loud and fun - for the kids (and the young at heart).

<table>
<tr>
<td align="center"><img src="theme_preview/among-us.png" width="240" alt="among-us"><br><code>among-us</code> &dagger;</td>
<td align="center"><img src="theme_preview/barbie.png" width="240" alt="barbie"><br><code>barbie</code> &dagger;</td>
<td align="center"><img src="theme_preview/bubblegum.png" width="240" alt="bubblegum"><br><code>bubblegum</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/cyberpunk.png" width="240" alt="cyberpunk"><br><code>cyberpunk</code></td>
<td align="center"><img src="theme_preview/discord.png" width="240" alt="discord"><br><code>discord</code> &dagger;</td>
<td align="center"><img src="theme_preview/doge.png" width="240" alt="doge"><br><code>doge</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/doom.png" width="240" alt="doom"><br><code>doom</code> &dagger;</td>
<td align="center"><img src="theme_preview/hotdog-stand.png" width="240" alt="hotdog-stand"><br><code>hotdog-stand</code></td>
<td align="center"><img src="theme_preview/matrix.png" width="240" alt="matrix"><br><code>matrix</code></td>
</tr>
<tr>
<td align="center"><img src="theme_preview/minecraft.png" width="240" alt="minecraft"><br><code>minecraft</code> &dagger;</td>
<td align="center"><img src="theme_preview/rgb-gamer.png" width="240" alt="rgb-gamer"><br><code>rgb-gamer</code></td>
<td align="center"><img src="theme_preview/slack-aubergine.png" width="240" alt="slack-aubergine"><br><code>slack-aubergine</code> &dagger;</td>
</tr>
<tr>
<td align="center"><img src="theme_preview/spotify.png" width="240" alt="spotify"><br><code>spotify</code> &dagger;</td>
<td align="center"><img src="theme_preview/vaporwave.png" width="240" alt="vaporwave"><br><code>vaporwave</code></td>
<td align="center"><img src="theme_preview/windows-xp.png" width="240" alt="windows-xp"><br><code>windows-xp</code> &dagger;</td>
</tr>
</table>
