docs: edits

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

@@ -2,74 +2,47 @@
 title: Themes
 ---
 
-OpenCode supports most common terminal themes and you can create your own custom theme.
+opencode will support most common terminal themes and you'll soon be able to create your own custom theme.
 
-## Built-in themes
+---
 
-The following predefined themes are available:
+## Built-in
+
+The following built-in themes are available:
 
 - `opencode`
-- `catppuccin`
-- `dracula`
-- `flexoki`
-- `gruvbox`
-- `monokai`
-- `onedark`
+
+  ![opencode theme](../../../assets/themes/opencode.png)
+
+- `ayu`
+
+  ![ayu theme](../../../assets/themes/ayu.png)
+
+- `everforest`
+
+  ![everforest theme](../../../assets/themes/everforest.png)
+
 - `tokyonight`
-- `tron`
-- `custom`
 
-Where `opencode` is the default theme and `custom` let's you define your own theme.
+  ![tokyonight theme](../../../assets/themes/tokyonight.png)
 
-## Setting a theme
+---
 
-You can set your theme in your OpenCode config.
+## Configure
 
-```json title=".opencode.json"
-{
-  "tui": {
-    "theme": "monokai"
-  }
-}
+To select a theme, type in:
+
+```bash frame="none"
+/themes
 ```
 
-## Create a theme
+Your selected theme will be used the next time you start opencode.
 
-You can create your own custom theme by setting the `theme: custom` and providing color definitions through the `customTheme`.
+You can also configure it in your opencode config.
 
-```json title=".opencode.json"
+```json title="opencode.json" {3}
 {
-  "tui": {
-    "theme": "custom",
-    "customTheme": {
-      "primary": "#ffcc00",
-      "secondary": "#00ccff",
-      "accent": { "dark": "#aa00ff", "light": "#ddccff" },
-      "error": "#ff0000"
-    }
-  }
+  "$schema": "https://opencode.ai/config.json",
+  "theme": "tokyonight"
 }
 ```
-
-#### 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`                                     |
-| Background colors | `background`, `backgroundSubtle`, `backgroundElement`   |
-| Border colors     | `border`, `borderActive`, `borderSubtle`                |
-| 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.