Create custom color themes for Sidecar, including base theme selection, color overrides, gradient borders, tab styles, per-project themes, community themes, and programmatic theme registration. Use when creating or modifying themes, adjusting UI appearance, or debugging color/style issues. See references/palette-reference.md for the full color palette with all keys and per-theme values.
Themes are configured in ~/.config/sidecar/config.json:
{
"ui": {
"showFooter": true,
"showClock": true,
"nerdFontsEnabled": false,
"theme": {
"name": "default",
"overrides": {
"primary": "#FF5500",
"success": "#00FF00"
}
}
}
}
Start from a base theme and override specific colors:
{
"ui": {
"theme": {
"name": "default",
"overrides": {
"primary": "#E91E63",
"success": "#4CAF50",
"error": "#F44336",
"syntaxTheme": "github"
}
}
}
}
Override all colors for complete control. See references/palette-reference.md for every available color key and their default values across themes.
Panel borders support angled gradients (default 30 degrees) flowing diagonally:
{
"ui": {
"theme": {
"overrides": {
"gradientBorderActive": ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#8B00FF"],
"gradientBorderAngle": 45
}
}
}
}
Gradients support 2+ color stops. If not specified, solid borderActive/borderNormal colors are fallback.
Configure with tabStyle and tabColors in overrides:
Tab Styles:
gradient - Colors flow continuously across all tabs (per-character interpolation)per-tab - Each tab gets a distinct solid color from array (cycles)solid - Uses theme primary/tertiary colorsminimal - No background, active tab uses underlineBuilt-in Presets (use as tabStyle value):
rainbow - Red -> Green -> Blue -> Purple (gradient)sunset - Orange -> Peach -> Pink (gradient)ocean - Deep Blue -> Cyan -> Light Blue (gradient)aurora - Purple -> Dark Purple -> Teal (gradient)neon - Magenta -> Cyan -> Green (gradient)fire - Red-Orange -> Orange -> Gold (gradient)forest - Dark Green -> Mid Green -> Light Green (gradient)candy - Pink -> Purple -> Turquoise (gradient)pastel - Pink, Green, Blue, Yellow (per-tab)jewel - Ruby, Sapphire, Amethyst, Topaz (per-tab)terminal - Red, Green, Cyan, Yellow (per-tab)mono - Theme primary color (solid)accent - Theme accent color (solid)underline - No background, underlined active (minimal)dim - No background, dim inactive (minimal)Examples:
// Use a preset
{ "overrides": { "tabStyle": "sunset" } }
// Custom gradient
{ "overrides": { "tabStyle": "gradient", "tabColors": ["#FF6B35", "#F7C59F", "#FF006E"] } }
// Per-tab distinct colors
{ "overrides": { "tabStyle": "per-tab", "tabColors": ["#FF5555", "#50FA7B", "#8BE9FD", "#F1FA8C"] } }
All colors use hex format (#RRGGBB). Key categories:
primary, secondary, accentsuccess, warning, error, infotextPrimary, textSecondary, textMuted, textSubtle, textHighlight, textSelection, textInversebgPrimary, bgSecondary, bgTertiary, bgOverlayborderNormal, borderActive, borderMutedgradientBorderActive, gradientBorderNormal (arrays), gradientBorderAngle (number)tabStyle, tabColors (array)diffAddFg, diffAddBg, diffRemoveFg, diffRemoveBgbuttonHover, tabTextInactive, link, toastSuccessText, toastErrorTextdangerLight, dangerDark, dangerBright, dangerHoverblameAge1 through blameAge5syntaxTheme (Chroma theme name), markdownTheme (dark/light)Full color values for all themes: see references/palette-reference.md.
The syntaxTheme value can be any Chroma theme:
monokai, dracula, github, github-dark, nord, onedark, solarized-dark, solarized-light, vs, vimSee Chroma Style Gallery for all options.
Colors must be valid hex in #RRGGBB format. Invalid colors are ignored.
"#FF5500", "#ff5500" (lowercase ok)"FF5500" (missing #), "#F50" (shorthand), "red" (named colors)When nerdFontsEnabled is true: pill-shaped tabs (Powerline chars), pill-shaped buttons. Requires a Nerd Font installed in your terminal.
Press # to open theme switcher, then Tab to browse 453 community color schemes. Supports search, live preview, color swatches. Press Enter to save.
Community themes are converted from iTerm2 color schemes. Stored by scheme name:
{
"ui": {
"theme": {
"name": "default",
"community": "Catppuccin Mocha",
"overrides": { "primary": "#ff79c6" }
}
}
}
To regenerate community themes from upstream:
git clone https://github.com/mbadolato/iTerm2-Color-Schemes ~/code/iTerm2-Color-Schemes
./scripts/generate-schemes.sh [path-to-repo]
Each project can have its own theme. When switching with @, theme changes automatically.
{
"projects": {
"list": [
{ "name": "api", "path": "~/code/api", "theme": { "name": "dracula" } },
{ "name": "web", "path": "~/code/web", "theme": { "name": "default", "community": "Catppuccin Mocha" } },
{ "name": "tools", "path": "~/code/tools" }
]
}
}
Set per-project: press #, then ctrl+s to toggle scope to "Set for this project".
Resolution order: project theme > global ui.theme > "default".
import "github.com/marcus/sidecar/internal/styles"
myTheme := styles.Theme{
Name: "my-theme",
DisplayName: "My Custom Theme",
Colors: styles.ColorPalette{
Primary: "#FF5500",
Secondary: "#00FF55",
// ... all other colors
},
}
styles.RegisterTheme(myTheme)
styles.ApplyTheme("my-theme")
styles.ListThemes() // []string of available theme names
styles.GetTheme("dracula") // Theme struct
styles.IsValidTheme("my-theme") // bool
styles.IsValidHexColor("#FF5500") // bool
styles.GetCurrentTheme() // Theme
styles.GetCurrentThemeName() // string
styles.ApplyTheme("dracula")
styles.ApplyThemeWithOverrides("default", map[string]string{"primary": "#FF5500"})
// Resolve effective theme for a project path (project > global > default)
import "github.com/marcus/sidecar/internal/theme"
resolved := theme.ResolveTheme(cfg, "/path/to/project")
theme.ApplyResolved(resolved)