mirror of
https://github.com/navidrome/navidrome.git
synced 2025-04-14 19:20:37 +03:00
Add Nuclear Theme (#3098)
This commit is contained in:
gruneforth
GitHub
parent
47378c6882
commit
1802015737
@ -9,6 +9,7 @@ import ElectricPurpleTheme from './electricPurple'
|
||||
import NordTheme from './nord'
|
||||
import GruvboxDarkTheme from './gruvboxDark'
|
||||
import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
|
||||
import NuclearTheme from './nuclear'
|
||||
|
||||
export default {
|
||||
// Classic default themes
|
||||
@ -24,5 +25,6 @@ export default {
|
||||
LigeraTheme,
|
||||
MonokaiTheme,
|
||||
NordTheme,
|
||||
NuclearTheme,
|
||||
SpotifyTheme,
|
||||
}
|
||||
|
||||
63
ui/src/themes/nuclear.css.js
Normal file
63
ui/src/themes/nuclear.css.js
Normal file
@ -0,0 +1,63 @@
|
||||
module.exports = `
|
||||
|
||||
.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
|
||||
color: #b8bb26
|
||||
}
|
||||
|
||||
.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: #b8bb26;
|
||||
border-color: #79740e
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
|
||||
background-color: #b8bb26;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
||||
box-shadow: 0 0 2px #b8bb26
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing svg {
|
||||
color: #b8bb26
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing .player-singer {
|
||||
color: #b8bb26 !important
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .rc-slider-rail {
|
||||
background-color: #e6e9c1 !important
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .lyric-btn {
|
||||
color: #ebdbb2 !important
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel {
|
||||
color: #ebdbb2 !important
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .lyric-btn-active svg {
|
||||
color: #b8bb26 !important
|
||||
}
|
||||
|
||||
.music-player-lyric {
|
||||
color: #b8bb26 !important
|
||||
}
|
||||
|
||||
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
|
||||
color: #b8bb26
|
||||
}
|
||||
.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
|
||||
color: #b8bb26
|
||||
}
|
||||
|
||||
.progress-bar-content .audio-title a {
|
||||
color: #ebdbb2
|
||||
}
|
||||
|
||||
.MuiCheckbox-colorSecondary.Mui-checked {
|
||||
color: #b8bb26 !important
|
||||
}
|
||||
|
||||
`
|
||||
205
ui/src/themes/nuclear.js
Normal file
205
ui/src/themes/nuclear.js
Normal file
@ -0,0 +1,205 @@
|
||||
const nukeCol = {
|
||||
primary: '#1d2021',
|
||||
secondary: '#282828',
|
||||
accent: '#32302f',
|
||||
text: '#ebdbb2',
|
||||
textAlt: '#bdae93',
|
||||
icon: '#b8bb26',
|
||||
link: '#c22817',
|
||||
border: '#a89984',
|
||||
}
|
||||
|
||||
export default {
|
||||
themeName: 'Nuclear',
|
||||
palette: {
|
||||
primary: {
|
||||
main: nukeCol['primary'],
|
||||
},
|
||||
secondary: {
|
||||
main: nukeCol['secondary'],
|
||||
},
|
||||
background: {
|
||||
default: nukeCol['primary'],
|
||||
},
|
||||
text: {
|
||||
primary: nukeCol['text'],
|
||||
secondary: nukeCol['text'],
|
||||
},
|
||||
type: 'dark',
|
||||
},
|
||||
overrides: {
|
||||
MuiTypography: {
|
||||
root: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
colorPrimary: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
root: {
|
||||
backgroundColor: nukeCol['secondary'],
|
||||
},
|
||||
},
|
||||
MuiFormGroup: {
|
||||
root: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
},
|
||||
NDAlbumGridView: {
|
||||
albumName: {
|
||||
marginTop: '0.5rem',
|
||||
fontWeight: 700,
|
||||
textTransform: 'none',
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
albumSubtitle: {
|
||||
color: nukeCol['textAlt'],
|
||||
},
|
||||
},
|
||||
MuiAppBar: {
|
||||
colorSecondary: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
positionFixed: {
|
||||
backgroundColor: nukeCol['primary'],
|
||||
boxShadow:
|
||||
'rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px',
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
root: {
|
||||
border: '1px solid transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: nukeCol['accent'],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
contained: {
|
||||
boxShadow: 'none',
|
||||
'&:hover': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
root: {
|
||||
backgroundColor: nukeCol['accent'],
|
||||
},
|
||||
label: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
},
|
||||
RaLink: {
|
||||
link: {
|
||||
color: nukeCol['link'],
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
root: {
|
||||
borderBottom: 'none',
|
||||
color: nukeCol['text'],
|
||||
padding: '10px !important',
|
||||
},
|
||||
head: {
|
||||
fontSize: '0.75rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1.2,
|
||||
backgroundColor: nukeCol['accent'],
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
body: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
},
|
||||
MuiInput: {
|
||||
root: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
},
|
||||
MuiFormLabel: {
|
||||
root: {
|
||||
'&$focused': {
|
||||
color: nukeCol['text'],
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
notchedOutline: {
|
||||
borderColor: nukeCol['border'],
|
||||
},
|
||||
},
|
||||
//Icons
|
||||
MuiIconButton: {
|
||||
label: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
},
|
||||
MuiListItemIcon: {
|
||||
root: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
},
|
||||
MuiSelect: {
|
||||
icon: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
},
|
||||
MuiSvgIcon: {
|
||||
root: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
colorDisabled: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
},
|
||||
MuiSwitch: {
|
||||
colorPrimary: {
|
||||
'&$checked + $track': {
|
||||
backgroundColor: '#f9f5d7',
|
||||
},
|
||||
},
|
||||
track: {
|
||||
backgroundColor: '#665c54',
|
||||
},
|
||||
},
|
||||
RaButton: {
|
||||
smallIcon: {
|
||||
color: nukeCol['icon'],
|
||||
},
|
||||
},
|
||||
RaDatagrid: {
|
||||
headerCell: {
|
||||
backgroundColor: nukeCol['accent'],
|
||||
},
|
||||
},
|
||||
//Login Screen
|
||||
NDLogin: {
|
||||
systemNameLink: {
|
||||
color: nukeCol['text'],
|
||||
},
|
||||
icon: {},
|
||||
card: {
|
||||
minWidth: 300,
|
||||
backgroundColor: nukeCol['text'],
|
||||
},
|
||||
avatar: {},
|
||||
button: {
|
||||
boxShadow: '3px 3px 5px #000000a3',
|
||||
},
|
||||
},
|
||||
NDMobileArtistDetails: {
|
||||
bgContainer: {
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important',
|
||||
},
|
||||
},
|
||||
},
|
||||
player: {
|
||||
theme: 'dark',
|
||||
stylesheet: require('./nuclear.css.js'),
|
||||
},
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user