From aad1a6c3f0f31a25378525fdd46c641a1f14c9ad Mon Sep 17 00:00:00 2001
From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>
Date: Sun, 7 Jun 2026 12:22:54 +0200
Subject: [PATCH] fix(themes): route remaining UI colours through theme tokens
 (#1014)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(themes): route remaining UI colours through theme tokens

An audit found several surfaces still wired to the fixed Catppuccin
palette or hardcoded hex, so community themes could not recolour them:
the 5-star rating, the global search field, the gradient-text flourish,
badges and category-avatar text, and the What's New page + sidebar
banner. Rewire them to existing contract tokens — no new tokens, and the
built-in themes look identical (the values match). Community themes now
control these areas.

Also fixes device-sync rows referencing an undefined --bg-secondary
(they rendered with no background); they now use --bg-card.

* docs(themes): note the theme-coverage PR in the Theme Store entry

Add PR #1014 to the still-unreleased Theme Store changelog and credits
entry, alongside the other follow-ups.
---
 CHANGELOG.md                                  |  2 +-
 src/config/settingsCredits.ts                 |  2 +-
 src/pages/Composers.tsx                       |  6 +-
 src/styles/components/device-sync.css         |  4 +-
 src/styles/components/page.css                | 55 +++++++++----------
 .../components/what-s-new-banner-page.css     | 28 +++++-----
 src/styles/themes/badge.css                   |  2 +-
 src/styles/themes/input-search.css            |  4 +-
 src/styles/themes/star-rating.css             | 12 ++--
 src/styles/themes/utility-classes.css         |  2 +-
 10 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 797d4dc0..0465cf3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,7 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Themes — community Theme Store
 
-**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1009](https://github.com/Psychotoxical/psysonic/pull/1009), [#1011](https://github.com/Psychotoxical/psysonic/pull/1011), [#1012](https://github.com/Psychotoxical/psysonic/pull/1012), [#1013](https://github.com/Psychotoxical/psysonic/pull/1013)**
+**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1009](https://github.com/Psychotoxical/psysonic/pull/1009), [#1011](https://github.com/Psychotoxical/psysonic/pull/1011), [#1012](https://github.com/Psychotoxical/psysonic/pull/1012), [#1013](https://github.com/Psychotoxical/psysonic/pull/1013), [#1014](https://github.com/Psychotoxical/psysonic/pull/1014)**
 
 * New **Settings → Themes** tab: pick a theme, set the day/night scheduler, and browse a built-in **Theme Store** to install, update and uninstall community themes — with search, a dark/light filter, and full-size thumbnail previews.
 * The app now bundles six core themes (Catppuccin Mocha & Latte, Kanagawa Wave, Stark HUD, and the colour-blind-safe Vision Dark / Vision Navy); every other palette installs on demand from the [psysonic-themes](https://github.com/Psysonic/psysonic-themes) repo. Installed themes are saved locally and apply instantly at startup, even offline.
diff --git a/src/config/settingsCredits.ts b/src/config/settingsCredits.ts
index 5ce2ee68..ce32eb1c 100644
--- a/src/config/settingsCredits.ts
+++ b/src/config/settingsCredits.ts
@@ -356,7 +356,7 @@ const CONTRIBUTOR_ENTRIES = [
       'Performance Probe: Monitor/Toggles redesign, live CPU/RSS/thread metrics, overlay pins and sparklines, macOS snapshots (PR #890)',
       'Performance Probe: opt-in thread-group CPU poll toggle and includeThreadGroups IPC fix (PR #891)',
       'Queue: switchable display mode — Queue (upcoming only) vs Playlist (full list), with header toggle and settings entry (PR #922)',
-      'Community Theme Store: semantic-token refactor, dedicated Themes tab with day/night scheduler, install/update/uninstall, local .zip import with full contract validation, and 80+ palettes moved to an on-demand CDN repo (PR #1009, #1011, #1012, #1013)',
+      'Community Theme Store: semantic-token refactor, dedicated Themes tab with day/night scheduler, install/update/uninstall, local .zip import with full contract validation, and 80+ palettes moved to an on-demand CDN repo (PR #1009, #1011, #1012, #1013, #1014)',
     ],
   },
   {
diff --git a/src/pages/Composers.tsx b/src/pages/Composers.tsx
index cc2da0fe..f63432e7 100644
--- a/src/pages/Composers.tsx
+++ b/src/pages/Composers.tsx
@@ -71,7 +71,7 @@ function ComposerRowAvatar({ artist }: { artist: SubsonicArtist }) {
       className="artist-avatar artist-avatar-initial"
       style={{ background: color, border: 0 }}
     >
-      <span style={{ color: 'var(--ctp-crust)', fontWeight: 800 }}>{nameInitial(artist.name)}</span>
+      <span style={{ color: 'var(--text-on-accent)', fontWeight: 800 }}>{nameInitial(artist.name)}</span>
     </div>
   );
 }
@@ -351,7 +351,7 @@ export default function Composers() {
               <button
                 className={`btn btn-surface ${viewMode === 'grid' ? 'btn-sort-active' : ''}`}
                 onClick={() => setViewMode('grid')}
-                style={viewMode === 'grid' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
+                style={viewMode === 'grid' ? { background: 'var(--accent)', color: 'var(--text-on-accent)', padding: '0.5rem' } : { padding: '0.5rem' }}
                 data-tooltip={t('artists.gridView')}
               >
                 <LayoutGrid size={20} />
@@ -359,7 +359,7 @@ export default function Composers() {
               <button
                 className={`btn btn-surface ${viewMode === 'list' ? 'btn-sort-active' : ''}`}
                 onClick={() => setViewMode('list')}
-                style={viewMode === 'list' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
+                style={viewMode === 'list' ? { background: 'var(--accent)', color: 'var(--text-on-accent)', padding: '0.5rem' } : { padding: '0.5rem' }}
                 data-tooltip={t('artists.listView')}
               >
                 <List size={20} />
diff --git a/src/styles/components/device-sync.css b/src/styles/components/device-sync.css
index b93c8fe7..e93c8b73 100644
--- a/src/styles/components/device-sync.css
+++ b/src/styles/components/device-sync.css
@@ -423,7 +423,7 @@
   gap: 8px;
   height: 52px;
   padding: 0 14px;
-  background: var(--bg-secondary);
+  background: var(--bg-card);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
@@ -792,7 +792,7 @@
 
 .device-sync-browser-row:hover { background: var(--bg-hover); }
 .device-sync-browser-row.selected { background: var(--accent-dim); }
-.device-sync-browser-row.indent { padding-left: 36px; background: var(--bg-secondary); }
+.device-sync-browser-row.indent { padding-left: 36px; background: var(--bg-card); }
 .device-sync-browser-row.indent:hover { background: var(--bg-hover); }
 .device-sync-browser-row.indent.selected { background: var(--accent-dim); }
 
diff --git a/src/styles/components/page.css b/src/styles/components/page.css
index 82a1c56f..b95976e2 100644
--- a/src/styles/components/page.css
+++ b/src/styles/components/page.css
@@ -3,17 +3,17 @@
   max-width: 880px;
   margin: 0 auto;
   padding: 28px 32px 48px;
-  color: #e4e7f5;
-  background: #16182a;
+  color: var(--text-primary);
+  background: var(--bg-card);
   border-radius: 12px;
   box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.25);
-  border: 1px solid #2a2d44;
+  border: 1px solid var(--border-subtle);
 }
 
 .whats-new__header {
   padding-bottom: 16px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #2a2d44;
+  border-bottom: 1px solid var(--border-subtle);
 }
 .whats-new__title-row {
   display: flex;
@@ -29,32 +29,32 @@
   width: 32px;
   height: 32px;
   border-radius: 6px;
-  border: 1px solid #3a3f5a;
+  border: 1px solid var(--border);
   background: transparent;
-  color: #9aa0bd;
+  color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 .whats-new__close:hover {
-  background: rgba(255,255,255,0.06);
-  color: #e4e7f5;
-  border-color: #4a5072;
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--border);
 }
 .whats-new__icon {
-  color: #8ec8ff;
+  color: var(--accent);
   flex-shrink: 0;
 }
 .whats-new__title {
   font-size: 22px;
   font-weight: 700;
   margin: 0;
-  color: #f1f3fb;
+  color: var(--text-primary);
   line-height: 1.2;
 }
 .whats-new__subtitle {
   font-size: 13px;
-  color: #9aa0bd;
+  color: var(--text-muted);
   margin-top: 2px;
 }
 .whats-new__date {
@@ -66,22 +66,22 @@
   line-height: 1.65;
 }
 .whats-new__empty {
-  color: #9aa0bd;
+  color: var(--text-muted);
   font-style: italic;
 }
 
 .whats-new-h3 {
   font-size: 16px;
   font-weight: 700;
-  color: #f1f3fb;
+  color: var(--text-primary);
   margin: 22px 0 10px;
   padding-bottom: 6px;
-  border-bottom: 1px solid #2a2d44;
+  border-bottom: 1px solid var(--border-subtle);
 }
 .whats-new-h4 {
   font-size: 14px;
   font-weight: 700;
-  color: #dfe3f6;
+  color: var(--text-primary);
   margin: 14px 0 6px;
 }
 
@@ -99,27 +99,27 @@
   padding-left: 2px;
 }
 .whats-new-list li::marker {
-  color: #6b7192;
+  color: var(--text-muted);
 }
 
 .whats-new-quote {
-  border-left: 3px solid #3a3f5a;
+  border-left: 3px solid var(--border);
   padding: 6px 12px;
   margin: 10px 0;
-  color: #b6bcd8;
-  background: rgba(255,255,255,0.02);
+  color: var(--text-secondary);
+  background: var(--bg-hover);
   border-radius: 0 4px 4px 0;
 }
 
 .whats-new-hr {
   border: none;
-  border-top: 1px solid #2a2d44;
+  border-top: 1px solid var(--border-subtle);
   margin: 18px 0;
 }
 
 .whats-new-code {
-  background: #262a3e;
-  color: #d4d7f0;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
   padding: 1px 5px;
   border-radius: 3px;
   font-family: var(--font-mono, ui-monospace, monospace);
@@ -127,13 +127,12 @@
 }
 
 .whats-new-link {
-  color: #8ec8ff;
+  color: var(--accent);
   text-decoration: none;
-  border-bottom: 1px dashed #4a5072;
+  border-bottom: 1px dashed var(--border);
   cursor: pointer;
 }
 .whats-new-link:hover {
-  color: #b6dbff;
-  border-bottom-color: #8ec8ff;
+  color: var(--accent);
+  border-bottom-color: var(--accent);
 }
-
diff --git a/src/styles/components/what-s-new-banner-page.css b/src/styles/components/what-s-new-banner-page.css
index d692f0c3..76f1c2da 100644
--- a/src/styles/components/what-s-new-banner-page.css
+++ b/src/styles/components/what-s-new-banner-page.css
@@ -1,7 +1,6 @@
 /* ─ What's New — banner + page ────────────────────────────────────────────
-   Fixed neutral palette so it reads identically on every theme (light and
-   dark). The banner sits in the sidebar just above Now Playing; the page
-   opens in the main content area. */
+   The banner sits in the sidebar just above Now Playing; the page opens in
+   the main content area. Both follow the active theme. */
 
 .sidebar-bottom-spacer {
   margin-top: auto;
@@ -15,9 +14,9 @@
   width: 100%;
   padding: 8px 10px;
   margin: 0 0 6px 0;
-  background: #1f2233;
-  color: #dfe3f6;
-  border: 1px solid #3a3f5a;
+  background: var(--bg-card);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
   border-radius: 8px;
   font: inherit;
   font-size: 12px;
@@ -28,13 +27,13 @@
 }
 
 .whats-new-banner:hover {
-  background: #272b40;
-  border-color: #4a5072;
+  background: var(--bg-hover);
+  border-color: var(--border);
 }
 
 .whats-new-banner__icon {
   flex-shrink: 0;
-  color: #8ec8ff;
+  color: var(--accent);
 }
 
 .whats-new-banner__text {
@@ -47,12 +46,12 @@
 
 .whats-new-banner__title {
   font-weight: 600;
-  color: #f1f3fb;
+  color: var(--text-primary);
 }
 
 .whats-new-banner__version {
   font-size: 10.5px;
-  color: #9aa0bd;
+  color: var(--text-muted);
   font-variant-numeric: tabular-nums;
 }
 
@@ -64,12 +63,12 @@
   width: 18px;
   height: 18px;
   border-radius: 4px;
-  color: #9aa0bd;
+  color: var(--text-muted);
   cursor: pointer;
 }
 .whats-new-banner__dismiss:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: #e4e7f5;
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .whats-new-banner--collapsed {
@@ -81,4 +80,3 @@
   justify-content: center;
   margin: 0 auto 6px;
 }
-
diff --git a/src/styles/themes/badge.css b/src/styles/themes/badge.css
index 715eb963..a52a4ac6 100644
--- a/src/styles/themes/badge.css
+++ b/src/styles/themes/badge.css
@@ -10,6 +10,6 @@
   /* Opaque fill — `--accent-dim` is too transparent and disappears against
      light-toned hero backdrops when the cover art is white-dominant. */
   background: var(--accent);
-  color: var(--ctp-crust);
+  color: var(--text-on-accent);
 }
 
diff --git a/src/styles/themes/input-search.css b/src/styles/themes/input-search.css
index e3086dc4..e1669a1a 100644
--- a/src/styles/themes/input-search.css
+++ b/src/styles/themes/input-search.css
@@ -3,8 +3,8 @@
   width: 100%;
   padding: var(--space-2) var(--space-3);
   padding-left: 36px;
-  background: var(--ctp-base);
-  border: 1px solid var(--ctp-overlay0);
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-sans);
diff --git a/src/styles/themes/star-rating.css b/src/styles/themes/star-rating.css
index 49eb15d0..a38392f4 100644
--- a/src/styles/themes/star-rating.css
+++ b/src/styles/themes/star-rating.css
@@ -2,23 +2,23 @@
 .star-rating {
   display: flex;
   gap: 2px;
-  color: var(--ctp-overlay1);
+  color: var(--text-muted);
   justify-content: center;
   width: 100%;
 }
 
 .star-rating .star.filled {
-  color: var(--ctp-yellow);
+  color: var(--highlight);
 }
 
 .star-rating .star:hover {
-  color: var(--ctp-yellow);
+  color: var(--highlight);
   cursor: pointer;
 }
 
-/* While clearing: no yellow hover until pointer leaves or next click */
+/* While clearing: no highlight hover until pointer leaves or next click */
 .star-rating--suppress-hover .star:hover {
-  color: var(--ctp-overlay1);
+  color: var(--text-muted);
 }
 
 .star-rating--disabled {
@@ -40,7 +40,7 @@
 }
 
 .star-rating .star.star--locked:hover {
-  color: var(--ctp-overlay1);
+  color: var(--text-muted);
   cursor: default;
 }
 
diff --git a/src/styles/themes/utility-classes.css b/src/styles/themes/utility-classes.css
index 8d1da1e3..4a0fde24 100644
--- a/src/styles/themes/utility-classes.css
+++ b/src/styles/themes/utility-classes.css
@@ -1,6 +1,6 @@
 /* ─── Utility Classes ─── */
 .gradient-text {
-  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;