mirror of
https://github.com/navidrome/navidrome.git
synced 2026-10-15 22:07:08 +02:00
8e306b1f61* feat(ui): add Solarized Light and Dark themes Add Light and Dark variants of Ethan Schoonover's Solarized palette, built on the Tokyo Night theme structure so they cover the app bar, sidebar, tables, album grid, album/playlist details, login and the player. Text colors are one step stronger than canonical Solarized body text (base01 on light, base1 on dark) so table text keeps WCAG AA contrast. The Dark variant uses cyan instead of violet as the secondary accent, since violet is too dark on base03. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: rucolastico <diegoricomartell@gmail.com> * fix(ui): improve Solarized contrast and table row hover Address review feedback on the Solarized themes: - Use text-specific shades for links and the login system name, keeping them above 4.5:1 on table surfaces and hover rows (darkened blue on Light, lightened cyan on Dark). Canonical blue stays for controls. - Darken the Light theme's violet accent, which is also used as text (album artist), to keep it above 4.5:1. - Give secondary buttons readable text: base3 on violet (Light) and base03 on cyan (Dark), instead of the body text color. - Apply the row hover color to table cells, whose opaque background was hiding the row hover. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: rucolastico <diegoricomartell@gmail.com> * fix(ui): keep Solarized app bar title and icons readable The app bar uses the secondary color, whose contrastText matched the app bar background (1:1 in Light, 1.15:1 in Dark). Override the app bar's colorSecondary text with the theme foreground (4.99:1 Light, 4.86:1 Dark), keeping secondary.contrastText for buttons on the accent color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: rucolastico <diegoricomartell@gmail.com> --------- Signed-off-by: rucolastico <diegoricomartell@gmail.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: Deluan Quintão <deluan@navidrome.org>
123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
const stylesheet = `
|
|
.react-jinke-music-player-main.light-theme .loading svg {
|
|
color: #268bd2;
|
|
font-size: 24px
|
|
}
|
|
|
|
.react-jinke-music-player-mobile-play-model-tip {
|
|
background-color: #268bd2;
|
|
}
|
|
|
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
|
|
background-color: #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
|
box-shadow: 0 0 2px #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-item.playing svg {
|
|
color: #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-item.playing .player-singer {
|
|
color: #268bd2 !important
|
|
}
|
|
|
|
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
|
|
color: #268bd2
|
|
}
|
|
|
|
.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg {
|
|
color: #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme ::-webkit-scrollbar-thumb {
|
|
background-color: #268bd2;
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme svg {
|
|
color: #586e75
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme svg:active, .react-jinke-music-player-main.light-theme svg:hover {
|
|
color: #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .rc-slider-rail {
|
|
background-color: rgba(88, 110, 117, .12) !important
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .music-player-controller {
|
|
background-color: #fdf6e3;
|
|
border-color: #fdf6e3
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .music-player-panel {
|
|
background-color: #fdf6e3;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 43, 54, .05);
|
|
color: #586e75
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .music-player-panel .img-content {
|
|
box-shadow: 0 0 10px #e4ddc6
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .music-player-panel .progress-load-bar {
|
|
background-color: rgba(88, 110, 117, .08) !important
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .rc-switch {
|
|
color: #fdf6e3
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .rc-switch:after {
|
|
background-color: #fdf6e3
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .rc-switch-checked {
|
|
background-color: #268bd2 !important;
|
|
border: 1px solid #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .rc-switch-inner {
|
|
color: #fdf6e3
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-btn {
|
|
background-color: #eee8d5 !important
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-btn:active, .react-jinke-music-player-main.light-theme .audio-lists-btn:hover {
|
|
background-color: #e4ddc6;
|
|
color: #586e75
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-btn > .group:hover, .react-jinke-music-player-main.light-theme .audio-lists-btn > .group:hover > svg {
|
|
color: #268bd2
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-panel {
|
|
background-color: #fdf6e3;
|
|
box-shadow: 0 0 2px #e4ddc6;
|
|
color: #586e75
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item {
|
|
background-color: #fdf6e3
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item:nth-child(odd) {
|
|
background-color: #f5efdc !important
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing {
|
|
background-color: #e4ddc6 !important
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing svg {
|
|
color: #268bd2 !important
|
|
}
|
|
`
|
|
|
|
export default stylesheet
|