feat(web): add selectable diff syntax theme in settings - #5
Merged
Conversation
Add a "Diff theme" dropdown to Settings → Appearance that lets users choose the syntax highlighting theme for code diffs from a curated set of themes bundled by @pierre/diffs (Pierre + Shiki collections). - New `diffTheme` client setting (contracts) with `pierre-dark` default, persisted and synced like other client settings and wired into the "Restore defaults" flow. - `resolveDiffThemeName` now maps dark mode to the selected theme and light mode to pierre-light; a `useDiffThemeName` hook makes every diff surface (DiffPanel, ChatMarkdown, worker pool, timeline, file preview) react live to the setting. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a Diff theme dropdown to Settings → Appearance so the syntax highlighting theme for code diffs is user-configurable, instead of being hardcoded to
pierre-dark.Themes come from the set already bundled by
@pierre/diffs(Pierre + Shiki collections), so there's no new dependency. The selected theme applies in dark mode; light mode continues to usepierre-light. Changing it updates open diffs live.Changes
diffThemeclient setting (DiffThemeschema,pierre-darkdefault) added toClientSettingsSchema+ClientSettingsPatch; wired into the "Restore defaults" flow.resolveDiffThemeName(resolvedTheme, darkTheme): maps dark mode → selected theme, light mode →pierre-light. AddsDIFF_THEME_OPTIONS(dropdown list) andDIFF_HIGHLIGHTER_THEME_NAMES(registered up front so runtime switching never hits an unattached theme).useDiffThemeNamehook: combines app light/dark mode + the setting; used by DiffPanel, ChatMarkdown, DiffWorkerPoolProvider, MessagesTimeline, and FilePreviewPanel so they react to the setting.Notes
pierre-dark(no behavior change out of the box).@pierre/diffssource that themes resolve on the main thread before being sent to the worker, so runtime switching works for all listed themes.🤖 Generated with Claude Code