feat(ui): add AMusic (Apple Music inspired) theme (#4723)

* first show at AMuisc Theme * prettier * fix Duplicate key 'MuiButton' * fix file name * Update amusic.js * Add styles for NDAlbumGridView in amusic.js * Fix MuiToolbar background property in amusic.js * Fix syntax error in amusic.js background property * run prettier * fix banded table styling and more * more styling to player - fix some appearances of green in queue - match queue styling to rest of theme - round albumart in player and prevent rotation * fix queue panel background and border to make it stand out more against the background * fix stray comma and lint+prettier * queue hover still green and player preview image not rounded properly * Update amusic.css.js * more mobile color fixes * artist page * prettier * rounded art in albumgridview * small tweaks to colors and radiuses * artist and album heading * external links colors * unify font colors + albumgrid corner radius * get rid of queue hover green * unify colors in player same red shades as primary * mobile player floating panel background shade of green * unify border colors and attempt to get album cover corner radius working * final touches * Update amusic.css.js * fix invisible button color fir muibutton Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * fix css syntax on player queue color overrides Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * remove unused MuiTableHead * sort theme list in index.js alphabetically * remove unused properties * Revert "fix css syntax on player queue color overrides" This reverts commit 503bba321d. --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2025-12-23 23:18:05 -05:00 · 2025-11-22 17:23:02 +01:00
parent f6b2ab5726
commit 2451e9e7ae
3 changed files with 288 additions and 0 deletions
--- a/ui/src/themes/amusic.css.js
+++ b/ui/src/themes/amusic.css.js
@@ -0,0 +1,89 @@
+const stylesheet = `
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: #D60017
+}
+.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: #ff4e6b
+}
+.react-jinke-music-player-main ::-webkit-scrollbar-thumb,
+.react-jinke-music-player-mobile-progress .rc-slider-handle, 
+.react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #ff4e6b
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #ff4e6b
+}
+.audio-lists-panel-content .audio-item.playing,
+.react-jinke-music-player-main .audio-item.playing svg,
+.react-jinke-music-player-main .group player-delete {
+    color: #ff4e6b
+}
+.audio-lists-panel-content .audio-item:hover,
+.audio-lists-panel-content .audio-item:hover svg
+.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: #D60017
+}
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #ff4e6b !important
+}
+.react-jinke-music-player-main .lyric-btn,
+.react-jinke-music-player-main .lyric-btn-active svg{
+    color: #ff4e6b !important
+}
+.react-jinke-music-player-main .lyric-btn-active {
+    color: #D60017 !important
+}
+.react-jinke-music-player-main .loading svg {
+    color: #ff4e6b !important
+}
+.react-jinke-music-player .music-player-controller .music-player-controller-setting{
+    background: #ff4e6b4d
+}
+.react-jinke-music-player-main .music-player-lyric{
+    color: #ff4e6b !important;
+	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
+}
+.react-jinke-music-player-main .music-player-panel,
+.react-jinke-music-player-mobile,
+.ril__outer{
+    background-color: #1f1f1f;
+	border: 1px solid #fff1;
+}
+.ril__toolbar{
+    background-color: #1d1d1d
+}
+.ril__toolbarItem{
+	font-size: 100%;
+	color: #eee
+}
+.audio-lists-panel{
+    background-color: #1f1f1f;
+	border: 1px solid #fff1;
+	border-radius: 6px 6px 0 0;
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .img-rotate,
+.react-jinke-music-player-mobile .react-jinke-music-player-mobile-cover img.cover,
+.react-jinke-music-player-mobile-cover {
+    border-radius: 6px !important;
+	animation-duration: 0s !important
+}
+.react-jinke-music-player-main .music-player-panel .panel-content .img-content{
+	width: 60px;
+	height: 60px
+}
+.react-jinke-music-player-main .songTitle{
+    color: #eee
+}
+.react-jinke-music-player .music-player-controller{
+    color: #ff4e6b
+}
+.audio-lists-panel-mobile .audio-item:not(.audio-lists-panel-sortable-highlight-bg){
+	background: unset
+}
+.lastfm-icon, 
+.musicbrainz-icon{
+	color: #eee
+}
+`
+export default stylesheet
--- a/ui/src/themes/amusic.js
+++ b/ui/src/themes/amusic.js
@@ -0,0 +1,197 @@
+import stylesheet from './amusic.css.js'
+
+export default {
+  themeName: 'AMusic',
+  typography: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, Apple Color Emoji, SF Pro, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif',
+    h6: {
+      fontSize: '1rem', // AppBar title
+    },
+    h5: {
+      fontSize: '2em',
+      fontWeight: '600',
+    },
+  },
+  palette: {
+    primary: {
+      main: '#ff4e6b',
+    },
+    secondary: {
+      main: '#D60017',
+      contrastText: '#eee',
+    },
+    background: {
+      default: '#1a1a1a',
+      paper: '#1a1a1a',
+    },
+    type: 'dark',
+  },
+  overrides: {
+    MuiFormGroup: {
+      root: {
+        color: 'white',
+      },
+    },
+    MuiAppBar: {
+      positionFixed: {
+        backgroundColor: '#1d1d1d !important',
+        boxShadow: 'none',
+        borderBottom: '1px solid #fff1',
+      },
+      colorSecondary: {
+        color: '#eee',
+      },
+    },
+    MuiDrawer: {
+      root: {
+        background: '#1d1d1d',
+        borderRight: '1px solid #fff1',
+      },
+    },
+    MuiToolbar: {
+      root: {
+        background: 'transparent !important',
+      },
+    },
+    MuiCardMedia: {
+      img: {
+        borderRadius: '10px',
+        boxShadow: '5px 5px 20px #111',
+      },
+    },
+    MuiButton: {
+      root: {
+        background: '#D60017',
+        color: '#fff',
+        borderRadius: '6px',
+        paddingRight: '0.5rem',
+        paddingLeft: '0.5rem',
+        marginLeft: '0.5rem',
+        marginBottom: '0.5rem',
+        textTransform: 'capitalize',
+        fontWeight: 600,
+      },
+      textPrimary: {
+        color: '#eee',
+      },
+      textSecondary: {
+        color: '#eee',
+        backgroundColor: '#ff4e6b',
+      },
+      textSizeSmall: {
+        fontSize: '0.8rem',
+        paddingRight: '0.5rem',
+        paddingLeft: '0.5rem',
+      },
+      label: {
+        paddingRight: '1rem',
+        paddingLeft: '0.7rem',
+      },
+    },
+    MuiListItemIcon: {
+      root: {
+        color: '#ff4e6b',
+      },
+    },
+    MuiChip: {
+      root: {
+        borderRadius: '6px',
+      },
+    },
+    MuiIconButton: {
+      root: {
+        color: '#ff4e6b',
+      },
+    },
+    MuiTableBody: {
+      root: {
+        '&>tr:nth-child(odd)': {
+          background: 'rgba(255, 255, 255, 0.025)',
+        },
+      },
+    },
+    MuiTableRow: {
+      root: {
+        background: 'transparent',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        borderBottom: '0 none !important',
+        padding: '10px !important',
+        color: '#b3b3b3 !important',
+      },
+      head: {
+        color: '#b3b3b3 !important',
+      },
+    },
+    MuiMenuItem: {
+      root: {
+        fontSize: '0.875rem',
+        borderRadius: '10px',
+        color: '#eee',
+      },
+    },
+    NDAlbumGridView: {
+      albumName: {
+        color: '#eee',
+      },
+      albumSubtitle: {
+        color: '#ccc',
+      },
+      albumPlayButton: {
+        color: '#ff4e6b !important',
+      },
+      albumArtistName: {
+        color: '#ff4e6b !important',
+      },
+      cover: {
+        borderRadius: '10px !important',
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#D60017',
+      },
+      welcome: {
+        color: '#eee',
+      },
+      card: {
+        minWidth: 300,
+        backgroundColor: '#1d1d1d',
+      },
+    },
+    MuiPaper: {
+      elevation1: {
+        boxShadow: 'none',
+      },
+      root: {
+        color: '#eee',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background: '#1a1a1a',
+      },
+      artistName: {
+        fontWeight: '600',
+        fontSize: '2em',
+      },
+    },
+    NDDesktopArtistDetails: {
+      artistName: {
+        fontWeight: '600',
+        fontSize: '2em',
+      },
+      artistDetail: {
+        padding: 'unset',
+        paddingBottom: '1rem',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -10,6 +10,7 @@ import NordTheme from './nord'
 import GruvboxDarkTheme from './gruvboxDark'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
 import NuclearTheme from './nuclear'
+import AmusicTheme from './amusic'

 export default {
  // Classic default themes
@@ -17,6 +18,7 @@ export default {
  DarkTheme,

  // New themes should be added here, in alphabetic order
+  AmusicTheme,
  CatppuccinMacchiatoTheme,
  ElectricPurpleTheme,
  ExtraDarkTheme,