diff --git a/ui/src/themes/gruvboxDark.css.js b/ui/src/themes/gruvboxDark.css.js new file mode 100644 index 000000000..3b692ed22 --- /dev/null +++ b/ui/src/themes/gruvboxDark.css.js @@ -0,0 +1,50 @@ +module.exports = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #458588 +} + +.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: #458588 +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #458588; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #458588 +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #458588 +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #458588 !important +} + +.react-jinke-music-player-main .lyric-btn { + color: #ebdbb2 !important +} + +.react-jinke-music-player-main .lyric-btn-active svg { + color: #458588 !important +} + +.music-player-lyric { + color: #458588 !important +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #458588 +} +.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: #458588 +} + +.progress-bar-content .audio-title a { + color: #ebdbb2 +} + +` diff --git a/ui/src/themes/gruvboxDark.js b/ui/src/themes/gruvboxDark.js new file mode 100644 index 000000000..da5b42817 --- /dev/null +++ b/ui/src/themes/gruvboxDark.js @@ -0,0 +1,104 @@ +export default { + themeName: 'Gruvbox Dark', + palette: { + primary: { + main: '#8ec07c', + }, + secondary: { + main: '#3c3836', + contrastText: '#ebdbb2', + }, + type: 'dark', + background: { + default: '#282828', + }, + }, + overrides: { + MuiPaper: { + root: { + color: '#ebdbb2', + backgroundColor: '#3c3836', + MuiSnackbarContent: { + root: { + color: '#ebdbb2', + backgroundColor: '#cc241d', + }, + message: { + color: '#ebdbb2', + backgroundColor: '#cc241d', + }, + }, + }, + }, + MuiButton: { + textPrimary: { + color: '#8ec07c', + }, + textSecondary: { + color: '#ebdbb2', + }, + }, + MuiChip: { + clickable: { + background: '#49483e', + }, + }, + MuiFormGroup: { + root: { + color: '#ebdbb2', + }, + }, + MuiFormHelperText: { + root: { + Mui: { + error: { + color: '#cc241d', + }, + }, + }, + }, + MuiTableHead: { + root: { + color: '#ebdbb2', + background: '#3c3836 !important', + }, + }, + MuiTableCell: { + root: { + color: '#ebdbb2', + background: '#3c3836 !important', + }, + head: { + color: '#ebdbb2', + background: '#3c3836 !important', + }, + }, + NDLogin: { + systemNameLink: { + color: '#8ec07c', + }, + icon: {}, + welcome: { + color: '#ebdbb2', + }, + card: { + minWidth: 300, + background: '#3c3836', + }, + avatar: {}, + button: { + boxShadow: '3px 3px 5px #3c3836', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important', + }, + }, + }, + player: { + theme: 'dark', + stylesheet: require('./gruvboxDark.css.js'), + }, +} diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index 512a9d195..ee0cdf6e2 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -7,6 +7,7 @@ import LigeraTheme from './ligera' import MonokaiTheme from './monokai' import ElectricPurpleTheme from './electricPurple' import NordTheme from './nord' +import GruvboxDarkTheme from './gruvboxDark' export default { // Classic default themes @@ -17,6 +18,7 @@ export default { ElectricPurpleTheme, ExtraDarkTheme, GreenTheme, + GruvboxDarkTheme, LigeraTheme, MonokaiTheme, NordTheme,