Skip to content

feat(themes): apply OpenCode color themes app-wide with a settings picker - #364

Merged
chriswritescode-dev merged 1 commit into
mainfrom
feature/opencode-color-themes
Sep 28, 2026
Merged

chriswritescode-dev merged 1 commit into
mainfrom
feature/opencode-color-themes

Conversation

@chriswritescode-dev

Copy link
Copy Markdown
Owner

Summary

Vendor the 36-theme OpenCode catalog into the shared package and apply the selected color theme across the entire manager UI. Users can pick a color theme in General settings, and every surface — chat messages, diffs, agent colors, git status styles, and the model quick-select — follows the active theme in both light and dark modes.

  • Add shared/src/themes with palettes vendored from the pinned OpenCode release (v2.0.15), refreshable via a new pnpm themes:sync script, plus the vendored license file.
  • Add a colorTheme user preference to the backend settings schema, defaults, and the assistant internal API.
  • Add a palette-to-CSS-token resolver and DOM applier, and a ThemeProvider context that applies the theme on boot and on preference changes.
  • Extend palettes with success, warning, info, and diff colors, and adopt the theme tokens across message, repo, session, settings, file-browser, and source-control components, plus agent colors and git status styles.
  • Add a theme picker to General settings and make model quick-select follow the active theme (fixes Model selector ignores light mode and unreadable "More models" button #355).

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation

Checklist

  • Code follows project style (no comments, named imports)
  • TypeScript types are properly defined
  • Tests added/updated (80% coverage target)
  • pnpm lint passes locally
  • pnpm typecheck passes locally

Testing

  • pnpm test -> cli + backend + frontend suites all pass (frontend: 1,615 tests; backend coverage 86.99%).
  • pnpm lint -> 0 errors (pre-existing no-explicit-any warnings only).
  • pnpm typecheck -> exit 0.

…cker

- Vendor the 36 OpenCode theme palettes into the shared package, synced
  from the pinned OpenCode release tag via pnpm themes:sync.
- Add a colorTheme user preference across the settings schema, defaults,
  and the assistant internal API.
- Extend palettes with success, warning, info, and diff colors, and add a
  resolver that maps palettes to CSS tokens and applies them to the DOM.
- Apply the theme app-wide through a ThemeProvider context, adopting the
  tokens in message, repo, session, and settings components, agent
  colors, git status styles, and diff viewers.
- Add a theme picker to General settings and make model quick-select
  follow the active theme (fixes #355).
@coderabbitai

coderabbitai Bot commented Sep 28, 2026

Copy link
Copy Markdown
Contributor

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 0371cc36-cc45-4dbb-8351-ad8c3b20561d

📥 Commits

Reviewing files that changed from the base of the PR and between 702e3c4 and 31a1765.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (115)
  • backend/src/services/assistant-mode.ts
  • backend/src/services/settings.ts
  • backend/test/routes/internal-settings.test.ts
  • docs/features/assistant-internal-api.md
  • frontend/index.html
  • frontend/src/App.tsx
  • frontend/src/api/types/settings.ts
  • frontend/src/components/agent/AgentQuickSelect.tsx
  • frontend/src/components/file-browser/FileDiffView.tsx
  • frontend/src/components/file-browser/FilePreview.test.tsx
  • frontend/src/components/file-browser/FilePreview.tsx
  • frontend/src/components/file-browser/FileTree.tsx
  • frontend/src/components/message/ContentDiffViewer.tsx
  • frontend/src/components/message/DiffStats.tsx
  • frontend/src/components/message/EditableUserMessage.tsx
  • frontend/src/components/message/FileToolRender.tsx
  • frontend/src/components/message/FloatingTTSButton.test.tsx
  • frontend/src/components/message/FloatingTTSButton.tsx
  • frontend/src/components/message/MessageSkeleton.tsx
  • frontend/src/components/message/MessageThread.tsx
  • frontend/src/components/message/PromptInput.tsx
  • frontend/src/components/message/RetryPart.tsx
  • frontend/src/components/message/StepFileChanges.tsx
  • frontend/src/components/message/TextPart.tsx
  • frontend/src/components/message/ToolCallPart.tsx
  • frontend/src/components/message/VoiceStatusOverlay.tsx
  • frontend/src/components/model/ModelQuickSelect.test.tsx
  • frontend/src/components/model/ModelQuickSelect.tsx
  • frontend/src/components/navigation/MobileTabBar.tsx
  • frontend/src/components/navigation/MoreDrawer.tsx
  • frontend/src/components/navigation/NotificationsSheet.tsx
  • frontend/src/components/navigation/RepoSessionNav.tsx
  • frontend/src/components/repo/AddRepoDialog.tsx
  • frontend/src/components/repo/CreateWorktreeDialog.tsx
  • frontend/src/components/repo/RenameRepoDialog.tsx
  • frontend/src/components/repo/RepoCard.test.tsx
  • frontend/src/components/repo/RepoCard.tsx
  • frontend/src/components/repo/RepoList.tsx
  • frontend/src/components/repo/RepoMcpServerList.tsx
  • frontend/src/components/repo/WorkspaceManager.tsx
  • frontend/src/components/repo/WorktreeTabs.tsx
  • frontend/src/components/schedules/PromptTab.tsx
  • frontend/src/components/schedules/RunDetailPanel.tsx
  • frontend/src/components/schedules/RunHistoryCards.tsx
  • frontend/src/components/schedules/schedule-utils.ts
  • frontend/src/components/session/BackgroundWorkBar.tsx
  • frontend/src/components/session/ContextUsageIndicator.tsx
  • frontend/src/components/session/EditSessionTitleDialog.tsx
  • frontend/src/components/session/FormPrompt.tsx
  • frontend/src/components/session/MinimizedFormIndicator.tsx
  • frontend/src/components/session/PermissionRequestDialog.tsx
  • frontend/src/components/session/SessionCard.tsx
  • frontend/src/components/settings/AccountSettings.tsx
  • frontend/src/components/settings/AgentsMdEditor.tsx
  • frontend/src/components/settings/GeneralSettings.test.tsx
  • frontend/src/components/settings/GeneralSettings.tsx
  • frontend/src/components/settings/LogsViewer.tsx
  • frontend/src/components/settings/ManagerTokenSettings.tsx
  • frontend/src/components/settings/McpOAuthDialog.tsx
  • frontend/src/components/settings/McpServerCard.tsx
  • frontend/src/components/settings/McpStatusBadge.tsx
  • frontend/src/components/settings/NotificationSettings.tsx
  • frontend/src/components/settings/OpenCodeConfigEditor.tsx
  • frontend/src/components/settings/OpenCodeConfigManager.tsx
  • frontend/src/components/settings/OpenCodeConfigSourcesNotice.tsx
  • frontend/src/components/settings/OpenCodeServerAuthSettings.tsx
  • frontend/src/components/settings/ProviderSettings.tsx
  • frontend/src/components/settings/STTSettings.tsx
  • frontend/src/components/settings/SandboxSettings.test.tsx
  • frontend/src/components/settings/ServerEnvVarsSettings.test.tsx
  • frontend/src/components/settings/ServerHealthStatus.tsx
  • frontend/src/components/settings/SettingsDialog.test.tsx
  • frontend/src/components/settings/SettingsDialog.tsx
  • frontend/src/components/settings/SettingsDialogLogs.test.tsx
  • frontend/src/components/settings/TTSSettings.tsx
  • frontend/src/components/settings/VersionSelectDialog.tsx
  • frontend/src/components/skills/SkillLibraryList.tsx
  • frontend/src/components/source-control/BranchesTab.tsx
  • frontend/src/components/source-control/GitFlatFileItem.tsx
  • frontend/src/components/source-control/GitFlatFileList.tsx
  • frontend/src/components/ssh/SSHHostKeyDialog.tsx
  • frontend/src/components/ui/back-button.tsx
  • frontend/src/components/ui/button.tsx
  • frontend/src/components/ui/code-editor.tsx
  • frontend/src/components/ui/confirm-destructive-dialog.tsx
  • frontend/src/components/ui/copy-button.tsx
  • frontend/src/components/ui/error-banner.tsx
  • frontend/src/components/ui/pending-action-badge.tsx
  • frontend/src/components/ui/session-status-indicator.tsx
  • frontend/src/components/ui/settings-list.tsx
  • frontend/src/components/ui/sidebar.tsx
  • frontend/src/components/ui/switch.tsx
  • frontend/src/components/ui/virtualized-text-view.tsx
  • frontend/src/contexts/ThemeContext.tsx
  • frontend/src/hooks/useTheme.test.tsx
  • frontend/src/hooks/useTheme.ts
  • frontend/src/index.css
  • frontend/src/lib/agent-colors.test.ts
  • frontend/src/lib/agent-colors.ts
  • frontend/src/lib/git-status-styles.ts
  • frontend/src/lib/theme/colorTheme.test.ts
  • frontend/src/lib/theme/colorTheme.ts
  • frontend/src/pages/AssistantRedirect.tsx
  • frontend/src/pages/RepoDetail.tsx
  • frontend/src/pages/SessionDetail.tsx
  • frontend/src/test/test-utils.tsx
  • package.json
  • scripts/sync-opencode-themes.ts
  • shared/package.json
  • shared/src/schemas/internal-assistant.ts
  • shared/src/schemas/settings.ts
  • shared/src/themes/OPENCODE_THEMES_LICENSE
  • shared/src/themes/index.ts
  • shared/src/themes/opencode-palettes.ts
  • shared/src/themes/types.ts
 _____________________________________________________________________________
< Easy things should be easy and hard things should be possible. - Larry Wall >
 -----------------------------------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       /   づ
✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@chriswritescode-dev

Copy link
Copy Markdown
Owner Author

This resolves #364 by applying the OpenCode color themes app-wide, including the new settings picker.

  • Themes now apply across the whole app rather than per-surface
  • Added a settings picker so users can choose their theme
  • Branch: feature/opencode-color-themes → main (1 commit, no conflicts)

@chriswritescode-dev
chriswritescode-dev merged commit 5bd688d into main Sep 28, 2026
1 of 2 checks passed
@chriswritescode-dev
chriswritescode-dev deleted the feature/opencode-color-themes branch September 28, 2026 04:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Model selector ignores light mode and unreadable "More models" button

1 participant