diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index 5169d466b..0234d416b 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -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, } diff --git a/ui/src/themes/nuclear.css.js b/ui/src/themes/nuclear.css.js new file mode 100644 index 000000000..f8c0d8ad7 --- /dev/null +++ b/ui/src/themes/nuclear.css.js @@ -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 +} + +` diff --git a/ui/src/themes/nuclear.js b/ui/src/themes/nuclear.js new file mode 100644 index 000000000..5db45344a --- /dev/null +++ b/ui/src/themes/nuclear.js @@ -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'), + }, +}