mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
fix(theme): improve Latte and GTA theme readability
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:
@@ -44,7 +44,7 @@ function renderStars(rating?: number) {
|
|||||||
{[1, 2, 3, 4, 5].map(i => (
|
{[1, 2, 3, 4, 5].map(i => (
|
||||||
<Star key={i} size={13}
|
<Star key={i} size={13}
|
||||||
fill={i <= rating ? 'var(--ctp-yellow)' : 'none'}
|
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>
|
</div>
|
||||||
@@ -175,7 +175,7 @@ const NpTrackList = memo(function NpTrackList({ albumTracks, currentTrackId, alb
|
|||||||
return (
|
return (
|
||||||
<div className="np-info-card">
|
<div className="np-info-card">
|
||||||
<div className="np-card-header">
|
<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 && (
|
{albumId && (
|
||||||
<button className="np-card-link" onClick={() => onNavigate(`/album/${albumId}`)}>
|
<button className="np-card-link" onClick={() => onNavigate(`/album/${albumId}`)}>
|
||||||
{t('nowPlaying.viewAlbum')} <ExternalLink size={12} />
|
{t('nowPlaying.viewAlbum')} <ExternalLink size={12} />
|
||||||
@@ -429,13 +429,13 @@ export default function NowPlaying() {
|
|||||||
<button onClick={toggleStar} className="np-star-btn"
|
<button onClick={toggleStar} className="np-star-btn"
|
||||||
data-tooltip={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
|
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>
|
||||||
<button
|
<button
|
||||||
className="np-star-btn"
|
className="np-star-btn"
|
||||||
onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
|
onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
|
||||||
data-tooltip={t('player.lyrics')}
|
data-tooltip={t('player.lyrics')}
|
||||||
style={{ color: activeTab === 'lyrics' && isQueueVisible ? 'var(--accent)' : 'white' }}
|
style={{ color: activeTab === 'lyrics' && isQueueVisible ? 'var(--accent)' : undefined }}
|
||||||
>
|
>
|
||||||
<MicVocal size={17} />
|
<MicVocal size={17} />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -309,7 +309,7 @@
|
|||||||
padding: var(--space-1);
|
padding: var(--space-1);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
border: 1px solid var(--border-dropdown, rgba(255, 255, 255, 0.12));
|
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-shadow: 0 8px 24px var(--shadow-dropdown, rgba(0, 0, 0, 0.45));
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
|
|||||||
+36
-7
@@ -226,6 +226,35 @@
|
|||||||
--danger: var(--ctp-red);
|
--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) ─── */
|
/* ─── Nord – Polar Night (Dark) ─── */
|
||||||
[data-theme='nord'] {
|
[data-theme='nord'] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
@@ -1553,11 +1582,11 @@
|
|||||||
--ctp-surface0: #161616;
|
--ctp-surface0: #161616;
|
||||||
--ctp-surface1: #202020;
|
--ctp-surface1: #202020;
|
||||||
--ctp-surface2: #2c2c2c;
|
--ctp-surface2: #2c2c2c;
|
||||||
--ctp-overlay0: #484848;
|
--ctp-overlay0: #707070;
|
||||||
--ctp-overlay1: #707070;
|
--ctp-overlay1: #909090;
|
||||||
--ctp-overlay2: #989898;
|
--ctp-overlay2: #b0b0b0;
|
||||||
--ctp-text: #e8e8e8;
|
--ctp-text: #d8d8d8;
|
||||||
--ctp-subtext1: #c0c0c0;
|
--ctp-subtext1: #b8b8b8;
|
||||||
--ctp-subtext0: #888888;
|
--ctp-subtext0: #888888;
|
||||||
|
|
||||||
/* GTA palette */
|
/* GTA palette */
|
||||||
@@ -1597,10 +1626,10 @@
|
|||||||
--volume-accent: #ffd700;
|
--volume-accent: #ffd700;
|
||||||
/* wanted-gold for volume knob */
|
/* wanted-gold for volume knob */
|
||||||
|
|
||||||
--text-primary: #e8e8e8;
|
--text-primary: #d8d8d8;
|
||||||
--text-secondary: #ffd700;
|
--text-secondary: #ffd700;
|
||||||
/* wanted-level gold — the key differentiator */
|
/* wanted-level gold — the key differentiator */
|
||||||
--text-muted: #484848;
|
--text-muted: #707070;
|
||||||
--border: #242424;
|
--border: #242424;
|
||||||
--border-subtle: #161616;
|
--border-subtle: #161616;
|
||||||
--shadow-dropdown: rgba(0, 0, 0, 0.9);
|
--shadow-dropdown: rgba(0, 0, 0, 0.9);
|
||||||
|
|||||||
Reference in New Issue
Block a user