feat(themes): polish Dracula & Monokai — real elevation + text ramps (#40)#60
Merged
Conversation
…40) Both presets read flat because their surface and text ramps were broken: - Chrome backgrounds collapsed together — `bgToolbar` == `bgTerminal` == `bgStatusBar`, and `bgBase` sat *between* them, so toolbar / base / cards / panels never separated. Rebuild each as a stepped ramp (toolbar darkest → base → status → card → elevated). - The text ramp was inverted: `textDim` was *darker* than `textMuted` (Dracula #44475a, Monokai #3e3d32), so "dim" secondary text washed out to near-invisible. Restore ordering with a legible dim tier. - Active tabs were a flat neutral fill; give them an accent-tinted background + accent underline so the current tab reads clearly. - Hover accent was darker than the base accent; brighten it. Canonical hues (Dracula purple/pink/green, Monokai lime/pink/orange) and the terminal ANSI palettes are unchanged. tsc + theme/appearance tests green. Refs #40
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.
First pass on issue #40 (polish built-in themes), covering Dracula and Monokai.
What was flat
Both presets read as flat/monochrome for two structural reasons:
bgToolbar==bgTerminal==bgStatusBar, andbgBasesat between them. Toolbar, base, cards, and panels never visually separated.textDimwas darker thantextMuted(Dracula#44475a, Monokai#3e3d32), so "dim" secondary text washed out to near-invisible on the base background.Changes (per theme)
textMuted < textSecondary < textDim < textPrimary < textBright, with a legible dim tier.accentHover(it was darker than the base accent).Canonical identity is preserved — Dracula's purple/pink/green and Monokai's lime/pink/orange, plus the terminal ANSI palettes, are unchanged. Only the UI surface/text tokens were re-derived.
Verification
tsc --noEmitclean.vitest run src/stores/themeStore.test.ts src/utils/appearance.test.ts— 12 passing.Nord and Tokyo Night have the same structural issues and can follow in a second pass. The refreshed Dracula Theme-Creator screenshot from this work also updates the README showcase (and the docs / landing showcases in their repos).