User Appearance Themes

Appearance & Themes

BLXCode ships 20 app themes. Colors apply across the workbench — sidebar, settings, terminals, memory graph, and agent panels — via a shared token system.

Open the theme picker

1. Open Settings (command palette → Open Settings, or your configured shortcut).
2. Select Appearance in the left sidebar.

The pane shows:

• A hero preview of the active theme
• A search field (filters by translated name and description)
• All / Dark / Light filters with counts
• A grid of theme cards with mini layout previews

Click a card to apply the theme immediately. The active card shows an ACTIVE badge and accent border.

Default theme

BLXCode (blxcode-dark) is the default — the same deep dark look BLXCode used before themes shipped. First launch and a cleared localStorage always fall back to this theme.

Available themes

Theme	Mode	data-theme id
BLXCode	Dark	blxcode-dark
BLXCode Light	Light	blxcode-light
Dracula	Dark	dracula
Gruvbox Dark	Dark	gruvbox-dark
Gruvbox Light	Light	gruvbox-light
Solarized Dark	Dark	solarized-dark
Solarized Light	Light	solarized-light
Nord	Dark	nord
One Dark	Dark	one-dark
Catppuccin Mocha	Dark	catppuccin-mocha
Catppuccin Latte	Light	catppuccin-latte
Catppuccin Frappé	Dark	catppuccin-frappe
Tokyo Night	Dark	tokyo-night
Rosé Pine	Dark	rose-pine
Rosé Pine Dawn	Light	rose-pine-dawn
Everforest Dark	Dark	everforest-dark
Kanagawa	Dark	kanagawa
GitHub Dark	Dark	github-dark
Night Owl	Dark	night-owl
Ayu Mirage	Dark	ayu-mirage

Theme names and descriptions follow your Settings → App → Language choice.

Persistence

The selected theme is stored in browser localStorage under blxcode_theme_v1 and restored on reload. A small inline script in index.html applies the saved theme before CSS loads to avoid a flash of the wrong colors.

What themes do not change

Some surfaces are intentionally outside the theme selector:

• Embedded browser page content (Linux iframe) — only the app chrome around the page follows the theme.
• Native child webviews on Windows/macOS — outside SPA styling.
• Memory category swatches and workspace sidebar colors you set under Workspace settings — user data, not app chrome.
• Flag icons in the language picker — national colors stay accurate.

See Theme exceptions for the full list.

See also

• Settings — all settings categories
• UI Language — locale picker (App tab)