Feat/CLI - theme command and custom themes

[oliver-14203]

Context

This PR introduces 11 new themes to the KiloCode CLI, as well as a /theme command to switch between them, and the ability for users to create custom themes through ~/.kilocode/cli/config.json. This makes it easy for users to customize the UI, similar to both the original KiloCode extension (through VSCode themes), and other CLI tools (e.g. Gemini CLI, Claude Code).

Implementation

The theme system was implemented with a modular approach:

Built-in Themes: Added 11 new themes (ansi, ansi-light, atom-one-dark, ayu-dark, ayu-light, dracula, github-dark, github-light, googlecode, shades-of-purple, xcode) with carefully selected color palettes based on popular code editors.

Theme Command: Implemented /theme command with tab completion, allowing users to list, set, and get information about themes. The command integrates with the existing configuration system and triggers UI re-renders when themes change.

Custom Themes: Added support for user-defined themes in config.json through a customThemes property. Users can define complete themes or extend existing ones with validation to ensure all required properties are present.

Telemetry Integration: Added theme change tracking to understand user preferences and theme adoption patterns.

The implementation leverages the existing state management (atoms/hooks) and configuration management systems, ensuring seamless integration with the CLI's architecture.

Screenshots

before	after

How to Test

List available themes:

/theme

You should see all 14 themes (3 original + 11 new ones + custom themes) organized by type

Switch themes:

/theme dracula
/theme github-light
/theme atom-one-dark

The UI should immediately update with the new theme colors

Test custom themes:

• Edit your config.json to add a custom theme:

{
  "theme": "dracula",
  "customThemes": {
    "my-theme": {
      "id": "my-theme",
      "name": "My Custom Theme",
      "brand": {
        "primary": "#PRIMARY_COLOR",
        "secondary": "#SECONDARY_COLOR"
      },
      "semantic": {
        "success": "#SUCCESS_COLOR",
        "error": "#ERROR_COLOR",
        "warning": "#WARNING_COLOR",
        "info": "#INFO_COLOR",
        "neutral": "#NEUTRAL_COLOR"
      },
      "interactive": {
        "prompt": "#PROMPT_COLOR",
        "selection": "#SELECTION_COLOR",
        "hover": "#HOVER_COLOR",
        "disabled": "#DISABLED_COLOR",
        "focus": "#FOCUS_COLOR"
      },
      "messages": {
        "user": "#USER_COLOR",
        "assistant": "#ASSISTANT_COLOR",
        "system": "#SYSTEM_COLOR",
        "error": "#ERROR_COLOR"
      },
      "actions": {
        "approve": "#APPROVE_COLOR",
        "reject": "#REJECT_COLOR",
        "cancel": "#CANCEL_COLOR",
        "pending": "#PENDING_COLOR"
      },
      "code": {
        "addition": "#ADDITION_COLOR",
        "deletion": "#DELETION_COLOR",
        "modification": "#MODIFICATION_COLOR",
        "context": "#CONTEXT_COLOR",
        "lineNumber": "#LINE_NUMBER_COLOR"
      },
      "ui": {
        "border": {
          "default": "#BORDER_DEFAULT",
          "active": "#BORDER_ACTIVE",
          "warning": "#BORDER_WARNING",
          "error": "#BORDER_ERROR"
        },
        "text": {
          "primary": "#TEXT_PRIMARY",
          "secondary": "#TEXT_SECONDARY",
          "dimmed": "#TEXT_DIMMED",
          "highlight": "#TEXT_HIGHLIGHT"
        },
        "background": {
          "default": "default",
          "elevated": "default"
        }
      },
      "status": {
        "online": "#STATUS_ONLINE",
        "offline": "#STATUS_OFFLINE",
        "busy": "#STATUS_BUSY",
        "idle": "#STATUS_IDLE"
      }
    }
  }
}

• Restart CLI and use: /theme my-theme

Test all new themes to verify proper color contrast and visual hierarchy in different lighting conditions.

Get in Touch

@quangus on Discord

[changeset-bot]

🦋 Changeset detected

Latest commit: 7ce186d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@kilocode/cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[RSO]

This is looking great! I've posted some comments below on the code itself, but overall I think we're really close. One other thing that would be good is to look at #3253 and use the same method to repaint the window when /theme <theme> is called. (In general this PR could use a rebase with main, I wanted to do it for you but I can't push changes to your branch 😅)

[oliver-14203]

I’ve addressed all the feedback in the latest commits. @RSO

[RSO]

@oliver-14203 sorry for the wait! We're currently having a focus week in Amsterdam with the whole team, so we'll probably get back to you next week. Thank you for your patience 🙏

I reviewed the changes and update the branch to use the refreshTerminal method.