kimi-code/docs/en/customization/themes.md
liruifengv f863127ab7
feat: custom color themes (#484)
* Refactor theme

* custom theme support

* docs: add custom themes guide

Document the custom theme file location, the color token reference, selecting a theme via /theme and tui.toml, and fallback behavior. Link it from the customization sidebar and the tui.toml theme field.

* feat(skill): add built-in custom-theme skill

Guides the model (or a manual /custom-theme run) to author a theme JSON in ~/.kimi-code/themes/: docs token reference, deliberate color choices, hex validation, and how to apply via /theme or /reload-tui. Note in the write-tui skill to keep the token set in sync across colors.ts, the schema, the docs, and this skill. Enrich the custom-theme changeset to cover all three usage paths.

* chore: remove theme research report

* fix(tui): resolve lint errors after main merge

Remove unused chalk/currentTheme/ResolvedTheme imports left by the theme refactor; break the theme <-> pi-tui-theme import cycle by dropping the markdown/editor theme getters from the Theme class (consumers call createMarkdownTheme directly); fix unused vars/params, a floating promise, and a redundant union type.

* fix(tui): address custom theme review feedback

- await applyTheme before refreshing terminal theme tracking, so
  switching to "auto" installs the watcher against the new state
- invalidate the transcript on automatic (terminal-driven) theme
  changes so already-rendered entries repaint
- rebuild UsagePanel bodies on invalidate (previously a no-op); /usage,
  /status, /mcp and /plugins now repaint on a theme switch
- repaint the compaction header on invalidate
- validate a custom theme before applying it from the /theme picker
- hide reserved dark/light/auto names from the custom theme list
- escape the theme name when writing tui.toml
- stop the custom theme loader writing warnings to the raw terminal
- remove a stray hello.ts

* refactor(tui): polish custom theme feature

- footer and todo-panel read the currentTheme singleton directly at
  render time instead of caching a palette copy; drop their setColors
  methods and the manual setColors calls on every theme change
- support "base": "dark" | "light" in custom theme files so a partial
  light theme inherits the light palette for unspecified tokens
- reconcile the docs and the custom-theme skill with the silent
  invalid-color fallback (no terminal warning)

* refactor(tui): live-repaint the agent swarm progress panel

Read the currentTheme palette through a getter instead of caching it at
construction time, so the swarm progress panel recolors on a theme switch
like the rest of the transcript. Drops the now-unused `colors` option.

* chore: remove plan.md

* docs: update custom theme guide

* docs: document custom theme skill command

* fix(skill): make custom theme user-triggered only
2026-06-09 18:55:15 +08:00

5.7 KiB

Custom Themes

Kimi Code CLI can use a built-in color scheme or a custom JSON theme file. Custom files live in the themes directory and appear in /theme alongside the built-in choices.

Built-in color tokens

Custom themes can override the tokens below. The dark and light columns show the built-in values; auto resolves to one of those palettes at startup, and falls back to dark when terminal background detection is unavailable.

Token dark light What it controls
primary #4FA8FF #1565C0 The most-used color. Links, inline code, the selected item in nearly every dialog, the focused editor border, Plan/"running" badges, spinners
accent #5BC0BE #00838F Secondary highlight. Approval prefix, device-code box, image placeholder, BTW / queue panes, registry import
text #E0E0E0 #1A1A1A Body text. Dialog bodies, todo titles, footer model label, Markdown headings, assistant/tool message bullets, list bullets
textStrong #F5F5F5 #1A1A1A Emphasized / bold text. Input dialogs, status messages
textDim #888888 #454545 Secondary, dimmed text. Thinking, hints, descriptions, completed todos, Markdown quotes, footer status bar
textMuted #6B6B6B #5F5F5F Faintest text. Counters, scroll info, descriptions, Markdown link URLs, code-block borders
border #5A5A5A #737373 Pane and editor borders, Markdown horizontal rule
borderFocus #E8A838 #92660A Focus / attention border, currently only the approval panel
success #4EC87E #0E7A38 Success state. , "enabled", completed
warning #E8A838 #92660A Warning state. auto/yolo badges, stale markers, Plan mode hint
error #E85454 #B91C1C Error state. Error messages, failed tool output
diffAdded #4EC87E #0E7A38 Diff added lines
diffRemoved #E85454 #B91C1C Diff removed lines
diffAddedStrong #7AD99B #0E7A38 Diff intra-line changed words, added and bold
diffRemovedStrong #F08585 #B91C1C Diff intra-line changed words, removed and bold
diffGutter #6B6B6B #737373 Diff line-number gutter
diffMeta #888888 #5F5F5F Diff meta / hunk headers
roleUser #FFCB6B #9A4A00 User message bullet and text, skill-activation name

Use the custom-theme skill

You do not need to write the JSON by hand. Run the built-in /custom-theme [extra text] skill command to enter the custom-theme workflow; the skill can choose colors, write the file under ~/.kimi-code/themes/, validate the hex values, and tell you how to apply it.

Example invocations:

  • /custom-theme Create a warm dark theme with amber accents.
  • /custom-theme Make a light theme based on Solarized, but keep errors easy to see.
  • /custom-theme Tweak my ember theme so diffs have higher contrast.

After activation, the skill usually asks whether you want a light or dark base, what mood or palette you prefer, and whether you have exact colors to include. If you use it to edit an existing theme, make sure it reads and backs up the file before overwriting it.

Create a theme

Add a .json file to the themes directory:

  • ~/.kimi-code/themes/
  • or $KIMI_CODE_HOME/themes/ when the KIMI_CODE_HOME environment variable is set

Create the directory if it does not exist. The filename is the theme name: ember.json appears in /theme as Custom: ember.

A minimal theme only sets the colors you want to change; the rest fall back to the base palette (dark by default):

{
  "name": "ember",
  "colors": {
    "primary": "#83A598",
    "accent": "#FE8019"
  }
}

Fields:

  • name (required): the theme identifier.
  • displayName (optional): a human-readable name.
  • base (optional): the built-in palette that unspecified tokens inherit — "dark" (default) or "light". Set "base": "light" when you are building a light theme so the tokens you leave out stay readable on a light background (otherwise they fall back to the dark palette).
  • colors (optional): the color tokens to override, each a 6-digit hex value (e.g. #FE8019).

Use the token names from Built-in color tokens. Any token you omit falls back to the selected base palette, so partial themes are fine:

{
  "name": "just-blue",
  "colors": {
    "primary": "#3B82F6",
    "roleUser": "#3B82F6"
  }
}

Select a theme

Two ways:

  1. The /theme command (recommended): opens the theme picker, where custom themes appear as Custom: <filename>. The picker re-scans the themes directory every time it opens, so a theme file you just added shows up without a restart.

  2. tui.toml: set theme to your theme name:

    # ~/.kimi-code/tui.toml
    theme = "ember"
    

What happens on errors

Custom themes are designed to never get in your way:

  • An invalid color value (not # followed by 6 hex digits): that one entry is silently skipped and falls back to the selected base palette; the rest of the colors still apply.
  • An unrecognized token: ignored, with no effect on other colors.
  • A missing custom theme file or malformed JSON: silently falls back to the built-in dark palette. It does not retry auto.

Editing the active theme

If you edit the theme file that is currently active, the change is not reloaded automatically. To apply the new colors:

  • run /reload-tui — it reloads tui.toml and re-applies the current theme (including re-reading the theme file); or
  • switch to another theme in /theme and back.

::: warning Note Re-selecting the same theme in /theme does not reload it (you get a "Theme unchanged" message). To reload changes to the active theme, use one of the two methods above. :::