Themes

Binderus ships with 10 carefully tuned built-in themes and supports custom themes you can author yourself in plain CSS. Every UI color is a semantic CSS variable, so a theme is just a stylesheet that overrides those variables under a single selector.

Built-in themes

Pick one in Settings → General → Theme. Switching is instant — no restart.

ID	Name	Variant	Accent
`dark-nord`	Nord Dark	dark	#88c0d0
`light-white`	Classic Light	light	#2563eb
`dark-dracula`	Dracula	dark	#bd93f9
`dark-one-dark`	One Dark Pro	dark	#61afef
`dark-catppuccin`	Catppuccin Mocha	dark	#cba6f7
`light-catppuccin`	Catppuccin Latte	light	#8839ef
`dark-github`	GitHub Dark	dark	#58a6ff
`dark-solarized`	Solarized Dark	dark	#268bd2
`dark-gruvbox`	Gruvbox Dark	dark	#fabd2f
`dark-tokyo-night`	Tokyo Night	dark	#7aa2f7

How themes work

Binderus uses a CSS-variable-based theme system. Every UI color is defined as a semantic CSS variable like --bg-primary, --fg-primary, --accent, --editor-bg, --sidebar-fg. Themes are CSS files that set these variables inside a single selector:

[data-theme="my-theme"] {
  --bg-primary: #0d1117;
  --fg-primary: #c9d1d9;
  --accent:     #58a6ff;
  /* ...about 100 variables in total */
}

On startup, Binderus sets <html data-theme="dark-nord"> (or whichever theme is selected) and dynamically loads the matching CSS as a single <style> tag. Switching themes swaps that tag — no component code changes, no restart.

CSS variable groups

Group	Variables
Base	`--bg-primary`, `--bg-secondary`, `--bg-tertiary`, `--fg-primary`, `--fg-secondary`, `--fg-muted`
Accent	`--accent-h` / `--accent-s` / `--accent-l` (HSL components), `--accent`, `--accent-hover`, `--accent-fg`
Sidebar	`--sidebar-bg`, `--sidebar-fg`, `--sidebar-hover`, `--sidebar-active`, `--sidebar-folder`
Tabs	`--tab-bg`, `--tab-fg`, `--tab-active`, `--tab-dirty`
Editor	`--editor-bg`, `--editor-fg`, `--editor-link`, `--editor-wikilink`, `--editor-code-bg`, `--editor-selection`
Dialog	`--dialog-bg`, `--dialog-fg`, `--dialog-title`, `--dialog-label`, `--dialog-input-bg`, `--dialog-button-`, `--dialog-tab-`, `--dialog-kbd-*`
Status	`--color-error`, `--color-warning`, `--color-success`, `--color-info`
Borders & misc	`--border-primary`, `--border-secondary`, `--border-focus`, `--scrollbar-thumb`, `--prism-bg`, `--prism-fg`

The full contract lives at src/themes/_variables.css in the repo. Every component references these via var(--*) — there are no hardcoded theme colors anywhere in component code.

Custom themes

You can author a theme in any text editor and have Binderus pick it up. The simplest custom theme is a single .css file that sets the variables you care about.

Where to put your theme

Drop the file into the themes folder under your app data directory:

macOS: ~/Library/Application Support/com.binderus.app/themes/
Windows: %APPDATA%\com.binderus.app\themes\
Linux: ~/.local/share/com.binderus.app/themes/

Binderus scans this folder on startup and merges your themes into the picker alongside the built-ins.

File format

A custom theme is one .css file with a metadata header in a CSS comment, followed by a single rule that overrides the variables you want to change:

/*
 * @name        My Custom Theme
 * @id          my-custom-theme
 * @author      You
 * @variant     dark
 * @description A warmer take on Tokyo Night
 * @version     1.0.0
 */

[data-theme="my-custom-theme"] {
  --bg-primary:    #1a1b26;
  --fg-primary:    #c0caf5;
  --accent:        #f7768e;
  --accent-hover:  #ff9099;
  --editor-bg:     #1a1b26;
  --editor-fg:     #c0caf5;
  --sidebar-bg:    #16161e;
  --sidebar-fg:    #a9b1d6;
}

Only the variables you set get overridden — the rest fall back to the dark or light defaults, depending on your @variant declaration. This means you can ship a theme that's just "like Nord but with my brand accent color" in 5 lines.

Tip: the easiest path to a working theme is to copy one of the built-ins from src/themes/dark-nord.css in the GitHub repo, rename the file, change the data-theme selector to your id, and tweak from there.

Security model

User CSS is sanitized before injection — Binderus strips @import, JavaScript URLs, and HTML-injecting selectors. Custom themes can change colors, fonts, and basic typography but cannot exfiltrate data or run code.