Themes

Themes control the visual appearance of the opencode terminal user interface (TUI). They define colors for panels, text, syntax highlighting, diffs, buttons, status bars, and other UI elements.

Setting a Theme

Themes are configured in tui.json, the TUI-specific configuration file.

{
  "$schema": "https://opencode.ai/tui.json",
  "theme": "tokyonight"
}

The theme field accepts a theme name string. This can be one of the built-in themes or a custom theme you create.

Using OPENCODE_TUI_CONFIG

If you keep tui.json at a non-standard location, set the path via environment variable:

export OPENCODE_TUI_CONFIG=/path/to/custom/tui.json

Interactive Theme Selection

Via the TUI

Open the theme picker with:

/themes

Or use the keybinding: Ctrl+X then T

The theme picker shows all available themes with a live preview. Navigate with arrow keys and press Enter to apply a theme.

Via Keyboard Shortcut

If you have set up the themes keybinding:

{
  "keybinds": {
    "themes": "ctrl+x t"
  }
}

Press Ctrl+X then T to cycle through or pick from available themes.

Built-in Themes

opencode ships with a curated set of built-in themes covering popular color schemes:

Theme Name	Style	Description
catppuccin-frappe	Dark, warm	Default theme. Soft, muted dark palette
catppuccin-latte	Light, warm	Light variant of Catppuccin
catppuccin-macchiato	Dark, cool	Medium-dark Catppuccin variant
catppuccin-mocha	Dark, rich	Deepest Catppuccin variant
tokyonight	Dark, blue	Blue-tinted night theme
tokyonight-day	Light	Daytime variant of Tokyonight
tokyonight-moon	Dark, purple	Purple-tinted Tokyonight variant
tokyonight-storm	Dark, desaturated	Muted Tokyonight variant
dracula	Dark, purple	Classic Dracula color scheme
dracula-pro	Dark, tuned	Enhanced Dracula with refined colors
nord	Dark, arctic	Polar blue-gray palette
nord-light	Light, arctic	Light variant of Nord
gruvbox	Dark, retro	Retro groove color scheme
gruvbox-light	Light, retro	Light variant of Gruvbox
monokai	Dark, vibrant	Classic Monokai color scheme
monokai-pro	Dark, refined	Monokai Pro with improved contrast
solarized-dark	Dark, earth	Ethan Schoonover's Solarized dark
solarized-light	Light, earth	Ethan Schoonover's Solarized light
one-dark	Dark, atom	Atom editor's One Dark theme
one-light	Light, clean	Atom editor's One Light theme
github-dark	Dark, blue	GitHub's dark theme
github-light	Light, clean	GitHub's light theme
everforest	Dark, green	Green-tinted forest theme
everforest-light	Light, green	Light variant of Everforest
kanagawa	Dark, ink	Inspired by the Kanagawa wave painting
kanagawa-lotus	Light, ink	Light variant of Kanagawa
rose-pine	Dark, rose	Rosé pine with warm tones
rose-pine-dawn	Light, rose	Light variant of Rosé Pine
rose-pine-moon	Dark, muted	Muted variant of Rosé Pine

To list all available themes from the CLI:

opencode themes list

Custom Themes

Create your own theme by placing a JSON file in the themes directory.

Theme Locations

Themes can be placed in two locations:

1. Project-level: .opencode/themes/ (in the project root)
2. Global: ~/.config/opencode/themes/

The project-level directory takes precedence over the global directory.

Theme File Format

Theme files are JSON with a specific structure of color tokens:

{
  "name": "my-custom-theme",
  "type": "dark",
  "colors": {
    "background": "#1a1b26",
    "foreground": "#c0caf5",
    "primary": "#7aa2f7",
    "secondary": "#bb9af7",
    "accent": "#f7768e",
    "surface": "#24283b",
    "surfaceAlt": "#1f2335",
    "border": "#3b4261",
    "selection": "#33467c",
    "selectionText": "#c0caf5",
    "lineNumbers": "#3b4261",
    "cursor": "#c0caf5",
    "error": "#db4b4b",
    "warning": "#e0af68",
    "info": "#7dcfff",
    "success": "#9ece6a",
    "muted": "#565f89"
  },
  "syntax": {
    "keyword": "#bb9af7",
    "string": "#9ece6a",
    "number": "#ff9e64",
    "function": "#7aa2f7",
    "variable": "#c0caf5",
    "constant": "#ff9e64",
    "type": "#ff9e64",
    "class": "#7dcfff",
    "interface": "#7dcfff",
    "comment": "#565f89",
    "operator": "#89ddff",
    "property": "#73daca",
    "punctuation": "#c0caf5",
    "parameter": "#c0caf5",
    "regexp": "#b4f9f8",
    "tag": "#f7768e",
    "attribute": "#9ece6a"
  },
  "panels": {
    "sidebar": {
      "background": "#1f2335",
      "foreground": "#c0caf5",
      "activeItem": "#24283b",
      "hoverItem": "#1a1b26"
    },
    "statusBar": {
      "background": "#1a1b26",
      "foreground": "#565f89",
      "modeForeground": "#7aa2f7",
      "border": "#3b4261"
    },
    "input": {
      "background": "#1f2335",
      "foreground": "#c0caf5",
      "placeholder": "#565f89",
      "border": "#3b4261",
      "focusBorder": "#7aa2f7"
    },
    "diff": {
      "inserted": {
        "background": "#1b3b2b",
        "foreground": "#9ece6a",
        "border": "#3b5e4a"
      },
      "deleted": {
        "background": "#3b1b1b",
        "foreground": "#f7768e",
        "border": "#5e3a3a"
      },
      "modified": {
        "background": "#1b2b3b",
        "foreground": "#7dcfff",
        "border": "#3a4a5e"
      }
    },
    "scrollbar": {
        "thumb": "#3b4261",
        "track": "#1a1b26",
        "hoverThumb": "#4c5280"
    }
  }
}

Theme Color Tokens

Base Colors

Token	Description
background	Main background color
foreground	Primary text color
primary	Primary accent color
secondary	Secondary accent color
accent	Highlight/accent color
surface	Card/panel background
surfaceAlt	Alternating panel background
border	Border color
selection	Text selection background
selectionText	Text selection foreground
cursor	Cursor color
error	Error state color
warning	Warning state color
info	Info state color
success	Success state color
muted	Muted/de-emphasized text color

Syntax Colors

Token	Description
keyword	Language keywords
string	String literals
number	Numeric literals
function	Function names
variable	Variable names
constant	Constants
type	Type annotations
class	Class names
comment	Comments
operator	Operators
property	Object properties
tag	HTML/JSX tags
attribute	HTML/JSX attributes

Theme Previews

To preview a theme without applying it permanently:

opencode theme preview tokyonight

This temporarily switches the theme for the current session. The change reverts when you restart opencode unless you update tui.json.

Theme Inheritance

Custom themes can inherit from built-in themes and override specific tokens:

{
  "name": "my-tokyonight-mod",
  "inherits": "tokyonight",
  "colors": {
    "accent": "#ff007f",
    "primary": "#00ff7f"
  }
}

The inherits field specifies a base theme. Any tokens defined in the custom theme override the base; undefined tokens are inherited as-is.

Theme Metadata

Optionally add metadata to your theme files:

{
  "name": "my-custom-theme",
  "type": "dark",
  "author": "Your Name",
  "description": "My custom theme for opencode",
  "version": "1.0.0",
  "license": "MIT"
}

Metadata fields:

Field	Description
name	Theme name (used in config and picker)
type	"dark" or "light"
author	Theme author name
description	Short description of the theme
version	Semantic version string
license	License identifier

Theme Directory Structure

~/.config/opencode/themes/
  my-custom-theme.json
  dracula-variant.json
.opencode/themes/
  project-specific-theme.json

Each .json file in these directories registers as a selectable theme. The filename (without extension) becomes the theme identifier used in "theme": "...".

Persistent Theme

The theme set in tui.json persists across sessions. To make a theme permanent:

{
  "theme": "tokyonight"
}

To always use a specific theme across all projects, set it in the global ~/.config/opencode/tui.json.