Theme Tuner

Beta. Theme Tuner works and is used daily, but the editor and the document format can still change between versions. Your theme document keeps the last 50 versions, so nothing is lost.

Mix color themes per region of the window and tune every color live.

Take the sidebar from one theme, the editor from another, the syntax colors from a third and the terminal from a fourth, then adjust single colors on top. You see each change in the window before you keep it.

Getting started

1. Run Theme Tuner: Open from the Command Palette.
2. Pick a mode:
   • Theme mode edits the colors of one theme.
   • Region mode edits a composition: for each region you choose the theme it comes from, and you can override single colors.
3. Changes show in the window right away as a preview. Apply makes the previewed theme your color theme. Close the Tuner without Apply and the window returns to the theme you had before.

The regions are: base, activity bar, left sidebar, right sidebar, editor, syntax, panel, terminal, chat, status bar and title bar.

Saving and history

• Save writes your changes, Save as stores them as a new theme or composition.
• Reset to saved drops unsaved changes, Reset to default returns a theme to the colors it shipped with.
• Every save keeps the previous version. The last 50 versions are listed in the history menu, and Restore brings one back.
• Installed themes can be imported as a starting point.

Your themes in one file

All themes and compositions live in one JSON document. By default it is at ~/.config/koko-themes/koko-themes.json. Point the Theme Tuner: Document Path setting to a folder you sync (Nextcloud, Dropbox, a git repository) to use the same themes on several machines. Changes made on another machine show up as soon as the file changes.

The Tuner adds two themes, Theme Tuner (dark) and Theme Tuner (light). Choose which composition each one shows with the Dark Composition and Light Composition settings, so the automatic light and dark switch of VS Code keeps working.

Chat panel colors (optional)

VS Code themes cannot reach the inside of an extension's chat panel. For Claude Code, the Tuner can add a small block to the Claude Code stylesheet so its chat panel follows the colors of the chat region.

• This edits files of another extension. The Tuner keeps a backup and asks first (setting Claude Code Patch: ask, always or never).
• With always, the block is applied again after Claude Code updates.
• Theme Tuner: Remove the chat colors from Claude Code removes the block and sets the setting to never.

Settings

Limits

• VS Code has one set of sidebar colors for both sides. The left sidebar region sets them; the right sidebar region reaches the chat panel through the optional patch above.
• Live reload uses a theme option that VS Code does not document. If a future version drops it, the preview needs a reload of the window.

Themes to start from

Koko Themes ships the themes the Tuner starts with as plain themes, for machines where you only want to pick a theme.