| --- |
| title: Themes |
| description: Select a built-in theme or define your own. |
| --- |
| |
| With OpenCode you can select from one of several built-in themes, use a theme that adapts to your terminal theme, or define your own custom theme. |
|
|
| By default, OpenCode uses our own `opencode` theme. |
|
|
| --- |
| |
| |
|
|
| For themes to display correctly with their full color palette, your terminal must support **truecolor** (24-bit color). Most modern terminals support this by default, but you may need to enable it: |
|
|
| - **Check support**: Run `echo $COLORTERM` - it should output `truecolor` or `24bit` |
| - **Enable truecolor**: Set the environment variable `COLORTERM=truecolor` in your shell profile |
| - **Terminal compatibility**: Ensure your terminal emulator supports 24-bit color (most modern terminals like iTerm2, Alacritty, Kitty, Windows Terminal, and recent versions of GNOME Terminal do) |
|
|
| Without truecolor support, themes may appear with reduced color accuracy or fall back to the nearest 256-color approximation. |
|
|
| --- |
| |
| |
|
|
| OpenCode comes with several built-in themes. |
|
|
| | Name | Description | |
| | ---------------------- | ---------------------------------------------------------------------------- | |
| | `system` | Adapts to your terminal’s background color | |
| | `tokyonight` | Based on the [Tokyonight](https://github.com/folke/tokyonight.nvim) theme | |
| | `everforest` | Based on the [Everforest](https://github.com/sainnhe/everforest) theme | |
| | `ayu` | Based on the [Ayu](https://github.com/ayu-theme) dark theme | |
| | `catppuccin` | Based on the [Catppuccin](https://github.com/catppuccin) theme | |
| | `catppuccin-macchiato` | Based on the [Catppuccin](https://github.com/catppuccin) theme | |
| | `gruvbox` | Based on the [Gruvbox](https://github.com/morhetz/gruvbox) theme | |
| | `kanagawa` | Based on the [Kanagawa](https://github.com/rebelot/kanagawa.nvim) theme | |
| | `nord` | Based on the [Nord](https://github.com/nordtheme/nord) theme | |
| | `matrix` | Hacker-style green on black theme | |
| | `one-dark` | Based on the [Atom One](https://github.com/Th3Whit3Wolf/one-nvim) Dark theme | |
|
|
| And more, we are constantly adding new themes. |
|
|
| --- |
| |
| |
|
|
| The `system` theme is designed to automatically adapt to your terminal's color scheme. Unlike traditional themes that use fixed colors, the _system_ theme: |
|
|
| - **Generates gray scale**: Creates a custom gray scale based on your terminal's background color, ensuring optimal contrast. |
| - **Uses ANSI colors**: Leverages standard ANSI colors (0-15) for syntax highlighting and UI elements, which respect your terminal's color palette. |
| - **Preserves terminal defaults**: Uses `none` for text and background colors to maintain your terminal's native appearance. |
|
|
| The system theme is for users who: |
|
|
| - Want OpenCode to match their terminal's appearance |
| - Use custom terminal color schemes |
| - Prefer a consistent look across all terminal applications |
|
|
| --- |
| |
| |
|
|
| You can select a theme by bringing up the theme select with the `/theme` command. Or you can specify it in `tui.json`. |
|
|
| ```json title="tui.json" {3} |
| { |
| "$schema": "https://opencode.ai/tui.json", |
| "theme": "tokyonight" |
| } |
| ``` |
|
|
| --- |
| |
| |
|
|
| OpenCode supports a flexible JSON-based theme system that allows users to create and customize themes easily. |
|
|
| --- |
| |
| |
|
|
| Themes are loaded from multiple directories in the following order where later directories override earlier ones: |
|
|
| 1. **Built-in themes** - These are embedded in the binary |
| 2. **User config directory** - Defined in `~/.config/opencode/themes/*.json` or `$XDG_CONFIG_HOME/opencode/themes/*.json` |
| 3. **Project root directory** - Defined in the `<project-root>/.opencode/themes/*.json` |
| 4. **Current working directory** - Defined in `./.opencode/themes/*.json` |
|
|
| If multiple directories contain a theme with the same name, the theme from the directory with higher priority will be used. |
|
|
| --- |
| |
| |
|
|
| To create a custom theme, create a JSON file in one of the theme directories. |
|
|
| For user-wide themes: |
|
|
| ```bash no-frame |
| mkdir -p ~/.config/opencode/themes |
| vim ~/.config/opencode/themes/my-theme.json |
| ``` |
|
|
| And for project-specific themes. |
|
|
| ```bash no-frame |
| mkdir -p .opencode/themes |
| vim .opencode/themes/my-theme.json |
| ``` |
|
|
| --- |
| |
| |
|
|
| Themes use a flexible JSON format with support for: |
|
|
| - **Hex colors**: `"#ffffff"` |
| - **ANSI colors**: `3` (0-255) |
| - **Color references**: `"primary"` or custom definitions |
| - **Dark/light variants**: `{"dark": "#000", "light": "#fff"}` |
| - **No color**: `"none"` - Uses the terminal's default color or transparent |
|
|
| --- |
| |
| |
|
|
| The `defs` section is optional and it allows you to define reusable colors that can be referenced in the theme. |
|
|
| --- |
| |
| |
|
|
| The special value `"none"` can be used for any color to inherit the terminal's default color. This is particularly useful for creating themes that blend seamlessly with your terminal's color scheme: |
|
|
| - `"text": "none"` - Uses terminal's default foreground color |
| - `"background": "none"` - Uses terminal's default background color |
|
|
| --- |
| |
| |
|
|
| Here's an example of a custom theme: |
|
|
| ```json title="my-theme.json" |
| { |
| "$schema": "https://opencode.ai/theme.json", |
| "defs": { |
| "nord0": "#2E3440", |
| "nord1": "#3B4252", |
| "nord2": "#434C5E", |
| "nord3": "#4C566A", |
| "nord4": "#D8DEE9", |
| "nord5": "#E5E9F0", |
| "nord6": "#ECEFF4", |
| "nord7": "#8FBCBB", |
| "nord8": "#88C0D0", |
| "nord9": "#81A1C1", |
| "nord10": "#5E81AC", |
| "nord11": "#BF616A", |
| "nord12": "#D08770", |
| "nord13": "#EBCB8B", |
| "nord14": "#A3BE8C", |
| "nord15": "#B48EAD" |
| }, |
| "theme": { |
| "primary": { |
| "dark": "nord8", |
| "light": "nord10" |
| }, |
| "secondary": { |
| "dark": "nord9", |
| "light": "nord9" |
| }, |
| "accent": { |
| "dark": "nord7", |
| "light": "nord7" |
| }, |
| "error": { |
| "dark": "nord11", |
| "light": "nord11" |
| }, |
| "warning": { |
| "dark": "nord12", |
| "light": "nord12" |
| }, |
| "success": { |
| "dark": "nord14", |
| "light": "nord14" |
| }, |
| "info": { |
| "dark": "nord8", |
| "light": "nord10" |
| }, |
| "text": { |
| "dark": "nord4", |
| "light": "nord0" |
| }, |
| "textMuted": { |
| "dark": "nord3", |
| "light": "nord1" |
| }, |
| "background": { |
| "dark": "nord0", |
| "light": "nord6" |
| }, |
| "backgroundPanel": { |
| "dark": "nord1", |
| "light": "nord5" |
| }, |
| "backgroundElement": { |
| "dark": "nord1", |
| "light": "nord4" |
| }, |
| "border": { |
| "dark": "nord2", |
| "light": "nord3" |
| }, |
| "borderActive": { |
| "dark": "nord3", |
| "light": "nord2" |
| }, |
| "borderSubtle": { |
| "dark": "nord2", |
| "light": "nord3" |
| }, |
| "diffAdded": { |
| "dark": "nord14", |
| "light": "nord14" |
| }, |
| "diffRemoved": { |
| "dark": "nord11", |
| "light": "nord11" |
| }, |
| "diffContext": { |
| "dark": "nord3", |
| "light": "nord3" |
| }, |
| "diffHunkHeader": { |
| "dark": "nord3", |
| "light": "nord3" |
| }, |
| "diffHighlightAdded": { |
| "dark": "nord14", |
| "light": "nord14" |
| }, |
| "diffHighlightRemoved": { |
| "dark": "nord11", |
| "light": "nord11" |
| }, |
| "diffAddedBg": { |
| "dark": "#3B4252", |
| "light": "#E5E9F0" |
| }, |
| "diffRemovedBg": { |
| "dark": "#3B4252", |
| "light": "#E5E9F0" |
| }, |
| "diffContextBg": { |
| "dark": "nord1", |
| "light": "nord5" |
| }, |
| "diffLineNumber": { |
| "dark": "nord2", |
| "light": "nord4" |
| }, |
| "diffAddedLineNumberBg": { |
| "dark": "#3B4252", |
| "light": "#E5E9F0" |
| }, |
| "diffRemovedLineNumberBg": { |
| "dark": "#3B4252", |
| "light": "#E5E9F0" |
| }, |
| "markdownText": { |
| "dark": "nord4", |
| "light": "nord0" |
| }, |
| "markdownHeading": { |
| "dark": "nord8", |
| "light": "nord10" |
| }, |
| "markdownLink": { |
| "dark": "nord9", |
| "light": "nord9" |
| }, |
| "markdownLinkText": { |
| "dark": "nord7", |
| "light": "nord7" |
| }, |
| "markdownCode": { |
| "dark": "nord14", |
| "light": "nord14" |
| }, |
| "markdownBlockQuote": { |
| "dark": "nord3", |
| "light": "nord3" |
| }, |
| "markdownEmph": { |
| "dark": "nord12", |
| "light": "nord12" |
| }, |
| "markdownStrong": { |
| "dark": "nord13", |
| "light": "nord13" |
| }, |
| "markdownHorizontalRule": { |
| "dark": "nord3", |
| "light": "nord3" |
| }, |
| "markdownListItem": { |
| "dark": "nord8", |
| "light": "nord10" |
| }, |
| "markdownListEnumeration": { |
| "dark": "nord7", |
| "light": "nord7" |
| }, |
| "markdownImage": { |
| "dark": "nord9", |
| "light": "nord9" |
| }, |
| "markdownImageText": { |
| "dark": "nord7", |
| "light": "nord7" |
| }, |
| "markdownCodeBlock": { |
| "dark": "nord4", |
| "light": "nord0" |
| }, |
| "syntaxComment": { |
| "dark": "nord3", |
| "light": "nord3" |
| }, |
| "syntaxKeyword": { |
| "dark": "nord9", |
| "light": "nord9" |
| }, |
| "syntaxFunction": { |
| "dark": "nord8", |
| "light": "nord8" |
| }, |
| "syntaxVariable": { |
| "dark": "nord7", |
| "light": "nord7" |
| }, |
| "syntaxString": { |
| "dark": "nord14", |
| "light": "nord14" |
| }, |
| "syntaxNumber": { |
| "dark": "nord15", |
| "light": "nord15" |
| }, |
| "syntaxType": { |
| "dark": "nord7", |
| "light": "nord7" |
| }, |
| "syntaxOperator": { |
| "dark": "nord9", |
| "light": "nord9" |
| }, |
| "syntaxPunctuation": { |
| "dark": "nord4", |
| "light": "nord0" |
| } |
| } |
| } |
| ``` |
|
|
