From 2451e9e7aeca3040ce463c86351352b61121ca6f Mon Sep 17 00:00:00 2001
From: Stephan Wahlen <44159957+metalheim@users.noreply.github.com>
Date: Sat, 22 Nov 2025 17:23:02 +0100
Subject: [PATCH] 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 503bba321d958aed5251667c58214822ceb70f59.

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 ui/src/themes/amusic.css.js |  89 ++++++++++++++++
 ui/src/themes/amusic.js     | 197 ++++++++++++++++++++++++++++++++++++
 ui/src/themes/index.js      |   2 +
 3 files changed, 288 insertions(+)
 create mode 100644 ui/src/themes/amusic.css.js
 create mode 100644 ui/src/themes/amusic.js

diff --git a/ui/src/themes/amusic.css.js b/ui/src/themes/amusic.css.js
new file mode 100644
index 00000000..05709dc1
--- /dev/null
+++ 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
diff --git a/ui/src/themes/amusic.js b/ui/src/themes/amusic.js
new file mode 100644
index 00000000..598b7b7f
--- /dev/null
+++ 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,
+  },
+}
diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 0234d416..ea4a2472 100644
--- 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,