From ccdb8998339dc2f80c252d6fe6c6e3a67b1ae6da Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Fri, 17 Apr 2026 17:44:18 +0200
Subject: [PATCH] fix(theme): improve Latte and GTA theme readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Latte: fix server dropdown dark background (--bg-card instead of hardcoded #1e1e2e), add back-button white text over album cover overlay, fix NowPlaying white-on-white text (artist/album, badges, bio, tracklist, star/heart icons use semantic vars).

GTA: bump --text-muted from #484848 to #707070 and --text-primary from #e8e8e8 to #d8d8d8 — sidebar section labels, Settings descriptions and album detail info were nearly invisible on the near-black background.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/NowPlaying.tsx |  8 ++++----
 src/styles/layout.css    |  2 +-
 src/styles/theme.css     | 43 +++++++++++++++++++++++++++++++++-------
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/pages/NowPlaying.tsx b/src/pages/NowPlaying.tsx
index 49516e04..d45d538e 100644
--- a/src/pages/NowPlaying.tsx
+++ b/src/pages/NowPlaying.tsx
@@ -44,7 +44,7 @@ function renderStars(rating?: number) {
       {[1, 2, 3, 4, 5].map(i => (
         <Star key={i} size={13}
           fill={i <= rating ? 'var(--ctp-yellow)' : 'none'}
-          color={i <= rating ? 'var(--ctp-yellow)' : 'rgba(255,255,255,0.4)'}
+          color={i <= rating ? 'var(--ctp-yellow)' : 'var(--ctp-overlay1)'}
         />
       ))}
     </div>
@@ -175,7 +175,7 @@ const NpTrackList = memo(function NpTrackList({ albumTracks, currentTrackId, alb
   return (
     <div className="np-info-card">
       <div className="np-card-header">
-        <h3 className="np-card-title">{t('nowPlaying.fromAlbum')}: <em style={{ fontStyle: 'normal', color: 'rgba(255,255,255,0.6)' }}>{album}</em></h3>
+        <h3 className="np-card-title">{t('nowPlaying.fromAlbum')}: <em style={{ fontStyle: 'normal', color: 'var(--text-muted)' }}>{album}</em></h3>
         {albumId && (
           <button className="np-card-link" onClick={() => onNavigate(`/album/${albumId}`)}>
             {t('nowPlaying.viewAlbum')} <ExternalLink size={12} />
@@ -429,13 +429,13 @@ export default function NowPlaying() {
                     <button onClick={toggleStar} className="np-star-btn"
                       data-tooltip={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
                     >
-                      <Heart size={17} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
+                      <Heart size={17} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'currentColor'} />
                     </button>
                     <button
                       className="np-star-btn"
                       onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
                       data-tooltip={t('player.lyrics')}
-                      style={{ color: activeTab === 'lyrics' && isQueueVisible ? 'var(--accent)' : 'white' }}
+                      style={{ color: activeTab === 'lyrics' && isQueueVisible ? 'var(--accent)' : undefined }}
                     >
                       <MicVocal size={17} />
                     </button>
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 2fef2745..358f63b5 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -309,7 +309,7 @@
   padding: var(--space-1);
   border-radius: var(--radius-md);
   border: 1px solid var(--border-dropdown, rgba(255, 255, 255, 0.12));
-  background: var(--bg-secondary, #1e1e2e);
+  background: var(--bg-card);
   box-shadow: 0 8px 24px var(--shadow-dropdown, rgba(0, 0, 0, 0.45));
   box-sizing: border-box;
   overflow-y: visible;
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 354cf082..c802fa10 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -226,6 +226,35 @@
   --danger: var(--ctp-red);
 }
 
+/* ─── Latte light-theme component overrides ─── */
+[data-theme='latte'] {
+  --border-dropdown: var(--border);
+  --shadow-dropdown: rgba(0, 0, 0, 0.12);
+}
+
+[data-theme='latte'] .album-detail-back {
+  color: rgba(255, 255, 255, 0.85);
+}
+[data-theme='latte'] .album-detail-back:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+
+[data-theme='latte'] .np-artist-album { color: var(--text-secondary); }
+[data-theme='latte'] .np-badge { background: var(--bg-hover); color: var(--text-primary); }
+[data-theme='latte'] .np-star-btn { color: var(--text-muted); }
+[data-theme='latte'] .np-tag-cloud-header { color: var(--text-muted); }
+[data-theme='latte'] .np-tag { background: var(--bg-hover); color: var(--text-secondary); }
+[data-theme='latte'] .np-album-track:hover { background: var(--bg-hover); }
+[data-theme='latte'] .np-album-track.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+[data-theme='latte'] .np-album-track-num { color: var(--text-muted); }
+[data-theme='latte'] .np-album-track-title { color: var(--text-primary); }
+[data-theme='latte'] .np-album-track.active .np-album-track-title { color: var(--accent); }
+[data-theme='latte'] .np-album-track-dur { color: var(--text-muted); }
+[data-theme='latte'] .np-link:hover { color: var(--accent); }
+[data-theme='latte'] .np-radio-time { color: var(--text-muted); }
+[data-theme='latte'] .np-bio-text { color: var(--text-secondary); }
+
 /* ─── Nord – Polar Night (Dark) ─── */
 [data-theme='nord'] {
   color-scheme: dark;
@@ -1553,11 +1582,11 @@
   --ctp-surface0: #161616;
   --ctp-surface1: #202020;
   --ctp-surface2: #2c2c2c;
-  --ctp-overlay0: #484848;
-  --ctp-overlay1: #707070;
-  --ctp-overlay2: #989898;
-  --ctp-text: #e8e8e8;
-  --ctp-subtext1: #c0c0c0;
+  --ctp-overlay0: #707070;
+  --ctp-overlay1: #909090;
+  --ctp-overlay2: #b0b0b0;
+  --ctp-text: #d8d8d8;
+  --ctp-subtext1: #b8b8b8;
   --ctp-subtext0: #888888;
 
   /* GTA palette */
@@ -1597,10 +1626,10 @@
   --volume-accent: #ffd700;
   /* wanted-gold for volume knob */
 
-  --text-primary: #e8e8e8;
+  --text-primary: #d8d8d8;
   --text-secondary: #ffd700;
   /* wanted-level gold — the key differentiator */
-  --text-muted: #484848;
+  --text-muted: #707070;
   --border: #242424;
   --border-subtle: #161616;
   --shadow-dropdown: rgba(0, 0, 0, 0.9);