cctheme

Custom color themes for the Claude Desktop app on macOS. 25 built-in themes with instant hot-reload — switch themes without restarting.

Install

npx cctheme

That's it. An interactive theme picker will guide you through the rest.

Commands

| Command | Description | |---|---| | cctheme | Interactive theme picker | | cctheme apply <theme> | Apply a theme | | cctheme default | Switch to default appearance (keeps loader) | | cctheme update | Unpatch Claude so it can auto-update | | cctheme restore | Full uninstall | | cctheme list | List all themes | | cctheme preview <theme> | Preview colors in terminal | | cctheme status | Show active theme & loader status | | cctheme audit | Validate all themes |

Themes

Andromeda Ayu Dark Catppuccin Mocha Cobalt2 Dracula Everforest Dark GitHub Dark Gruvbox Dark Horizon Kanagawa Material Ocean Monokai Pro Night Owl Nord One Dark Pro One Monokai Palenight Poimandres Rose Pine Shades of Purple Solarized Dark Synthwave '84 Tokyo Night Tokyo Night Storm Vitesse Dark

How It Works

The first apply installs a tiny loader (~1.4KB) into the app bundle. This takes ~8 seconds and requires a restart. After that, theme switching is instant — the loader watches ~/.cctheme/active.css for changes and hot-swaps the CSS in real time.

• Only affects dark mode — light mode is untouched
• Survives app restarts

Updating Claude Desktop

cctheme's asar patching blocks Claude's auto-update. To update:

cctheme update                # unpatch Claude
# In Claude, open menu > Check for Updates, let it install
cctheme apply <theme>         # re-apply your theme

The theme CSS file at ~/.cctheme/active.css is preserved throughout — you just need to reinstall the loader after Claude updates.

Custom Themes

Create a .json file in the themes/ directory:

{
  "name": "My Theme",
  "author": "you",
  "colors": {
    "bg-main": "#1e1e1e",
    "bg-sidebar": "#181818",
    "bg-input": "#252525",
    "bg-deep": "#141414",
    "text-primary": "#d4d4d4",
    "text-secondary": "#cccccc",
    "text-muted": "#6a6a6a",
    "accent": "#007acc",
    "accent-light": "#3794ff",
    "accent-pro": "#c586c0",
    "border": "#333333",
    "border-focus": "#007acc",
    "selection": "#264f7840",
    "red": "#f44747",
    "orange": "#ce9178",
    "yellow": "#dcdcaa",
    "green": "#6a9955",
    "cyan": "#4ec9b0",
    "blue": "#569cd6",
    "purple": "#c586c0",
    "scrollbar-thumb": "#424242",
    "scrollbar-hover": "#4f4f4f"
  }
}

Colors map directly to VS Code theme properties — use editor.background, sideBar.background, terminal.ansi*, etc. as sources.

Validate with cctheme audit and inspect the full variable mapping with cctheme debug <name>.

Requirements

• macOS
• Node.js >= 18
• Claude Desktop

License

MIT