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) <noreply@anthropic.com>
This commit is contained in:
craiglush 2026-03-24 14:43:50 +00:00
parent 356b0716b6
commit 1bb05f1d3a
3 changed files with 161 additions and 0 deletions

View File

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

View File

@ -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

96
ui/src/themes/moonbase.js Normal file
View File

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