Add Nuclear Theme (#3098)

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,
 }

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
+}
+
+`

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'),
+  },
+}