From 86f929499e1879d2c0775c4af9b79560e9e300fc Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Wed, 3 Dec 2025 14:36:47 -0500
Subject: [PATCH] fix(ui): improve playlist bulk action button contrast on dark
 themes

The bulk action buttons (Make Public, Make Private, Delete) on the playlists list were displaying with poor text contrast when using dark themes like AMusic. The buttons had pinkish text (theme's primary color) on a dark red background, making them difficult to read.

This fix applies the same styling pattern used for song bulk actions by adding a makeStyles hook that sets white text color for dark themes. This ensures proper contrast between the button text and background while maintaining correct styling on light themes.

Tested on AMusic (dark) and Light themes to verify contrast improvement and backward compatibility.

Signed-off-by: Deluan <deluan@navidrome.org>
---
 ui/src/playlist/PlaylistList.jsx | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/ui/src/playlist/PlaylistList.jsx b/ui/src/playlist/PlaylistList.jsx
index 920b3ebe..c1856675 100644
--- a/ui/src/playlist/PlaylistList.jsx
+++ b/ui/src/playlist/PlaylistList.jsx
@@ -16,6 +16,7 @@ import {
   usePermissions,
 } from 'react-admin'
 import Switch from '@material-ui/core/Switch'
+import { makeStyles } from '@material-ui/core/styles'
 import { useMediaQuery } from '@material-ui/core'
 import {
   DurationField,
@@ -28,6 +29,12 @@ import {
 import PlaylistListActions from './PlaylistListActions'
 import ChangePublicStatusButton from './ChangePublicStatusButton'
 
+const useStyles = makeStyles((theme) => ({
+  button: {
+    color: theme.palette.type === 'dark' ? 'white' : undefined,
+  },
+}))
+
 const PlaylistFilter = (props) => {
   const { permissions } = usePermissions()
   return (
@@ -112,13 +119,24 @@ const ToggleAutoImport = ({ resource, source }) => {
   ) : null
 }
 
-const PlaylistListBulkActions = (props) => (
-  <>
-    <ChangePublicStatusButton public={true} {...props} />
-    <ChangePublicStatusButton public={false} {...props} />
-    <BulkDeleteButton {...props} />
-  </>
-)
+const PlaylistListBulkActions = (props) => {
+  const classes = useStyles()
+  return (
+    <>
+      <ChangePublicStatusButton
+        public={true}
+        {...props}
+        className={classes.button}
+      />
+      <ChangePublicStatusButton
+        public={false}
+        {...props}
+        className={classes.button}
+      />
+      <BulkDeleteButton {...props} className={classes.button} />
+    </>
+  )
+}
 
 const PlaylistList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))