sync

packages/web/src/content/docs/docs/themes.mdx

@@ -0,0 +1,75 @@
+---
+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.