From 0a0f1779cbe32f80606d6a94a7cc587ee9676bdd Mon Sep 17 00:00:00 2001
From: cafecitopuro <60331056+cafecitopuro@users.noreply.github.com>
Date: Tue, 24 Mar 2026 23:39:02 +0000
Subject: [PATCH] feat(ui): add Nutball theme (#4544)

* add nutball theme

* fix album grid outline

* cleanup

* Pagination fix + accent color update

* Fix animation on Activity icon

* style: fix prettier formatting in nutball theme

---------

Co-authored-by: Deluan <deluan@navidrome.org>
---
 ui/src/themes/index.js       |   2 +
 ui/src/themes/nutball.css.js | 380 +++++++++++++++++++
 ui/src/themes/nutball.js     | 684 +++++++++++++++++++++++++++++++++++
 3 files changed, 1066 insertions(+)
 create mode 100644 ui/src/themes/nutball.css.js
 create mode 100644 ui/src/themes/nutball.js

diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index d0eb742f..f6594843 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -11,6 +11,7 @@ import GruvboxDarkTheme from './gruvboxDark'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
 import DraculaTheme from './dracula'
 import NuclearTheme from './nuclear'
+import NutballTheme from './nutball'
 import AmusicTheme from './amusic'
 import SquiddiesGlassTheme from './SquiddiesGlass'
 import NautilineTheme from './nautiline'
@@ -33,6 +34,7 @@ export default {
   NautilineTheme,
   NordTheme,
   NuclearTheme,
+  NutballTheme,
   SpotifyTheme,
   SquiddiesGlassTheme,
 }
diff --git a/ui/src/themes/nutball.css.js b/ui/src/themes/nutball.css.js
new file mode 100644
index 00000000..aaf1c0e1
--- /dev/null
+++ b/ui/src/themes/nutball.css.js
@@ -0,0 +1,380 @@
+const stylesheet = `
+html { 
+    scrollbar-width: none; 
+}
+body {
+    -ms-overflow-style: none;
+    font-family: monospace;
+}
+body::-webkit-scrollbar, body::-webkit-scrollbar-button { 
+    display: none; 
+}
+.react-jinke-music-player-main .music-player-panel {
+    background-color: white!important;
+    box-shadow: none;
+    font-family: monospace;
+    color: black;
+    border-top: 1px solid black;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content div.img-content {
+    animation: none;
+    box-shadow: none;
+    border-radius: 5px;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content {
+    flex: 0 0 auto;
+    width: calc(50% - 150px);
+    margin-left: 10px;
+    padding: 0;
+}
+section.audio-main {
+    position: absolute;
+    width: calc(100% - 131px)!important;
+    bottom: 0;
+    margin-bottom: 10px;
+}
+span.audio-title {
+    margin-bottom: 20px;
+}
+span.audio-title .songTitle {
+    color: black!important;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content {
+    flex: 1;
+    margin-bottom: 20px;
+    padding-left: 0;
+}
+div.player-content > span:first-child {
+    flex: 1!important;
+    justify-content: flex-start!important;
+}
+div.player-content > span:first-child svg {
+    width: 50px;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content > .group {
+    flex: 0;
+}
+.play-sounds svg, .loop-btn svg, .audio-lists-btn svg, .destroy-btn {
+    margin-left: 0!important;
+}
+.play-sounds svg, .loop-btn svg, .audio-lists-btn svg, .destroy-btn svg {
+    width: 20px;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    padding: 0;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn .audio-lists-icon svg {
+    height: .75em;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .current-time, .react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .duration {
+    flex-basis: 0;
+}
+.progress-bar > div:nth-child(2) > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+}
+.progress-load-bar {
+	display: none;
+}
+.sound-operation > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sound-operation {
+    width: 60px;
+}
+.rc-slider {
+    border-radius: 0px;
+    border: 1px solid black;
+    padding: 3px 0!important;
+}
+.rc-slider .rc-slider-handle {
+    box-shadow: none!important;
+    border-radius: 0px;
+    background-color: black!important;
+    border: hidden!important;
+}
+.rc-slider[style*="left: 0%"] {
+	transform: translateX(0) !important;
+}
+.rc-slider .rc-slider-track {
+    display: none;
+}
+.react-jinke-music-player-main .rc-slider-rail, .react-jinke-music-player-main.light-theme .rc-slider-rail {
+    background-color: white!important;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sounds-icon {
+    margin-right: 10px;
+}
+.lyric-btn {
+    display: none!important;
+}
+button[data-testid="save-queue-button"] {
+    display: none!important;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    box-shadow: 0 0 0 0;
+    margin: 0;
+    margin-left: -8px;
+    margin-right: -5px;
+}
+.audio-lists-btn:hover span,
+.audio-lists-btn:hover svg {
+    color: #a8fe40!important;
+}
+.react-jinke-music-player-main.light-theme .audio-lists-btn {
+    background-color: white!important;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn .audio-lists-num {
+    color: grey;
+    margin-left: 5px;
+    font-size: .7rem;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .hide-panel {
+    margin-left: 2px;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .hide-panel svg {
+    stroke-width: 15px;
+    stroke: #fff;
+    height: .8em;
+}
+@media screen and (max-width: 810px) {
+    .react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sounds-icon {
+        margin-left: 5px;
+        margin-right: 0;
+    }
+    .react-jinke-music-player-main .music-player-panel .panel-content .player-content .loop-btn {
+        margin-left: 5px;
+    }
+    .play-sounds svg, .loop-btn svg, .audio-lists-btn svg, .destroy-btn {
+        margin-left: -3px!important;
+    }
+}
+.panel-content li {
+    flex-grow: 0;
+}
+.react-jinke-music-player .music-player-controller,
+.react-jinke-music-player-main.light-theme .music-player-controller {
+    border-radius: 5px;
+    box-shadow: none;
+}
+.react-jinke-music-player .music-player-controller:hover,
+.react-jinke-music-player .music-player-controller:has(+ .destroy-btn:hover) {
+    border: 1px solid black;
+}
+.react-jinke-music-player .music-player-controller .controller-title,
+.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    display: none;
+}
+.react-jinke-music-player .music-player-controller.music-player-playing:before {
+    animation: none;
+    border: none;
+}
+@media screen and (max-width:767px) {
+    .react-jinke-music-player .music-player .destroy-btn {
+        right: 0;
+    }
+    .react-jinke-music-player-main .destroy-btn svg {
+        font-size: 10px;
+    }
+}
+.react-jinke-music-player-main svg {
+    transition: none;
+}
+.react-jinke-music-player-main svg, .react-jinke-music-player-main.light-theme svg {
+    color: black;
+}
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover,
+.react-jinke-music-player-main.light-theme svg:active, .react-jinke-music-player-main.light-theme svg:hover {
+    color: #a8fe40;
+}
+.react-jinke-music-player-main .play-mode-title {
+    font-family: monospace;
+    background-color: white;
+    color: black;
+}
+.react-jinke-music-player-mobile,
+.react-jinke-music-player-main.light-theme .react-jinke-music-player-mobile {
+    font-family: monospace;
+    background-color: rgba(255, 255, 255, .9);
+    color: black!important;
+    justify-content: center;
+    padding: 50px;
+}
+.react-jinke-music-player-mobile:before {
+    content: " ";
+    display: block;
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    width: 90%;
+    height: 700px;
+    background-color: white;
+    border: 1px solid black;
+    z-index: -1;
+	border-radius: 4px;
+}
+.react-jinke-music-player-mobile-header {
+    align-items: start;
+    margin-bottom: 4rem;
+    justify-content: start;
+}
+.react-jinke-music-player-mobile-header-title {
+    text-align: left;
+    padding: 0;
+}
+.react-jinke-music-player-mobile-header-right {
+    color: black;
+}
+.react-jinke-music-player-mobile > .group {
+    flex: 0;
+}
+.react-jinke-music-player-mobile-cover,
+.react-jinke-music-player-main.light-theme .react-jinke-music-player-mobile-cover {
+    border-radius: 5px;
+    box-shadow: none;
+    animation: none;
+    border: 1px solid black;
+    margin: 0 auto 4rem auto;
+    width: auto;
+    height: auto;
+}
+.react-jinke-music-player-mobile-cover .cover {
+    animation: none;
+}
+.react-jinke-music-player-mobile-progress .current-time {
+    /* margin-right: 17px; */
+}
+.react-jinke-music-player-mobile-progress .current-time, .react-jinke-music-player-mobile-progress .duration {
+    color: black!important;
+}
+.react-jinke-music-player-mobile-progress .rc-slider {
+    height: 24px;
+}
+.react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: 2px solid black;
+    margin-top: -4px;
+    height: 24px;
+    width: 24px;
+}
+.react-jinke-music-player-mobile-toggle {
+    margin-bottom: 1rem;
+    padding: 2rem 0;
+}
+.react-jinke-music-player-mobile-operation .items .item svg {
+    color: black!important;
+    font-size: 2rem;
+    width: 2rem;
+}
+.react-jinke-music-player-mobile-operation .items .item svg:hover,
+.react-jinke-music-player-mobile-operation .items .item button:hover svg {
+    color: #a8fe40!important;
+}
+.react-jinke-music-player-mobile-operation .items .item .MuiIconButton-root:hover {
+    background-color: rgba(0, 0, 0, 0.0);
+}
+.react-jinke-music-player-mobile-operation .MuiButtonBase-root.Mui-disabled {
+    cursor: pointer;
+    pointer-events: auto;
+}
+.react-jinke-music-player-mobile-operation .items li:nth-child(5) svg {
+    font-size: 1.4rem;
+}
+.react-jinke-music-player-mobile-operation .items li:nth-child(5) svg g path:nth-child(2) {
+    stroke-width: .4px;
+}
+.react-jinke-music-player-mobile-operation .items li:nth-child(2), 
+.react-jinke-music-player-mobile-operation .items li:nth-child(3) {
+    display: none;
+}
+.react-jinke-music-player-mobile-play-model-tip {
+   display: none;
+}
+.audio-lists-panel {
+    overflow-y: scroll;
+    scrollbar-width: none;
+    border-radius: .625rem;
+    bottom: 6.25rem;
+}
+.react-jinke-music-player-main.light-theme .audio-lists-panel {
+    font-family: monospace;
+    box-shadow: none;
+    border: 1px solid black;
+}
+.react-jinke-music-player-main.light-theme .audio-lists-panel-header {
+    text-shadow: none;
+    border-bottom: 1px solid black;
+}
+.audio-lists-panel-header-line {
+    width: 0;
+}
+.audio-lists-panel-header-close-btn:hover svg {
+    animation: none;
+}
+.audio-lists-panel-content .audio-item,
+.react-jinke-music-player-main.light-theme .audio-item {
+    border-radius: 0px;
+    margin: 0;
+    border-bottom: none;
+    box-shadow: none;
+    transition: none;
+}
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-lists-panel-content .audio-item:nth-child(2n+1) {
+    background-color: white!important;
+}
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-lists-panel-content .audio-item:nth-child(2n+1):hover {
+    background-color: #fafafa!important;
+}
+.audio-lists-panel-content .audio-item .player-singer {
+    width: unset;
+    padding-right: 20px;
+}
+.audio-lists-panel-content .audio-item .player-delete:hover svg {
+    color: #a8fe40!important;
+    animation: none;
+}
+.react-jinke-music-player-main .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, 
+.react-jinke-music-player-main .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg,
+.react-jinke-music-player-main.light-theme .audio-item:active svg, 
+.react-jinke-music-player-main.light-theme .audio-item:hover svg {
+    color: black;
+}
+.audio-lists-panel-content .audio-item .player-delete {
+    justify-content: center;
+    width: 25px;
+}
+.audio-lists-panel-content .audio-item .player-delete svg {
+    font-size: 20px;
+}
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing svg {
+    color: #a8fe40!important;
+}
+.audio-lists-panel-content .audio-item .player-name,
+.audio-lists-panel-content .audio-item .player-singer,
+.react-jinke-music-player-main.light-theme .audio-item.playing .player-singer,
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing .player-delete svg {
+    color: black!important;
+}
+.audio-lists-panel-mobile {
+    height: 750px !important;
+    top: calc(100vh / 2 - 375px) !important; 
+    width: 91% !important;
+    margin: 0 auto;
+} 
+.audio-lists-panel-mobile .audio-lists-panel-content {
+    height: auto!important;
+}
+.audio-lists-panel-content {
+    scrollbar-width: none;
+}
+@keyframes fromOut {
+  0% {
+    transform:scale(1) translateZ(0)
+  }
+  to {
+    transform:scale(1) translate3d(0,150%,0);
+  }
+}
+`
+export default stylesheet
diff --git a/ui/src/themes/nutball.js b/ui/src/themes/nutball.js
new file mode 100644
index 00000000..f43250f5
--- /dev/null
+++ b/ui/src/themes/nutball.js
@@ -0,0 +1,684 @@
+import stylesheet from './nutball.css.js'
+
+export default {
+  themeName: 'Nutball',
+  palette: {
+    primary: {
+      main: '#80ea00',
+      light: '#fff',
+    },
+    secondary: {
+      main: '#80ea00',
+      contrastText: '#fff',
+    },
+  },
+  typography: {
+    fontFamily: 'monospace',
+    h6: {
+      fontSize: '1rem',
+    },
+    h4: {
+      fontSize: '1.2rem',
+    },
+    h1: {
+      fontSize: '1.4rem',
+    },
+    body: {
+      fontFamily: 'monospace',
+    },
+  },
+  overrides: {
+    MuiAppBar: {
+      root: {
+        borderBottom: '1px solid black',
+      },
+      colorSecondary: {
+        color: 'black',
+        backgroundColor: 'white',
+      },
+    },
+    MuiPaper: {
+      elevation1: {
+        boxShadow: 'none',
+      },
+      elevation4: {
+        boxShadow: 'none',
+      },
+      elevation6: {
+        boxShadow: 'none',
+      },
+      elevation8: {
+        boxShadow: 'none',
+        border: '1px solid black',
+      },
+      elevation16: {
+        boxShadow: 'none',
+        borderRight: '1px solid grey!important',
+      },
+      elevation24: {
+        boxShadow: 'none',
+        border: '1px solid black',
+      },
+    },
+    MuiButton: {
+      root: {
+        color: '#80ea00',
+        border: '1px solid rgba(0, 0, 0, 0.23)',
+        transition: 'none',
+        '&[aria-label="Grid"]': {
+          width: '50%',
+          marginLeft: '15px',
+          marginRight: '2px',
+          marginBottom: '10px',
+          '& .MuiButton-label': {
+            justifyContent: 'center',
+          },
+        },
+        '&[aria-label="Table"]': {
+          width: '50%',
+          marginRight: '15px',
+          marginLeft: '2px',
+          marginBottom: '10px',
+          '& .MuiButton-label': {
+            justifyContent: 'center',
+          },
+        },
+      },
+      textPrimary: {
+        color: 'rgba(0,0,0,.57)',
+        '&:hover': {
+          borderColor: 'black',
+          backgroundColor: '#eaeaea',
+        },
+        '&[aria-label="Grid"]': {
+          color: 'black',
+          borderColor: 'black!important',
+        },
+        '&[aria-label="Table"]': {
+          color: 'black',
+          borderColor: 'black!important',
+        },
+      },
+      textSecondary: {
+        color: 'rgba(0,0,0,.57)',
+        '&:hover': {
+          borderColor: 'black',
+          backgroundColor: '#eaeaea',
+        },
+        '&[aria-label="Grid"]': {
+          color: 'grey',
+          borderColor: 'grey!important',
+        },
+        '&[aria-label="Table"]': {
+          color: 'grey',
+          borderColor: 'grey!important',
+        },
+      },
+      label: {
+        '& svg': {
+          display: 'none',
+        },
+        '& span': {
+          paddingLeft: '0',
+        },
+      },
+      contained: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none',
+        },
+      },
+    },
+    MuiButtonGroup: {
+      groupedTextHorizontal: {
+        justifyContent: 'flex-start',
+        margin: '0 .5rem',
+        '& button': {
+          width: '25%',
+        },
+      },
+      groupedTextPrimary: {
+        '&:not(:last-child)': {
+          border: 'none',
+        },
+      },
+    },
+    MuiIconButton: {
+      root: {
+        '&[aria-label="Settings"]': {
+          padding: '12px!important',
+          marginRight: '-9px!important',
+        },
+      },
+    },
+    MuiSwitch: {
+      thumb: {
+        color: '#eaeaea',
+        boxShadow: 'none',
+        borderRadius: '0',
+      },
+      track: {
+        borderRadius: '0',
+      },
+      switchBase: {
+        color: '#eaeaea',
+      },
+    },
+    MuiCheckbox: {
+      root: {
+        '& svg': {
+          width: '.8em',
+        },
+      },
+    },
+    PrivateSwitchBase: {
+      root: {
+        padding: '8px 8px',
+      },
+    },
+    RaButton: {
+      button: {
+        marginRight: '10px',
+        lineHeight: 'normal',
+      },
+    },
+    MuiMenu: {
+      list: {
+        '& p': {
+          fontSize: '.85rem',
+        },
+        '& p:first-of-type': {
+          margin: '6px 1rem',
+        },
+        '& li:has(span.MuiCheckbox-root)': {
+          marginLeft: '-10px',
+        },
+        '& span.MuiCheckbox-root .MuiSvgIcon-root': {
+          width: '.75em',
+        },
+      },
+    },
+    MuiMenuItem: {
+      root: {
+        fontSize: '.85rem',
+        minHeight: 'inherit',
+        '&[aria-label="Clear value"]:before': {
+          display: 'block',
+          content: "'(any)'",
+        },
+      },
+    },
+    MuiListItem: {
+      button: {
+        '& span.MuiCheckbox-root': {
+          padding: '0px 8px',
+        },
+      },
+    },
+    MuiTooltip: {
+      tooltip: {
+        backgroundColor: 'rgb(117 117 117)',
+      },
+    },
+    MuiCircularProgress: {
+      root: {
+        color: '#80ea00!important',
+      },
+    },
+    MuiAvatar: {
+      img: {
+        borderRadius: '5px',
+      },
+    },
+    MuiFab: {
+      root: {
+        boxShadow: 'none',
+      },
+    },
+    MuiTableHead: {
+      root: {
+        boxShadow: 'none!important',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        borderBottom: 'none',
+      },
+      sizeSmall: {
+        '&:last-child': {
+          textAlign: 'right',
+        },
+        '&:last-child:is(th)': {
+          paddingRight: '45px',
+        },
+      },
+    },
+    MuiTablePagination: {
+      root: {
+        fontSize: '.6rem',
+      },
+      caption: {
+        fontSize: '.6rem',
+      },
+      menuItem: {
+        fontSize: '.6rem',
+      },
+    },
+    MuiTabs: {
+      root: {
+        marginBottom: '1rem',
+      },
+    },
+    MuiToolbar: {
+      gutters: {
+        '@media (min-width: 600px)': {
+          paddingLeft: '16px',
+        },
+      },
+    },
+    RaListToolbar: {
+      toolbar: {
+        alignItems: 'start',
+        '& form:has(> div:nth-child(3))': {
+          paddingBottom: '.6rem',
+        },
+      },
+      actions: {
+        paddingRight: '0!important',
+        marginTop: '-8px',
+        textWrap: 'nowrap',
+        '@media (max-width: 599.95px)': {
+          marginTop: '3px',
+        },
+        '& .MuiButton-text': {
+          height: '2.5rem',
+          padding: '7px 10px',
+          marginRight: '0',
+        },
+      },
+    },
+    RaTopToolbar: {
+      root: {
+        '& div:first-of-type > div:first-of-type': {
+          display: 'flex',
+          flexWrap: 'wrap',
+          rowGap: '10px',
+        },
+        '& div:first-of-type > div:first-of-type button': {
+          height: '2rem',
+        },
+        '& div:first-of-type > div:first-of-type .MuiIconButton-root': {
+          padding: '0',
+          marginRight: '2rem',
+        },
+        '& div:first-of-type > div:nth-of-type(2)': {
+          height: '2rem',
+        },
+      },
+    },
+    RaToolbar: {
+      toolbar: {
+        backgroundColor: 'white',
+      },
+    },
+    RaFilterButton: {
+      root: {
+        textWrap: 'nowrap',
+        '& button': {
+          '@media (max-width: 599.95px)': {
+            padding: '12px',
+          },
+        },
+        "&[resource*='song']": {
+          marginLeft: '10px',
+        },
+      },
+    },
+    RaDeleteWithUndoButton: {
+      deleteButton: {
+        color: 'rgba(0,0,0,.57)',
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        },
+      },
+    },
+    RaAutocompleteSuggestionList: {
+      suggestionsContainer: {
+        borderRadius: '4px',
+        outline: '1px solid black',
+        backgroundColor: 'white',
+      },
+    },
+    RaEmpty: {
+      message: {
+        marginTop: '3rem',
+      },
+      icon: {
+        display: 'none',
+      },
+    },
+    RaAutocompleteArrayInput: {
+      chipContainerOutlined: {
+        '&:empty': {
+          margin: '0',
+        },
+        margin: '10px 0',
+      },
+      chip: {
+        margin: '4px 4px 4px 0!important',
+      },
+      inputInput: {
+        flexGrow: '0',
+        '& #genre_id': {
+          flexGrow: '0',
+        },
+      },
+    },
+    RaLayout: {
+      content: {
+        width: '100%',
+      },
+    },
+    RaDatagrid: {
+      headerCell: {
+        fontWeight: 'bold',
+      },
+    },
+    NDAlbumShow: {
+      albumActions: {
+        padding: '0',
+        alignItems: 'center',
+        margin: '1rem 0',
+      },
+    },
+    MuiCardContent: {
+      root: {
+        fontFamily: 'monospace',
+        fontSize: '.8rem',
+        '& #now-playing-title': {
+          fontSize: '.8rem',
+        },
+        '&:last-child': {
+          paddingBottom: '16px',
+        },
+        '&[class*="makeStyles-usernameWrap-"]': {
+          paddingBottom: '16px',
+        },
+      },
+    },
+    MuiDialogContent: {
+      root: {
+        '& .MuiTableCell-sizeSmall:last-child': {
+          textAlign: 'left',
+        },
+      },
+    },
+    MuiGridList: {
+      root: {
+        '&:empty': {
+          display: 'none',
+        },
+        backgroundColor: 'white',
+        borderRadius: '4px',
+      },
+    },
+    MuiGridListTile: {
+      root: {
+        '@media (max-width: 599.95px)': {
+          padding: '7px!important',
+        },
+      },
+      tile: {
+        '& img': {
+          borderRadius: '5px',
+        },
+      },
+    },
+    NDAlbumGridView: {
+      root: {
+        '&:has(.MuiGridList-root:empty)': {
+          display: 'none',
+        },
+      },
+      albumContainer: {
+        border: '1px solid white',
+        borderRadius: '5px',
+        '& a:hover img': {
+          outline: '1px solid black',
+        },
+        '& a:hover > div:nth-of-type(2)': {
+          border: 'none',
+          outline: '1px solid black',
+        },
+      },
+      albumLink: {
+        paddingRight: '6px',
+      },
+      albumSubtitle: {
+        fontFamily: 'monospace',
+      },
+      tileBar: {
+        transition: 'all 50ms ease-out',
+      },
+      tileBarMobile: {
+        transition: 'all 50ms ease-out',
+        borderLeft: '1px solid black',
+        borderRight: '1px solid black',
+        borderBottom: '1px solid black',
+      },
+    },
+    MuiGridListTileBar: {
+      root: {
+        height: '30px!important',
+        background: 'white!important',
+        borderTop: '1px solid black',
+        borderBottom: '1px solid black',
+        borderRadius: '0 0 5px 5px',
+      },
+      titleWrap: {
+        marginLeft: '0px',
+      },
+      titlePositionBottom: {
+        bottom: '0',
+      },
+      subtitle: {
+        '& button': {
+          color: 'black!important',
+        },
+      },
+      actionIcon: {
+        '& button': {
+          color: 'black!important',
+        },
+      },
+    },
+    RaFilter: {
+      form: {
+        width: '100%',
+        '& div.filter-field:first-child': {
+          flex: '1 100%',
+          '& [class*="RaSearchInput-input-"]': {
+            width: '100%',
+          },
+        },
+      },
+    },
+    MuiInputAdornment: {
+      positionEnd: {
+        justifyContent: 'flex-end',
+      },
+    },
+    RaFilterFormInput: {
+      body: {
+        '& label': {
+          transform: 'translate(14px, -6px) scale(0.75)!important',
+          backgroundColor: '#fafafa',
+          padding: '0 5px',
+        },
+      },
+      hideButton: {
+        order: '1',
+        marginLeft: '2px',
+        top: '-7px',
+        padding: '8px',
+      },
+      spacer: {
+        order: '2',
+      },
+    },
+    RaPaginationActions: {
+      actions: {
+        '& button': {
+          border: 'none',
+          fontSize: '.6rem',
+        },
+      },
+    },
+    NDAlbumDetails: {
+      cover: {
+        borderRadius: '5px',
+      },
+      content: {
+        padding: '0',
+        marginLeft: '1rem',
+      },
+      externalLinks: {
+        marginTop: '5px',
+      },
+      notes: {
+        display: 'none',
+      },
+      root: {
+        '& p': {
+          fontSize: '.7rem',
+          backgroundColor: '#e0e0e0',
+          borderRadius: '10px',
+          width: 'fit-content',
+          padding: '2px 7px',
+        },
+      },
+    },
+    NDPlaylistDetails: {
+      cover: {
+        borderRadius: '5px',
+      },
+    },
+    NDDesktopArtistDetails: {
+      cover: {
+        borderRadius: '0px',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgb(255 255 255 / 51%), rgb(250 250 250))!important',
+      },
+    },
+    NDArtistShow: {
+      actionsContainer: {
+        '& button': {
+          padding: '4px 5px',
+          fontSize: '0.8125rem',
+          height: '2rem',
+        },
+      },
+    },
+    NDAudioPlayer: {
+      audioTitle: {
+        color: 'black',
+      },
+    },
+    NDLogin: {
+      main: {
+        background: 'white',
+        '& .MuiFormLabel-root': {
+          color: '#000',
+        },
+        '& .MuiFormLabel-root.Mui-error': {
+          color: '#000',
+        },
+        '& .MuiInput-underline:before': {
+          borderBottom: 'none',
+        },
+        '& .MuiInput-underline:after': {
+          borderBottom: 'none',
+        },
+        '& .MuiFormHelperText-root.Mui-error': {
+          color: '#000',
+          paddingLeft: '10px',
+        },
+        '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
+          borderBottom: 'none',
+        },
+      },
+      card: {
+        minWidth: 300,
+        marginTop: '6em',
+        backgroundColor: '#ffffffe6',
+        border: '1px solid black',
+      },
+      avatar: {
+        marginTop: '1rem',
+        '& img': {
+          filter: 'invert(1)',
+        },
+      },
+      icon: {},
+      input: {
+        '& .MuiInput-root': {
+          border: '1px solid black',
+          borderRadius: '4px',
+          padding: '10px',
+        },
+        '& .MuiInputLabel-root': {
+          padding: '10px',
+        },
+        '& .MuiInputLabel-shrink': {
+          transform: 'translate(0, -5.5px) scale(0.75)',
+        },
+      },
+      actions: {
+        marginTop: '2rem',
+      },
+      button: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: 'rgb(117, 177, 44)',
+        },
+      },
+      systemNameLink: {
+        fontFamily: 'monospace',
+        marginBottom: '1rem',
+        color: 'black',
+        '&:before': {
+          content: "'Welcome to '",
+        },
+        '&:after': {
+          content: "' *~*!'",
+        },
+      },
+    },
+    MuiCssBaseline: {
+      '@global': {
+        '*::-webkit-scrollbar': {
+          display: 'none',
+        },
+      },
+    },
+    MuiBackdrop: {
+      root: {
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      },
+    },
+    RaLoading: {
+      message: {
+        fontFamily: 'monospace',
+      },
+    },
+  },
+  player: {
+    theme: 'light',
+    stylesheet,
+  },
+}