feat: add theme system with dark, light, green, purple, and yellow themes - #29
Merged
Conversation
Open
…emes Converts the existing palette into a token-based design system (docs/DESIGN_SYSTEM.md) so a new theme is a theme.css-only change, then adds five themes and a quick-access switcher next to the settings cog. Theme choice persists via the existing app_settings table.
Matches the roving-tabindex + Escape-to-close pattern already used by Equalizer.svelte's preset-list popover, which this component otherwise duplicates the structure of.
Toggling .hide-toggle's opacity on album hover was forcing WebKitGTK to switch the whole window's text antialiasing mode for a frame, visible as every album's title/artist text flashing bold — invisible against dark theme's near-black surfaces, but obvious against light theme's near-white one. will-change: opacity pre-promotes it to its own compositing layer so the hover no longer triggers a window-wide repaint.
Title/subtitle were below the project's 1em font-size floor, and the title's semibold weight read as too heavy once the antialiasing-flash fix made it render consistently. Also fixes the "NEW" badge's sub-1em text while touching this file. Bumps the virtualizer's per-card text-height reservation to match the now-taller lines.
1em overwhelmed the album art it sits on top of. Kept as a documented, narrow exception to the project's 1em text-size floor since it's a decorative corner pill, not reading content.
lstebner
force-pushed
the
feat/theme-system
branch
from
July 9, 2026 04:46
ae7de94 to
2bf50d5
Compare
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
docs/DESIGN_SYSTEM.md) so a new theme is atheme.css-only change, with documented rules for choosing accent hues, deriving hover/contrast colors, and handling status-color/accent-hue collisions.dark(unchanged) and addslight(a proper contrast-checked inverse) plusgreen/purple/yellow— each colored theme has its own tinted, elevation-ramped neutral scale (not just a swapped accent) built around a muted accent chosen visually against the real app chrome.appearance_get_theme/appearance_set_themeTauri commands backed by the existingapp_settingstable.Test plan
cargo test --lib— 105 passednpm run test— 4 passednpm run check— 0 errorsScreencast.from.2026-07-08.21-45-25.mp4
🤖 Generated with Claude Code