opencode icon indicating copy to clipboard operation
opencode copied to clipboard

feat(theme): custom themes can use calculated `system` colors

Open nihil2501 opened this issue 3 weeks ago • 0 comments

GH Issue

This makes it possible for custom themes to configure specific theme colors to use the calculated system values, e.g.:

{ "theme": { "accent": "system", "background": "#000000" } }

Example

In this example, pop-dark.json, I have a custom theme which sets specific syntax colors, but falls back to "system" for everything else. This "extreme" example shows syntax highlighting I took from Helix's "Pop Dark" theme, and everything else OpenCode is deriving given that Ghostty's theme is set to "HaX0R Blue".

Screenshot 2025-12-28 at 5 57 00 PM

Description

OpenCode themes address UI concepts that don't necessarily exist in themes for other tools like Helix, e.g.:

  • backgroundElement
  • backgroundMenu
  • backgroundPanel
  • border
  • borderActive
  • borderSubtle

In my case, I wanted to make a custom theme that matches what I have in Helix. I also already have terminal ANSI colors that match my Helix theme. Rather than go through the manual work to choose colors for every slot OpenCode offers, this change lets you customize some colors, while falling back to the values of the calculated system theme for the rest.

Commits

This PR has a series of preliminary refactor and fix commits that set up the implementation of the feature. The preliminary refactor half of this change might be desirable to merge on its own terms, even if the feature request is rejected.

Preliminary fixes

Admittedly the two fixes are not directly about the feature, but maybe they're welcome to be brought in with the rest of the changes to this file:

  • fix(theme): system light & dark
    • system theme now reacts to Toggle appearance
  • fix(theme): custom theme load error fallback
    • Stops custom theme loading error handling from switching away from themes that don't depend on custom themes

Feature implementation

The rest of the non-refactor commits implement the feature:

  • feat(theme): add "system" color value to theme schema
  • feat(theme): init considers system-like custom themes
  • feat(theme): resolveTheme resolves "system"

nihil2501 avatar Dec 28 '25 23:12 nihil2501