themes.mdx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. ---
  2. title: "Themes"
  3. description: "Choose a built-in TUI theme or create a custom color scheme."
  4. ---
  5. import ThemeTokens from "/snippets/generated/theme-tokens.mdx"
  6. OpenCode includes built-in light and dark themes and can load custom themes
  7. from your global configuration or a project directory. The default theme is
  8. `opencode`.
  9. ## Choose a theme
  10. In the full-screen TUI, run:
  11. ```text
  12. /themes
  13. ```
  14. You can also open the picker with `ctrl+x`, then `t`, using the
  15. default keybindings.
  16. Use `/settings` to change both the theme and its color mode. OpenCode supports
  17. three modes:
  18. | Mode | Behavior |
  19. | -------- | -------------------------------------------------------- |
  20. | `system` | Follow the terminal's detected light or dark appearance. |
  21. | `dark` | Always use the theme's dark colors. |
  22. | `light` | Always use the theme's light colors. |
  23. Your selection is stored in `~/.config/opencode/cli.json`, or the equivalent
  24. path under `$XDG_CONFIG_HOME`:
  25. ```json title="cli.json"
  26. {
  27. "theme": {
  28. "name": "tokyonight",
  29. "mode": "system"
  30. }
  31. }
  32. ```
  33. <Note>
  34. Theme selection applies to the full-screen TUI. Direct interactive runs use colors derived from the terminal palette
  35. and honor only the color mode.
  36. </Note>
  37. ## Built-in themes
  38. OpenCode currently includes:
  39. | | | |
  40. | ------------ | ------------------- | ---------------------- |
  41. | `aura` | `ayu` | `carbonfox` |
  42. | `catppuccin` | `catppuccin-frappe` | `catppuccin-macchiato` |
  43. | `cobalt2` | `cursor` | `dracula` |
  44. | `everforest` | `flexoki` | `github` |
  45. | `gruvbox` | `kanagawa` | `lucent-orng` |
  46. | `material` | `matrix` | `mercury` |
  47. | `monokai` | `nightowl` | `nord` |
  48. | `one-dark` | `opencode` | `orng` |
  49. | `osaka-jade` | `palenight` | `rosepine` |
  50. | `solarized` | `synthwave84` | `tokyonight` |
  51. | `vercel` | `vesper` | `zenburn` |
  52. When OpenCode can read your terminal palette, the picker also includes
  53. `system`. The `system` theme generates its colors from your terminal's
  54. foreground, background, and ANSI palette.
  55. ## Custom themes
  56. Create a JSON file in either of these locations:
  57. ```text
  58. ~/.config/opencode/themes/my-theme.json
  59. .opencode/themes/my-theme.json
  60. ```
  61. OpenCode checks the global theme directory first, followed by every
  62. `.opencode/themes` directory from the filesystem root down to the current
  63. directory. A more local file with the same filename overrides an earlier one.
  64. The filename becomes the theme name, so `my-theme.json` appears as `my-theme`.
  65. Custom theme files must be strict JSON. Comments and trailing commas are not
  66. supported.
  67. ### Format
  68. V2 themes organize colors into hue scales and semantic tokens. Set `version`
  69. to `2` and define at least one of `light` or `dark`:
  70. <Warning>
  71. Native V2 custom theme files are not loaded directly by the current beta. Existing custom files use the V1 format and
  72. are migrated to these tokens at runtime. This reference tracks the native V2 schema while direct file loading is
  73. completed.
  74. </Warning>
  75. By default, a theme inherits OpenCode's complete theme, so you only need to
  76. define overrides. Set `mergeMode` to `true` to inherit one mode from the other
  77. before applying that mode's overrides. Set `standalone` to `true` only when you
  78. intend to supply a complete independent theme.
  79. Each token accepts:
  80. - A hex color such as `"#5c9cf5"`
  81. - `"transparent"` to use the terminal default
  82. - A hue reference such as `"$hue.blue.500"`
  83. - Another semantic token reference such as `"$text.default"`
  84. Syntax and markdown tokens accept hex colors and hue references. Other
  85. semantic tokens can reference any semantic token.
  86. <ThemeTokens />
  87. If you add or edit a custom theme while OpenCode is running, restart the TUI to
  88. reload it.
  89. ## Terminal colors
  90. Themes display most accurately in a terminal with truecolor support. Check
  91. your terminal with:
  92. ```bash
  93. echo $COLORTERM
  94. ```
  95. Most modern terminals report `truecolor` or `24bit`. Without truecolor,
  96. OpenCode approximates theme colors using the available terminal palette.