fix(ui): Gruvbox Dark colors (#5553)

* Add Gruvbox Dark theme

Add Gruvbox Dark color theme including:
- gruvboxDark.js with full palette and component overrides
- gruvboxDark.css.js with custom player styles

* Fix: move error state to MuiFormHelperText

ui/src/themes/gruvboxDark.css.js

@@ -5,7 +5,7 @@ const stylesheet = `
 }
 
 .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: #458588
+    background-color: #ebdbb2
 }
 
 .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
@@ -50,6 +50,13 @@ const stylesheet = `
 .MuiCheckbox-colorSecondary.Mui-checked {
     color: #458588 !important
 }
+.react-jinke-music-player-main .music-player-panel svg {
+    color: #ebdbb2;
+    fill: #ebdbb2;
+}
+.react-jinke-music-player-main .music-player-panel button {
+    color: #ebdbb2;
+}
 `
 
 export default stylesheet

ui/src/themes/gruvboxDark.js

@@ -14,22 +14,34 @@ export default {
     background: {
       default: '#282828',
     },
+    text: {
+      primary: '#ebdbb2',
+      secondary: '#a89984',
+    },
   },
   overrides: {
     MuiPaper: {
       root: {
         color: '#ebdbb2',
         backgroundColor: '#3c3836',
-        MuiSnackbarContent: {
+      },
-          root: {
+    },
-            color: '#ebdbb2',
+    MuiSnackbarContent: {
-            backgroundColor: '#cc241d',
+      root: {
-          },
+        color: '#3c3836',
-          message: {
+        backgroundColor: '#a89984',
-            color: '#ebdbb2',
+      },
-            backgroundColor: '#cc241d',
+      message: {
-          },
+        color: '#3c3836',
-        },
+        backgroundColor: '#a89984',
+      },
+    },
+    MuiTypography: {
+      root: {
+        color: '#ebdbb2',
+      },
+      colorTextSecondary: {
+        color: '#a89984',
       },
     },
     MuiButton: {
@@ -45,6 +57,19 @@ export default {
         color: '#ebdbb2',
       },
     },
+    MuiListItemIcon: {
+      root: {
+        color: '#ebdbb2',
+      },
+    },
+    MuiListItemText: {
+      primary: {
+        color: '#ebdbb2',
+      },
+      secondary: {
+        color: '#a89984',
+      },
+    },
     MuiChip: {
       clickable: {
         background: '#49483e',
@@ -57,11 +82,10 @@ export default {
     },
     MuiFormHelperText: {
       root: {
-        Mui: {
+        color: '#ebdbb2',
-          error: {
+      },
-            color: '#cc241d',
+      error: {
-          },
+        color: '#cc241d',
-        },
       },
     },
     MuiTableHead: {
@@ -113,6 +137,17 @@ export default {
           'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important',
       },
     },
+    NDAlbumGridView: {
+      albumName: {
+        marginTop: '0.5rem',
+        fontWeight: 700,
+        textTransform: 'none',
+        color: '#ebdbb2',
+      },
+      albumSubtitle: {
+        color: '#a89984',
+      },
+    },
   },
   player: {
     theme: 'dark',