Themes & Interface Customization
px0 ships with 14 built-in syntax and interface themes optimized for code legibility across both dark and light environments.
Available Themes
The following themes are included out of the box:
| Theme Name | Style | Characteristics |
|---|---|---|
| Tokyo Night (Default) | Dark | Deep violet background with neon cyan and magenta accents |
| Catppuccin Mocha | Dark | Warm pastel palette on soothing dark mauve |
| Catppuccin Latte | Light | Clean, high-contrast daytime pastel palette |
| Dracula | Dark | Vibrant pink, purple, and green syntax accents |
| GitHub Dark | Dark | Default GitHub code audit appearance |
| GitHub Light | Light | High-contrast black on white documentation style |
| Gruvbox Dark | Dark | Warm retro autumnal earthy tones |
| Gruvbox Light | Light | Parchment warm background with retro accents |
| Nord | Dark | Arctic, north-bluish clean aesthetic |
| One Dark | Dark | Classic Atom / VS Code dark blue-gray |
| Solarized Dark | Dark | Precision-calibrated blue-green palette |
| Solarized Light | Light | Warm solarized yellow-tinted daylight theme |
| Monokai | Dark | High-contrast yellow, green, and orange syntax |
| Rose Pine | Dark | Muted vintage minimalist aesthetic |
Switching Themes
You can change themes through multiple methods:
Method 1: Activity Rail / Sidebar Footer
Click the Theme Button in the bottom left footer of the sidebar (or press the theme icon on the activity rail) to open the theme selection dropdown.
Method 2: Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
- Press
Ctrl+Shift+Pto open the Command Palette. - Type
Themeand select Preferences: Select Theme. - Use the arrow keys to preview themes dynamically in real time and press
Enterto commit your choice.
Method 3: Visual Settings Manager (Cmd+, or Ctrl+,)
Press Cmd+, (or Ctrl+,) to open the Settings Manager, locate Workbench: Color Theme (workbench.colorTheme), and click any theme pill button to apply it instantly.
Persistence
Your selected theme is automatically saved to your user settings (~/.px0/settings.json) and restored whenever you open any px0 session on that machine.
Theme Architecture & CSS Tokens
px0 uses a strict CSS Custom Property token architecture. Rather than hardcoding hex colors across components, the entire interface is styled through semantic CSS variables defined in /static/themes.css.
Key color tokens include:
--bg-main: #1a1b26; /* Main editor background */
--bg-side: #16161e; /* Sidebar and activity rail */
--bg-tab: #1f2335; /* Active tab background */
--fg-main: #c0caf5; /* Default editor text */
--fg-dim: #565f89; /* Comments and line numbers */
--accent: #7aa2f7; /* Selection and highlights */
--git-mod: #e0af68; /* Git modified badge */
--git-add: #9ece6a; /* Git added badge */
--git-del: #f7768e; /* Git deleted badge */
Because themes are clean modular stylesheets, they load with zero runtime JavaScript overhead.