Repository navigation
feat: tint diffs, messages and selection in every theme (1.1.0) - #15
Merged
Merged
Conversation
The themes set 7 of Claude Code's ~50 color tokens, so diffs, the message background and mouse selection fell back to the neutral presets: every dark theme showed the same saturated red/green diff blocks and a gray message background that clashed with tinted palettes. Since Claude Code 2.1.246 custom themes apply diff colors, so each theme now sets 9 more tokens in its own palette. Diff tints blend the theme's success/error color into its canonical background, softened only as far as needed for text to stay at WCAG AA (4.5:1; 3:1 for changed-word highlights). Selection uses each palette's upstream selection color. Solarized moves to its emphasized text shade, since its standard shades are already below 4.5:1 on its own backgrounds. tests/test_themes.py fails on any value Claude Code would silently ignore and on any pair below those floors.
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
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
The seven themes set only 7 of Claude Code's ~50 color tokens. Diffs, the background behind your messages, and mouse selection fell back to Claude Code's neutral presets, so every dark theme showed the same saturated red/green diff blocks and a gray message background that clashed with palettes like Nord and Sepia. Claude Code 2.1.246 started applying custom-theme diff colors, so each theme now sets 9 more tokens in its own palette:
diffAdded,diffRemoved,diffAddedDimmed,diffRemovedDimmed,diffAddedWord,diffRemovedWord,userMessageBackground,userMessageBackgroundHover,selectionBgHow the values were chosen
success/errorcolor into its canonical background (lines 22%, dimmed 10%, word highlights 45%), the same approach Dracula and Nord use upstream. The blend is softened only as far as needed for the theme's text to stay at WCAG AA 4.5:1, or 3:1 for word highlights (Claude Code's own dark preset is about 3.1:1 there).promptBordersurface.#839496 → #93A1A1, Light#657B83 → #586E75). The standard shades are already below 4.5:1 on Solarized's own backgrounds. Trade-off: Solarized Light's tints stay faint.Values were checked in real Claude Code 2.1.278
/themepreview renders before and after, for all seven themes.Changes
plugins/claude-bionify/themes/*.json: 9 new tokens each, plus the Solarized text shadestests/test_themes.py(new): fails on any value Claude Code would silently ignore (not#rrggbb), on missing tokens, and on any text/background pair below the floors. ReusesBACKGROUNDSfromassets/generate_themes.py.assets/themes.svg: regenerated (only the two Solarized text swatches change)[1.1.0], version 1.1.0 and badgesTest plan
pytest -q: 140 passed, 2 skippedruff check plugins/claude-bionify/scripts tests assetswith ruff 0.16.0 (CI's pin)claude plugin validate . --strictand./plugins/claude-bionify --strictgenerate_themes.pyoutput matches the committedthemes.svgcustom:claude-bionify:*theme in/theme, and check a real edit diff and your message background🤖 Generated with Claude Code