Themes
How the Ternux theme system works and how to extend it.
Ternux uses CSS custom properties (variables) defined in styles.css to implement its theme system. This ensures all colors are consistent and override-friendly.
Theme attributes
Two HTML attributes drive the theme:
| Attribute | Values | Controls |
|---|---|---|
data-theme | dark | light | Base background, text, and surface colors |
data-color-scheme | default | one-dark-pro | Accent color, syntax colors, chrome tints |
Both are set on <html> and update live without a page reload.
CSS variables
Key variables (defined in src/styles.css):
| Variable | Purpose |
|---|---|
--color-bg | Main window background |
--color-card | Card and panel surfaces |
--color-text | Primary text |
--color-text-muted | Secondary / dimmed text |
--color-accent | Teal accent (buttons, active states, selection rings) |
--color-border | Dividers and borders |
--color-sidebar | Left sidebar background |
Terminal theme
The terminal reads its own set of variables via resolveTerminalTheme() in LocalTerminal.tsx. The terminal foreground, background, cursor, and ANSI palette colors update live when you switch themes.
Available color schemes
Default
Teal accent, neutral dark/light surfaces. Clean and professional.
One Dark Pro
Inspired by the popular VS Code theme. Warmer background tones with a blueish accent.
Adding a custom color scheme
- Add a new
[data-color-scheme="your-scheme"]override block insrc/styles.css. - Override the CSS variables you want to change.
- Add the scheme option to
appearanceSettingsin the config types and settings UI.
All component styles must use CSS variable references, never hardcoded color values. This rule applies to both Tailwind utilities and inline styles.