From 1bb05f1d3a6033013c7d4c60de21f530faab3bf2 Mon Sep 17 00:00:00 2001 From: craiglush Date: Tue, 24 Mar 2026 14:43:50 +0000 Subject: [PATCH 1/3] Add Moonbase theme A warm dark theme with gold (#d4a039) accents on deep charcoal backgrounds (#0a0a09/#141413). Features muted cream text (#e5ddd3), copper error states (#c45c3c), and subtle earthy secondary tones. Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/src/themes/index.js | 2 + ui/src/themes/moonbase.css.js | 63 +++++++++++++++++++++++ ui/src/themes/moonbase.js | 96 +++++++++++++++++++++++++++++++++++ 3 files changed, 161 insertions(+) create mode 100644 ui/src/themes/moonbase.css.js create mode 100644 ui/src/themes/moonbase.js diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index d0eb742f8..48952114b 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -14,6 +14,7 @@ import NuclearTheme from './nuclear' import AmusicTheme from './amusic' import SquiddiesGlassTheme from './SquiddiesGlass' import NautilineTheme from './nautiline' +import MoonbaseTheme from './moonbase' export default { // Classic default themes @@ -30,6 +31,7 @@ export default { GruvboxDarkTheme, LigeraTheme, MonokaiTheme, + MoonbaseTheme, NautilineTheme, NordTheme, NuclearTheme, diff --git a/ui/src/themes/moonbase.css.js b/ui/src/themes/moonbase.css.js new file mode 100644 index 000000000..1d81778cc --- /dev/null +++ b/ui/src/themes/moonbase.css.js @@ -0,0 +1,63 @@ +const stylesheet = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #d4a039 +} + +.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: #d4a039; + border-color: #b8862e +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #d4a039; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #d4a039 +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #d4a039 +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #d4a039 !important +} + +.react-jinke-music-player-main .rc-slider-rail { + background-color: #2a2a27 !important +} + +.react-jinke-music-player-main .lyric-btn { + color: #e5ddd3 !important +} + +.react-jinke-music-player-main .music-player-panel { + color: #e5ddd3 !important +} + +.react-jinke-music-player-main .lyric-btn-active svg { + color: #d4a039 !important +} + +.music-player-lyric { + color: #d4a039 !important +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #d4a039 +} +.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: #d4a039 +} + +.progress-bar-content .audio-title a { + color: #e5ddd3 +} + +.MuiCheckbox-colorSecondary.Mui-checked { + color: #d4a039 !important +} +` +export default stylesheet diff --git a/ui/src/themes/moonbase.js b/ui/src/themes/moonbase.js new file mode 100644 index 000000000..4d06fef43 --- /dev/null +++ b/ui/src/themes/moonbase.js @@ -0,0 +1,96 @@ +import stylesheet from './moonbase.css.js' + +export default { + themeName: 'Moonbase', + palette: { + primary: { + main: '#d4a039', + }, + secondary: { + main: '#1e1e1c', + contrastText: '#e5ddd3', + }, + type: 'dark', + background: { + default: '#0a0a09', + }, + }, + overrides: { + MuiPaper: { + root: { + color: '#e5ddd3', + backgroundColor: '#141413', + }, + }, + MuiButton: { + textPrimary: { + color: '#d4a039', + }, + textSecondary: { + color: '#e5ddd3', + }, + }, + MuiChip: { + clickable: { + background: '#1e1e1c', + }, + }, + MuiFormGroup: { + root: { + color: '#e5ddd3', + }, + }, + MuiFormHelperText: { + root: { + Mui: { + error: { + color: '#c45c3c', + }, + }, + }, + }, + MuiTableHead: { + root: { + color: '#8a8278', + background: '#0a0a09 !important', + }, + }, + MuiTableCell: { + root: { + color: '#e5ddd3', + background: '#141413 !important', + }, + head: { + color: '#8a8278', + background: '#0a0a09 !important', + }, + }, + NDLogin: { + systemNameLink: { + color: '#d4a039', + }, + icon: {}, + welcome: { + color: '#e5ddd3', + }, + card: { + minWidth: 300, + background: '#1e1e1c', + }, + avatar: {}, + button: { + boxShadow: '3px 3px 5px #0a0a09', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(10 10 9 / 72%), rgb(20 20 19))!important', + }, + }, + }, + player: { + theme: 'dark', + stylesheet, + }, +} From 25ed12da47d2ef01a17547a73c307376c5cec6fc Mon Sep 17 00:00:00 2001 From: craiglush Date: Tue, 24 Mar 2026 15:06:07 +0000 Subject: [PATCH 2/3] Fix review comments on Moonbase theme - Fix CSS selector: use :not(.player-delete) instead of :not([class=".player-delete"]) - Fix MuiFormHelperText override structure: target error key directly - Remove empty icon: {} and avatar: {} from NDLogin overrides - Use comma-separated rgba syntax and hex for linear-gradient Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/src/themes/moonbase.css.js | 2 +- ui/src/themes/moonbase.js | 12 +++--------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/ui/src/themes/moonbase.css.js b/ui/src/themes/moonbase.css.js index 1d81778cc..580b054cc 100644 --- a/ui/src/themes/moonbase.css.js +++ b/ui/src/themes/moonbase.css.js @@ -48,7 +48,7 @@ const stylesheet = ` .audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { color: #d4a039 } -.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 { +.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg { color: #d4a039 } diff --git a/ui/src/themes/moonbase.js b/ui/src/themes/moonbase.js index 4d06fef43..c5cf75f48 100644 --- a/ui/src/themes/moonbase.js +++ b/ui/src/themes/moonbase.js @@ -41,12 +41,8 @@ export default { }, }, MuiFormHelperText: { - root: { - Mui: { - error: { - color: '#c45c3c', - }, - }, + error: { + color: '#c45c3c', }, }, MuiTableHead: { @@ -69,7 +65,6 @@ export default { systemNameLink: { color: '#d4a039', }, - icon: {}, welcome: { color: '#e5ddd3', }, @@ -77,7 +72,6 @@ export default { minWidth: 300, background: '#1e1e1c', }, - avatar: {}, button: { boxShadow: '3px 3px 5px #0a0a09', }, @@ -85,7 +79,7 @@ export default { NDMobileArtistDetails: { bgContainer: { background: - 'linear-gradient(to bottom, rgba(10 10 9 / 72%), rgb(20 20 19))!important', + 'linear-gradient(to bottom, rgba(10, 10, 9, 0.72), #141413)!important', }, }, }, From fa64ae184c73558f3fea33c4111b2d4b30bc5696 Mon Sep 17 00:00:00 2001 From: craiglush Date: Tue, 24 Mar 2026 15:31:25 +0000 Subject: [PATCH 3/3] Add Moonbase Alpha (light) and rename dark to Moonbase Bravo Split the Moonbase theme into a complementary pair: - Moonbase Alpha: warm cream/stone light theme with deep gold accents - Moonbase Bravo: the original deep charcoal dark theme Both share the same gold (#d4a039) brand accent, copper error states, and earthy neutral palette. Alpha uses darkened gold (#9a7420) for better contrast on light backgrounds. Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/src/themes/index.js | 6 +- ui/src/themes/moonbaseAlpha.css.js | 63 +++++++++++++ ui/src/themes/moonbaseAlpha.js | 90 +++++++++++++++++++ .../{moonbase.css.js => moonbaseBravo.css.js} | 0 .../themes/{moonbase.js => moonbaseBravo.js} | 4 +- 5 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 ui/src/themes/moonbaseAlpha.css.js create mode 100644 ui/src/themes/moonbaseAlpha.js rename ui/src/themes/{moonbase.css.js => moonbaseBravo.css.js} (100%) rename ui/src/themes/{moonbase.js => moonbaseBravo.js} (95%) diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index 48952114b..5c3e56f7d 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -14,7 +14,8 @@ import NuclearTheme from './nuclear' import AmusicTheme from './amusic' import SquiddiesGlassTheme from './SquiddiesGlass' import NautilineTheme from './nautiline' -import MoonbaseTheme from './moonbase' +import MoonbaseAlphaTheme from './moonbaseAlpha' +import MoonbaseBravoTheme from './moonbaseBravo' export default { // Classic default themes @@ -31,7 +32,8 @@ export default { GruvboxDarkTheme, LigeraTheme, MonokaiTheme, - MoonbaseTheme, + MoonbaseAlphaTheme, + MoonbaseBravoTheme, NautilineTheme, NordTheme, NuclearTheme, diff --git a/ui/src/themes/moonbaseAlpha.css.js b/ui/src/themes/moonbaseAlpha.css.js new file mode 100644 index 000000000..757cfc03c --- /dev/null +++ b/ui/src/themes/moonbaseAlpha.css.js @@ -0,0 +1,63 @@ +const stylesheet = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #9a7420 +} + +.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: #b8862e; + border-color: #9a7420 +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #c9b896; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #b8862e +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #9a7420 +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #9a7420 !important +} + +.react-jinke-music-player-main .rc-slider-rail { + background-color: #ddd7cc !important +} + +.react-jinke-music-player-main .lyric-btn { + color: #1a1917 !important +} + +.react-jinke-music-player-main .music-player-panel { + color: #1a1917 !important +} + +.react-jinke-music-player-main .lyric-btn-active svg { + color: #9a7420 !important +} + +.music-player-lyric { + color: #9a7420 !important +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #9a7420 +} +.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg { + color: #9a7420 +} + +.progress-bar-content .audio-title a { + color: #1a1917 +} + +.MuiCheckbox-colorSecondary.Mui-checked { + color: #b8862e !important +} +` +export default stylesheet diff --git a/ui/src/themes/moonbaseAlpha.js b/ui/src/themes/moonbaseAlpha.js new file mode 100644 index 000000000..51d8a2696 --- /dev/null +++ b/ui/src/themes/moonbaseAlpha.js @@ -0,0 +1,90 @@ +import stylesheet from './moonbaseAlpha.css.js' + +export default { + themeName: 'Moonbase - Alpha', + palette: { + primary: { + main: '#9a7420', + }, + secondary: { + main: '#ede8df', + contrastText: '#1a1917', + }, + type: 'light', + background: { + default: '#f5f0e8', + }, + }, + overrides: { + MuiPaper: { + root: { + color: '#1a1917', + backgroundColor: '#faf8f4', + }, + }, + MuiButton: { + textPrimary: { + color: '#9a7420', + }, + textSecondary: { + color: '#1a1917', + }, + }, + MuiChip: { + clickable: { + background: '#ede8df', + }, + }, + MuiFormGroup: { + root: { + color: '#1a1917', + }, + }, + MuiFormHelperText: { + error: { + color: '#b04a2e', + }, + }, + MuiTableHead: { + root: { + color: '#6b635a', + background: '#f5f0e8 !important', + }, + }, + MuiTableCell: { + root: { + color: '#1a1917', + background: '#faf8f4 !important', + }, + head: { + color: '#6b635a', + background: '#f5f0e8 !important', + }, + }, + NDLogin: { + systemNameLink: { + color: '#9a7420', + }, + welcome: { + color: '#1a1917', + }, + card: { + minWidth: 300, + background: '#faf8f4', + }, + button: { + boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.12)', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(245, 240, 232, 0.72), #faf8f4)!important', + }, + }, + }, + player: { + theme: 'light', + stylesheet, + }, +} diff --git a/ui/src/themes/moonbase.css.js b/ui/src/themes/moonbaseBravo.css.js similarity index 100% rename from ui/src/themes/moonbase.css.js rename to ui/src/themes/moonbaseBravo.css.js diff --git a/ui/src/themes/moonbase.js b/ui/src/themes/moonbaseBravo.js similarity index 95% rename from ui/src/themes/moonbase.js rename to ui/src/themes/moonbaseBravo.js index c5cf75f48..87585df29 100644 --- a/ui/src/themes/moonbase.js +++ b/ui/src/themes/moonbaseBravo.js @@ -1,7 +1,7 @@ -import stylesheet from './moonbase.css.js' +import stylesheet from './moonbaseBravo.css.js' export default { - themeName: 'Moonbase', + themeName: 'Moonbase - Bravo', palette: { primary: { main: '#d4a039',