From 75a45734b1741f5fd771178d0b3a8fb0a2d7a35b 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 920b3ebe5..c1856675b 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'))