itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 06:25:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme): improve Latte and GTA theme readability

Browse Source 
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>
This commit is contained in:
Psychotoxical
2026-04-17 17:44:18 +02:00
parent b197694804
commit ccdb899833
3 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/theme.css
+36 -7
View File
@@ -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);