Files
opencode/packages/web/src/content/docs/docs/themes.mdx
2025-05-31 14:41:00 -04:00

76 lines
2.0 KiB
Plaintext

---
title: Themes
---
OpenCode supports most common terminal themes and you can create your own custom theme.
## Built-in themes
The following predefined themes are available:
- `opencode`
- `catppuccin`
- `dracula`
- `flexoki`
- `gruvbox`
- `monokai`
- `onedark`
- `tokyonight`
- `tron`
- `custom`
Where `opencode` is the default theme and `custom` let's you define your own theme.
## Setting a theme
You can set your theme in your OpenCode config.
```json title=".opencode.json"
{
"tui": {
"theme": "monokai"
}
}
```
## Create a theme
You can create your own custom theme by setting the `theme: custom` and providing color definitions through the `customTheme`.
```json title=".opencode.json"
{
"tui": {
"theme": "custom",
"customTheme": {
"primary": "#ffcc00",
"secondary": "#00ccff",
"accent": { "dark": "#aa00ff", "light": "#ddccff" },
"error": "#ff0000"
}
}
}
```
#### Color keys
You can define any of the following color keys in your `customTheme`.
| Type | Color keys |
| ----------------- | ------------------------------------------------------- |
| Base colors | `primary`, `secondary`, `accent` |
| Status colors | `error`, `warning`, `success`, `info` |
| Text colors | `text`, `textMuted`, `textEmphasized` |
| Background colors | `background`, `backgroundSecondary`, `backgroundDarker` |
| Border colors | `borderNormal`, `borderFocused`, `borderDim` |
| Diff view colors | `diffAdded`, `diffRemoved`, `diffContext`, etc. |
You don't need to define all the color keys. Any undefined colors will fall back to the default `opencode` theme colors.
#### Color definitions
Color keys can take:
1. **Hex string**: A single hex color string, like `"#aabbcc"`, that'll be used for both light and dark terminal backgrounds.
2. **Light and dark colors**: An object with `dark` and `light` hex colors that'll be set based on the terminal's background.