Claude Theme Studio

Design custom themes for the Claude Code CLI and see a live preview as you go.

Try it in your browser: https://karimalmalakeh.github.io/claude-theme-studio/

Using the website

1. Start from a preset (Rainy Neon Tokyo, Dracula, Nord, Catppuccin, ...) or from a built-in base.
2. Change colors in the list on the left. Click any element in the preview to jump to the color that controls it.
3. Save the theme to Claude Code:
   • Chrome or Edge: click Save to Claude Code and pick your .claude folder. It's in your home folder; on Windows it's C:\Users\<you>\.claude. On a Mac, press Cmd+Shift+. in the picker to show hidden folders. The browser remembers the folder, and Make active also switches Claude Code to the theme.
   • Other browsers: click Download and move the file into ~/.claude/themes/. On Windows that's %USERPROFILE%\.claude\themes.
4. In Claude Code, run /theme and pick your theme. If the themes folder didn't exist yet, restart Claude Code once first.

The page only exports the colors you change. Everything else comes from the base preset. Values can be #rrggbb, #rgb, rgb(r,g,b), ansi256(n) or ansi:<name>.

Running it locally (any browser)

If you have Node.js 18 or newer, one command downloads and starts the studio, with direct saving in every browser:

npx github:karimalmalakeh/claude-theme-studio

Or clone the repo and run npm start. Either way, it opens http://localhost:4789. There are no dependencies.

• Save to Claude Code writes the theme to ~/.claude/themes/<slug>.json, and Claude Code reloads it right away.
• Make active also sets "theme": "custom:<slug>" in ~/.claude/settings.json, after saving a backup copy as settings.json.bak.

The server only listens on your own machine (127.0.0.1) and refuses requests from other websites.

Ready-made themes

themes/ has Rainy Neon Tokyo, a cyberpunk theme:

• rainy-neon-tokyo.json is the Claude Code theme.
• rainy-neon-tokyo.windows-terminal.json is a matching Windows Terminal color scheme. Add it under "schemes" in Windows Terminal's settings file.

Notes

• The preview's base preset colors are close approximations of Claude Code's built-in presets. Colors you set yourself are shown exactly.
• Theme format reference: https://code.claude.com/docs/en/terminal-config#create-a-custom-theme