mirror of
https://github.com/navidrome/navidrome.git
synced 2026-08-31 07:30:32 +00:00
feat(ui): add Tokyo Night theme (#5497)
* feat(themes): add Tokyo Night theme Signed-off-by: Metalhearf <6446231+Metalhearf@users.noreply.github.com> * fix(themes): address review feedback on Tokyo Night Signed-off-by: Metalhearf <6446231+Metalhearf@users.noreply.github.com> --------- Signed-off-by: Metalhearf <6446231+Metalhearf@users.noreply.github.com> Co-authored-by: Deluan <deluan@navidrome.org>
This commit is contained in:
Metalhearf
Rob Emery
parent
7edbfbf795
commit
f4c19cf3a7
@ -18,6 +18,8 @@ import SquiddiesGlassTheme from './SquiddiesGlass'
|
|||||||
import NautilineTheme from './nautiline'
|
import NautilineTheme from './nautiline'
|
||||||
import MoonbaseAlphaTheme from './moonbaseAlpha'
|
import MoonbaseAlphaTheme from './moonbaseAlpha'
|
||||||
import MoonbaseBravoTheme from './moonbaseBravo'
|
import MoonbaseBravoTheme from './moonbaseBravo'
|
||||||
|
import TokyoNightLightTheme from './tokyoNightLight'
|
||||||
|
import TokyoNightTheme from './tokyoNight'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// Classic default themes
|
// Classic default themes
|
||||||
@ -43,4 +45,6 @@ export default {
|
|||||||
NutballTheme,
|
NutballTheme,
|
||||||
SpotifyTheme,
|
SpotifyTheme,
|
||||||
SquiddiesGlassTheme,
|
SquiddiesGlassTheme,
|
||||||
|
TokyoNightLightTheme,
|
||||||
|
TokyoNightTheme,
|
||||||
}
|
}
|
||||||
|
|||||||
143
ui/src/themes/tokyoNight.css.js
Normal file
143
ui/src/themes/tokyoNight.css.js
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
const stylesheet = `
|
||||||
|
|
||||||
|
.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
|
||||||
|
color: #7aa2f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #7aa2f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #7aa2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
||||||
|
box-shadow: 0 0 2px #7aa2f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .audio-item.playing svg {
|
||||||
|
color: #7aa2f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .audio-item.playing .player-singer {
|
||||||
|
color: #7aa2f7 !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .loading svg {
|
||||||
|
color: #7aa2f7 !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
|
||||||
|
border: hidden;
|
||||||
|
box-shadow: rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-slider-rail, .rc-slider-track {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-slider {
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sound-operation > div:nth-child(4) {
|
||||||
|
transform: translateX(-50%) translateY(5%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sound-operation {
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-panel {
|
||||||
|
background-color: #24283b;
|
||||||
|
color: #c0caf5;
|
||||||
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel {
|
||||||
|
background-color: #24283b;
|
||||||
|
bottom: 6.25rem;
|
||||||
|
box-shadow: rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item.playing {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item:nth-child(2n+1) {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item:active,
|
||||||
|
.audio-lists-panel-content .audio-item:hover {
|
||||||
|
background-color: #292e42;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-header {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
box-shadow: 0 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
|
||||||
|
box-shadow: rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-lyric {
|
||||||
|
color: #c0caf5;
|
||||||
|
-webkit-text-stroke: 0.5px #1a1b26;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
|
||||||
|
color: #7aa2f7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
|
||||||
|
color: #7aa2f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #7aa2f7
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item .player-icons {
|
||||||
|
scale: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
|
||||||
|
.react-jinke-music-player-mobile-cover {
|
||||||
|
border: none;
|
||||||
|
box-shadow: rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player .music-player-controller {
|
||||||
|
border: none;
|
||||||
|
box-shadow: rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
|
||||||
|
color: #7aa2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player .music-player-controller .music-player-controller-setting {
|
||||||
|
color: rgba(122, 162, 247, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
|
||||||
|
background-color: #7aa2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-mobile-progress .rc-slider-handle {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default stylesheet
|
||||||
382
ui/src/themes/tokyoNight.js
Normal file
382
ui/src/themes/tokyoNight.js
Normal file
@ -0,0 +1,382 @@
|
|||||||
|
import stylesheet from './tokyoNight.css.js'
|
||||||
|
|
||||||
|
const background = '#1a1b26'
|
||||||
|
const surface = '#24283b'
|
||||||
|
const currentLine = '#292e42'
|
||||||
|
const foreground = '#c0caf5'
|
||||||
|
const comment = '#565f89'
|
||||||
|
const blue = '#7aa2f7'
|
||||||
|
const cyan = '#7dcfff'
|
||||||
|
const purple = '#bb9af7'
|
||||||
|
const red = '#f7768e'
|
||||||
|
|
||||||
|
// For Album, Playlist play button
|
||||||
|
const musicListActions = {
|
||||||
|
alignItems: 'center',
|
||||||
|
'@global': {
|
||||||
|
'button:first-child:not(:only-child)': {
|
||||||
|
'@media screen and (max-width: 720px)': {
|
||||||
|
transform: 'scale(1.5)',
|
||||||
|
margin: '1rem',
|
||||||
|
'&:hover': {
|
||||||
|
transform: 'scale(1.6) !important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
transform: 'scale(2)',
|
||||||
|
margin: '1.5rem',
|
||||||
|
minWidth: 0,
|
||||||
|
padding: 5,
|
||||||
|
transition: 'transform .3s ease',
|
||||||
|
backgroundColor: `${blue} !important`,
|
||||||
|
color: background,
|
||||||
|
borderRadius: 500,
|
||||||
|
border: 0,
|
||||||
|
'&:hover': {
|
||||||
|
transform: 'scale(2.1)',
|
||||||
|
backgroundColor: `${blue} !important`,
|
||||||
|
border: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'button:only-child': {
|
||||||
|
margin: '1.5rem',
|
||||||
|
},
|
||||||
|
'button:first-child>span:first-child': {
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
'button:first-child>span:first-child>span': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
'button>span:first-child>span, button:not(:first-child)>span:first-child>svg':
|
||||||
|
{
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
themeName: 'Tokyo Night',
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
main: blue,
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
main: purple,
|
||||||
|
contrastText: foreground,
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
main: red,
|
||||||
|
},
|
||||||
|
type: 'dark',
|
||||||
|
background: {
|
||||||
|
default: background,
|
||||||
|
paper: surface,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
overrides: {
|
||||||
|
MuiPaper: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
backgroundColor: surface,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiAppBar: {
|
||||||
|
positionFixed: {
|
||||||
|
backgroundColor: `${surface} !important`,
|
||||||
|
boxShadow:
|
||||||
|
'rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiDrawer: {
|
||||||
|
root: {
|
||||||
|
background: background,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiButton: {
|
||||||
|
textPrimary: {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
textSecondary: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiIconButton: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiChip: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFormGroup: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFormLabel: {
|
||||||
|
root: {
|
||||||
|
color: comment,
|
||||||
|
'&$focused': {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFormHelperText: {
|
||||||
|
error: {
|
||||||
|
color: red,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiToolbar: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: `${surface} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiOutlinedInput: {
|
||||||
|
root: {
|
||||||
|
'& $notchedOutline': {
|
||||||
|
borderColor: currentLine,
|
||||||
|
},
|
||||||
|
'&:hover $notchedOutline': {
|
||||||
|
borderColor: comment,
|
||||||
|
},
|
||||||
|
'&$focused $notchedOutline': {
|
||||||
|
borderColor: blue,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFilledInput: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: comment,
|
||||||
|
},
|
||||||
|
'&$focused': {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableRow: {
|
||||||
|
root: {
|
||||||
|
transition: 'background-color .3s ease',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: `${currentLine} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableHead: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
background: surface,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableCell: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
background: `${surface} !important`,
|
||||||
|
borderBottom: `1px solid ${currentLine}`,
|
||||||
|
},
|
||||||
|
head: {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
background: `${currentLine} !important`,
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
color: `${foreground} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiSwitch: {
|
||||||
|
colorSecondary: {
|
||||||
|
'&$checked': {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
'&$checked + $track': {
|
||||||
|
backgroundColor: blue,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumGridView: {
|
||||||
|
albumName: {
|
||||||
|
marginTop: '0.5rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
albumSubtitle: {
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
albumContainer: {
|
||||||
|
backgroundColor: surface,
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '.75rem',
|
||||||
|
transition: 'background-color .3s ease',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
albumPlayButton: {
|
||||||
|
backgroundColor: blue,
|
||||||
|
borderRadius: '50%',
|
||||||
|
boxShadow: '0 8px 8px rgb(0 0 0 / 30%)',
|
||||||
|
padding: '0.35rem',
|
||||||
|
transition: 'padding .3s ease',
|
||||||
|
'&:hover': {
|
||||||
|
background: `${blue} !important`,
|
||||||
|
padding: '0.45rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDPlaylistDetails: {
|
||||||
|
container: {
|
||||||
|
background: `linear-gradient(${currentLine}, transparent)`,
|
||||||
|
borderRadius: 0,
|
||||||
|
paddingTop: '2.5rem !important',
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontWeight: 700,
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
details: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumDetails: {
|
||||||
|
root: {
|
||||||
|
background: `linear-gradient(${currentLine}, transparent)`,
|
||||||
|
borderRadius: 0,
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
cardContents: {
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingTop: '1.5rem',
|
||||||
|
},
|
||||||
|
recordName: {
|
||||||
|
fontWeight: 700,
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
recordArtist: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: purple,
|
||||||
|
},
|
||||||
|
recordMeta: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDCollapsibleComment: {
|
||||||
|
commentBlock: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumShow: {
|
||||||
|
albumActions: musicListActions,
|
||||||
|
},
|
||||||
|
NDPlaylistShow: {
|
||||||
|
playlistActions: musicListActions,
|
||||||
|
},
|
||||||
|
NDAudioPlayer: {
|
||||||
|
audioTitle: {
|
||||||
|
color: foreground,
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
},
|
||||||
|
songTitle: {
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
songInfo: {
|
||||||
|
fontSize: '0.675rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDLogin: {
|
||||||
|
systemNameLink: {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
welcome: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
minWidth: 300,
|
||||||
|
background: surface,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
boxShadow: '3px 3px 5px #15161e',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDMobileArtistDetails: {
|
||||||
|
bgContainer: {
|
||||||
|
background: `linear-gradient(to bottom, rgba(26 27 38 / 72%), ${background})!important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaLayout: {
|
||||||
|
content: {
|
||||||
|
padding: '0 !important',
|
||||||
|
background: background,
|
||||||
|
},
|
||||||
|
root: {
|
||||||
|
backgroundColor: background,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaList: {
|
||||||
|
content: {
|
||||||
|
backgroundColor: background,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaListToolbar: {
|
||||||
|
toolbar: {
|
||||||
|
backgroundColor: background,
|
||||||
|
padding: '0 .55rem !important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaSidebar: {
|
||||||
|
fixed: {
|
||||||
|
backgroundColor: background,
|
||||||
|
},
|
||||||
|
drawerPaper: {
|
||||||
|
backgroundColor: `${background} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaMenuItemLink: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
'&[aria-current="page"]': {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
},
|
||||||
|
'&[aria-current="page"] .MuiListItemIcon-root': {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
'& .MuiListItemIcon-root': {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaLink: {
|
||||||
|
link: {
|
||||||
|
color: cyan,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaButton: {
|
||||||
|
button: {
|
||||||
|
margin: '0 5px 0 5px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaPaginationActions: {
|
||||||
|
currentPageButton: {
|
||||||
|
border: `2px solid ${blue}`,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
minWidth: 48,
|
||||||
|
margin: '0 4px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
player: {
|
||||||
|
theme: 'dark',
|
||||||
|
stylesheet,
|
||||||
|
},
|
||||||
|
}
|
||||||
123
ui/src/themes/tokyoNightLight.css.js
Normal file
123
ui/src/themes/tokyoNightLight.css.js
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
const stylesheet = `
|
||||||
|
.react-jinke-music-player-main.light-theme .loading svg {
|
||||||
|
color: #2e7de9;
|
||||||
|
font-size: 24px
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-mobile-play-model-tip {
|
||||||
|
background-color: #2e7de9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
||||||
|
box-shadow: 0 0 2px #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-item.playing svg {
|
||||||
|
color: #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-item.playing .player-singer {
|
||||||
|
color: #2e7de9 !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
|
||||||
|
color: #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme ::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #2e7de9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme svg {
|
||||||
|
color: #3760bf
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme svg:active, .react-jinke-music-player-main.light-theme svg:hover {
|
||||||
|
color: #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .rc-slider-rail {
|
||||||
|
background-color: rgba(55, 96, 191, .12) !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .music-player-controller {
|
||||||
|
background-color: #d5d6db;
|
||||||
|
border-color: #d5d6db
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .music-player-panel {
|
||||||
|
background-color: #d5d6db;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 34, 77, .05);
|
||||||
|
color: #3760bf
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .music-player-panel .img-content {
|
||||||
|
box-shadow: 0 0 10px #c4c8da
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .music-player-panel .progress-load-bar {
|
||||||
|
background-color: rgba(55, 96, 191, .08) !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .rc-switch {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .rc-switch:after {
|
||||||
|
background-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .rc-switch-checked {
|
||||||
|
background-color: #2e7de9 !important;
|
||||||
|
border: 1px solid #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .rc-switch-inner {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-btn {
|
||||||
|
background-color: #e1e2e7 !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: #ebebed;
|
||||||
|
color: #3760bf
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #2e7de9
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel {
|
||||||
|
background-color: #d5d6db;
|
||||||
|
box-shadow: 0 0 2px #c4c8da;
|
||||||
|
color: #3760bf
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item {
|
||||||
|
background-color: #d5d6db
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item:nth-child(odd) {
|
||||||
|
background-color: #dadbe0 !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing {
|
||||||
|
background-color: #c4c8da !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: #2e7de9 !important
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default stylesheet
|
||||||
382
ui/src/themes/tokyoNightLight.js
Normal file
382
ui/src/themes/tokyoNightLight.js
Normal file
@ -0,0 +1,382 @@
|
|||||||
|
import stylesheet from './tokyoNightLight.css.js'
|
||||||
|
|
||||||
|
const background = '#e1e2e7'
|
||||||
|
const surface = '#d5d6db'
|
||||||
|
const currentLine = '#c4c8da'
|
||||||
|
const foreground = '#3760bf'
|
||||||
|
const comment = '#848cb5'
|
||||||
|
const blue = '#2e7de9'
|
||||||
|
const cyan = '#007197'
|
||||||
|
const purple = '#9854f1'
|
||||||
|
const red = '#f52a65'
|
||||||
|
|
||||||
|
// For Album, Playlist play button
|
||||||
|
const musicListActions = {
|
||||||
|
alignItems: 'center',
|
||||||
|
'@global': {
|
||||||
|
'button:first-child:not(:only-child)': {
|
||||||
|
'@media screen and (max-width: 720px)': {
|
||||||
|
transform: 'scale(1.5)',
|
||||||
|
margin: '1rem',
|
||||||
|
'&:hover': {
|
||||||
|
transform: 'scale(1.6) !important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
transform: 'scale(2)',
|
||||||
|
margin: '1.5rem',
|
||||||
|
minWidth: 0,
|
||||||
|
padding: 5,
|
||||||
|
transition: 'transform .3s ease',
|
||||||
|
backgroundColor: `${blue} !important`,
|
||||||
|
color: background,
|
||||||
|
borderRadius: 500,
|
||||||
|
border: 0,
|
||||||
|
'&:hover': {
|
||||||
|
transform: 'scale(2.1)',
|
||||||
|
backgroundColor: `${blue} !important`,
|
||||||
|
border: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'button:only-child': {
|
||||||
|
margin: '1.5rem',
|
||||||
|
},
|
||||||
|
'button:first-child>span:first-child': {
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
'button:first-child>span:first-child>span': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
'button>span:first-child>span, button:not(:first-child)>span:first-child>svg':
|
||||||
|
{
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
themeName: 'Tokyo Night Light',
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
main: blue,
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
main: purple,
|
||||||
|
contrastText: foreground,
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
main: red,
|
||||||
|
},
|
||||||
|
type: 'light',
|
||||||
|
background: {
|
||||||
|
default: background,
|
||||||
|
paper: surface,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
overrides: {
|
||||||
|
MuiPaper: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
backgroundColor: surface,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiAppBar: {
|
||||||
|
positionFixed: {
|
||||||
|
backgroundColor: `${surface} !important`,
|
||||||
|
boxShadow:
|
||||||
|
'rgba(15, 17, 21, 0.15) 0px 4px 6px, rgba(15, 17, 21, 0.08) 0px 5px 7px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiDrawer: {
|
||||||
|
root: {
|
||||||
|
background: background,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiButton: {
|
||||||
|
textPrimary: {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
textSecondary: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiIconButton: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiChip: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFormGroup: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFormLabel: {
|
||||||
|
root: {
|
||||||
|
color: comment,
|
||||||
|
'&$focused': {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFormHelperText: {
|
||||||
|
error: {
|
||||||
|
color: red,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiToolbar: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: `${surface} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiOutlinedInput: {
|
||||||
|
root: {
|
||||||
|
'& $notchedOutline': {
|
||||||
|
borderColor: currentLine,
|
||||||
|
},
|
||||||
|
'&:hover $notchedOutline': {
|
||||||
|
borderColor: comment,
|
||||||
|
},
|
||||||
|
'&$focused $notchedOutline': {
|
||||||
|
borderColor: blue,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFilledInput: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: comment,
|
||||||
|
},
|
||||||
|
'&$focused': {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableRow: {
|
||||||
|
root: {
|
||||||
|
transition: 'background-color .3s ease',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: `${currentLine} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableHead: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
background: surface,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableCell: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
background: `${surface} !important`,
|
||||||
|
borderBottom: `1px solid ${currentLine}`,
|
||||||
|
},
|
||||||
|
head: {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
background: `${currentLine} !important`,
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
color: `${foreground} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiSwitch: {
|
||||||
|
colorSecondary: {
|
||||||
|
'&$checked': {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
'&$checked + $track': {
|
||||||
|
backgroundColor: blue,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumGridView: {
|
||||||
|
albumName: {
|
||||||
|
marginTop: '0.5rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
albumSubtitle: {
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
albumContainer: {
|
||||||
|
backgroundColor: surface,
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '.75rem',
|
||||||
|
transition: 'background-color .3s ease',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
albumPlayButton: {
|
||||||
|
backgroundColor: blue,
|
||||||
|
borderRadius: '50%',
|
||||||
|
boxShadow: '0 8px 8px rgb(0 0 0 / 20%)',
|
||||||
|
padding: '0.35rem',
|
||||||
|
transition: 'padding .3s ease',
|
||||||
|
'&:hover': {
|
||||||
|
background: `${blue} !important`,
|
||||||
|
padding: '0.45rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDPlaylistDetails: {
|
||||||
|
container: {
|
||||||
|
background: `linear-gradient(${currentLine}, transparent)`,
|
||||||
|
borderRadius: 0,
|
||||||
|
paddingTop: '2.5rem !important',
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontWeight: 700,
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
details: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumDetails: {
|
||||||
|
root: {
|
||||||
|
background: `linear-gradient(${currentLine}, transparent)`,
|
||||||
|
borderRadius: 0,
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
cardContents: {
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingTop: '1.5rem',
|
||||||
|
},
|
||||||
|
recordName: {
|
||||||
|
fontWeight: 700,
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
recordArtist: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: purple,
|
||||||
|
},
|
||||||
|
recordMeta: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDCollapsibleComment: {
|
||||||
|
commentBlock: {
|
||||||
|
fontSize: '.875rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumShow: {
|
||||||
|
albumActions: musicListActions,
|
||||||
|
},
|
||||||
|
NDPlaylistShow: {
|
||||||
|
playlistActions: musicListActions,
|
||||||
|
},
|
||||||
|
NDAudioPlayer: {
|
||||||
|
audioTitle: {
|
||||||
|
color: foreground,
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
},
|
||||||
|
songTitle: {
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
songInfo: {
|
||||||
|
fontSize: '0.675rem',
|
||||||
|
color: comment,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDLogin: {
|
||||||
|
systemNameLink: {
|
||||||
|
color: blue,
|
||||||
|
},
|
||||||
|
welcome: {
|
||||||
|
color: foreground,
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
minWidth: 300,
|
||||||
|
background: surface,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
boxShadow: '3px 3px 5px #a8aecb',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDMobileArtistDetails: {
|
||||||
|
bgContainer: {
|
||||||
|
background: `linear-gradient(to bottom, rgba(225 226 231 / 72%), ${background})!important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaLayout: {
|
||||||
|
content: {
|
||||||
|
padding: '0 !important',
|
||||||
|
background: background,
|
||||||
|
},
|
||||||
|
root: {
|
||||||
|
backgroundColor: background,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaList: {
|
||||||
|
content: {
|
||||||
|
backgroundColor: background,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaListToolbar: {
|
||||||
|
toolbar: {
|
||||||
|
backgroundColor: background,
|
||||||
|
padding: '0 .55rem !important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaSidebar: {
|
||||||
|
fixed: {
|
||||||
|
backgroundColor: background,
|
||||||
|
},
|
||||||
|
drawerPaper: {
|
||||||
|
backgroundColor: `${background} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaMenuItemLink: {
|
||||||
|
root: {
|
||||||
|
color: foreground,
|
||||||
|
'&[aria-current="page"]': {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
},
|
||||||
|
'&[aria-current="page"] .MuiListItemIcon-root': {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
'& .MuiListItemIcon-root': {
|
||||||
|
color: `${blue} !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaLink: {
|
||||||
|
link: {
|
||||||
|
color: cyan,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaButton: {
|
||||||
|
button: {
|
||||||
|
margin: '0 5px 0 5px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaPaginationActions: {
|
||||||
|
currentPageButton: {
|
||||||
|
border: `2px solid ${blue}`,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
backgroundColor: currentLine,
|
||||||
|
minWidth: 48,
|
||||||
|
margin: '0 4px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
player: {
|
||||||
|
theme: 'light',
|
||||||
|
stylesheet,
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user