Themes
term.css ships with 12 themes based on the most popular terminal and editor color schemes. Each theme overrides the core CSS variables - click to preview.
Usage
Add a theme file after the base stylesheet:
@import "@eshlox/termcss";
@import "@eshlox/termcss/themes/dracula.min.css";Available Themes
Default
default.css
Dracula
dracula.css
Nord
nord.css
Solarized
solarized.css
One Dark
one-dark.css
Monokai
monokai.css
Tokyo Night
tokyo-night.css
Catppuccin
catppuccin.css
Rosé Pine
rose-pine.css
Gruvbox
gruvbox.css
Everforest
everforest.css
GitHub
github.css
Kanagawa
kanagawa.css
Reset
Remove theme overlay
Preview
The theme you select above will be applied to this entire page. Scroll around to see how headings, code blocks, badges, and other elements look under different themes.
You can also create custom themes with a single hue value. See Create a Theme.
Theme files must be loaded after the base stylesheet.
Sample Elements
STATUS ERROR WARN OK INFO
A blockquote to test accent border and muted text color.
const theme = "live preview";
console.log("Current: " + theme);| Variable | Purpose |
|---|---|
| --t-bg | Background |
| --t-fg | Foreground text |
| --t-muted | Secondary text |
| --t-accent | Primary accent |
| --t-accent2 | Secondary accent |
| --t-surface | Elevated surfaces |
| --t-border | Borders, dividers |
| --t-red | Error, danger |
| --t-yellow | Warning, caution |
| --t-green | Success, confirmed |
Dark / Light
Every theme supports both dark and light mode via light-dark().
Toggle your system preference or use data-theme="dark" /
data-theme="light" to override.