feat(theme): custom themes can use calculated `system` colors
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".
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-
systemtheme now reacts toToggle 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"