From 1802015737aa4d7f430fc83c5521e9af0cb9d4f0 Mon Sep 17 00:00:00 2001
From: gruneforth <114325145+gruneforth@users.noreply.github.com>
Date: Sat, 29 Jun 2024 14:04:30 -0700
Subject: [PATCH] Add Nuclear Theme (#3098)
---
ui/src/themes/index.js | 2 +
ui/src/themes/nuclear.css.js | 63 +++++++++++
ui/src/themes/nuclear.js | 205 +++++++++++++++++++++++++++++++++++
3 files changed, 270 insertions(+)
create mode 100644 ui/src/themes/nuclear.css.js
create mode 100644 ui/src/themes/nuclear.js
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'),
+ },
+}