diff --git a/ui/src/themes/electricPurple.css.js b/ui/src/themes/electricPurple.css.js new file mode 100644 index 00000000000..5cfeb71fd3d --- /dev/null +++ b/ui/src/themes/electricPurple.css.js @@ -0,0 +1,39 @@ +module.exports = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #bd4aff; +} + +.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: #8800cb; +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #8800cb; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #8800cb; +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #8800cb; +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #8800cb !important; +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #8800cb; +} +.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: #8800cb; +} + +.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track { + background-color: #8800cb; +} + + +` diff --git a/ui/src/themes/electricPurple.js b/ui/src/themes/electricPurple.js new file mode 100644 index 00000000000..7431b492eeb --- /dev/null +++ b/ui/src/themes/electricPurple.js @@ -0,0 +1,55 @@ +export default { + themeName: 'Electric Purple', + palette: { + primary: { + light: '#f757ff', + dark: '#8800cb', + main: '#bf00ff', + contrastText: '#fff', + }, + secondary: { + light: '#bd4aff', + dark: '#530099', + main: '#8800cb', + contrastText: '#fff', + }, + warn: { + light: '#ffff82', + dark: '#c9bf07', + main: '#fff14e', + contrastText: '#000', + }, + error: { + light: '#ff763a', + dark: '#c30000', + main: '#ff3f00', + contrastText: '#000', + }, + type: 'dark', + }, + overrides: { + MuiFormGroup: { + root: { + color: 'white', + }, + }, + NDLogin: { + systemNameLink: { + color: '#fff', + }, + welcome: { + color: '#eee', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important', + }, + }, + }, + player: { + theme: 'dark', + stylesheet: require('./electricPurple.css.js'), + }, +} diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index 6c647fae670..c64addfe3a4 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -5,6 +5,7 @@ import GreenTheme from './green' import SpotifyTheme from './spotify' import LigeraTheme from './ligera' import MonokaiTheme from './monokai' +import ElectricPurpleTheme from './electricPurple' export default { // Classic default themes @@ -12,6 +13,7 @@ export default { DarkTheme, // New themes should be added here, in alphabetic order + ElectricPurpleTheme, ExtraDarkTheme, GreenTheme, LigeraTheme,