feat(tui): system-like custom themes
Issues
- Closes #6322
- Closes #4236
- Something akin to this feature is discussed within the comments
Feature
Custom themes can now reference the system theme that is generated from the user's terminal color palette by using "system" as a color value:
{
"theme": {
"background": "system",
"foreground": "system",
"primary": "#ff5500"
}
}
Performance optimization
The theme context now readies 10x faster in the by-far most common case (using one of the default themes). The speedup is due to not waiting for resources to load that are irrelevant for the requested theme.
Timed using this patch that calls console.time inside createSimpleContext.
After = 3.558ms
...
[17:05:25] [LOG] '%s: %s' 'context:Theme' '3.558ms'
...
Before = 31.264ms
...
[17:04:19] [LOG] '%s: %s' 'context:Theme' '31.264ms'
...
More details
Key behaviors
- Custom theme loading and system palette detection each modeled w/ SolidJS's
createResource - These in turn are accessed in SolidJS's
createMemoreturning(requested theme, resource loading status)- Considers only the relevant resource loading statuses for the given requested theme
- Drives the reactivity into theme resolution
- Somewhat conservative & simplistic design choices
Miscellany
- Warning toasts on errored (this functionality could easily be removed)
- System theme now responds to
Toggle appearance - Theme picker list now updates on reload
Commits
Three atomic commits build up to this feature:
-
fix(tui): system theme light & dark variants -
refactor(tui): theme switching & loading reactivity -
feat(tui): system-like custom themes
Notes
- This can be split into 3 sequential PRs if preferred, one per atomic commit above
- The first 2 commits might be valuable without adding this feature in the 3rd commit
- The performance optimization is in the 2nd, refactor commit
Thanks for your contribution!
This PR doesn't have a linked issue. All PRs must reference an existing issue.
Please:
- Open an issue describing the bug/feature (if one doesn't exist)
- Add
Fixes #<number>orCloses #<number>to this PR description
See CONTRIBUTING.md for details.
The following comment was made by an LLM, it may be inaccurate:
Based on my search, I found one potentially related PR:
Potentially Related:
-
#5296 -
feat(tui): add theme-configurable text selection colors(https://github.com/anomalyco/opencode/pull/5296)- Related to TUI theme customization and color configuration. While this focuses specifically on text selection colors, it's part of the broader TUI theming system that PR #9184 expands.
The other results (#5020 on layout systems and #8239 on desktop appearance toggle) are related but address different aspects of the system.
Conclusion: No clear duplicate PRs found. PR #9184 appears to be implementing a novel feature for system-like custom themes in the TUI that doesn't have an existing equivalent PR.