diff --git a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/local-playlist-details-modal.component.tsx b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/local-playlist-details-modal.component.tsx
index c512456d..5fd6ccaa 100644
--- a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/local-playlist-details-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/local-playlist-details-modal.component.tsx
@@ -90,7 +90,7 @@ export const LocalPlaylistDetailsModal: ModalComponent<void, Props> = ({resolver
             return (
                 <div className="grow flex justify-center items-center flex-col">
                     <BsmImage image={BeatConflict} className="size-28"/>
-                    <div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
+                    <div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
                         <p>{t("playlist.playlist-contain-no-maps")}</p>
                     </div>
                 </div>
@@ -101,7 +101,7 @@ export const LocalPlaylistDetailsModal: ModalComponent<void, Props> = ({resolver
             return (
                 <div className="grow flex justify-center items-center flex-col">
                     <BsmImage image={BeatConflict} className="size-28"/>
-                    <div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
+                    <div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
                         <p>{t("playlist.no-map-installed-for-playlist")}</p>
                         <BsmButton withBar={false} onClick={installPlaylist} className="rounded-md h-8 flex items-center justify-center px-4" typeColor="primary" text="playlist.download-maps"/>
                     </div>
@@ -113,7 +113,7 @@ export const LocalPlaylistDetailsModal: ModalComponent<void, Props> = ({resolver
             return (
                 <div className="grow flex justify-center items-center flex-col">
                     <BsmImage image={BeatConflict} className="size-28"/>
-                    <div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
+                    <div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
                         <p>{t("playlist.playlist-is-waiting-to-download")}</p>
                     </div>
                 </div>
diff --git a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx
index b72c0921..49764418 100644
--- a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx
+++ b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-details-template.component.tsx
@@ -46,7 +46,7 @@ export function PlaylistDetailsTemplate({title, imagebase64, imageUrl, author, d
     })();
 
     return (
-        <div className="flex flex-col w-screen max-w-2xl h-screen max-h-[calc(100vh-1.25rem)] translate-y-2.5 bg-main-color-1 rounded-t-lg overflow-hidden">
+        <div className="flex flex-col w-screen max-w-2xl h-screen max-h-[calc(100vh-1.25rem)] translate-y-2.5 bg-theme-1 rounded-t-lg overflow-hidden">
             <header className="shrink-0 relative h-36 overflow-hidden flex flex-row p-3">
                 <button className="absolute top-2 right-2 z-[1]" onClickCapture={onClose}>
                     <CrossIcon className="size-3.5 text-gray-200"/>
diff --git a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-header-state.component.tsx b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-header-state.component.tsx
index 4cb4ebfd..19a5d236 100644
--- a/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-header-state.component.tsx
+++ b/src/renderer/components/modal/modal-types/playlist/playlist-details-modal/playlist-header-state.component.tsx
@@ -27,7 +27,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
             return (
                 <>
                     <BsmImage image={BeatConflict} className="size-24"/>
-                    <div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
+                    <div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
                         <p>{t("playlist.playlist-is-downloading")}</p>
                     </div>
                 </>
@@ -38,7 +38,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
             return (
                 <>
                     <BsmImage image={BeatConflict} className="size-24"/>
-                    <div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
+                    <div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
                         <p>{t("playlist.playlist-is-waiting-to-download")}</p>
                     </div>
                 </>
@@ -48,7 +48,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
         return  (
             <>
                 <BsmImage image={BeatConflict} className="size-24"/>
-                <div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
+                <div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
                     <p>{t("playlist.some-playlist-maps-are-missing")}</p>
                     <BsmButton withBar={false} onClick={installPlaylist} className="rounded-md h-8 flex items-center justify-center px-4" typeColor="primary" text="playlist.download-missing-maps"/>
                 </div>
@@ -65,7 +65,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
                 transition={{delay: .25, duration: .25}}
                 className="shrink-0 w-full text-center overflow-hidden flex justify-center items-center"
             >
-                <div className="size-[calc(100%-1rem)] bg-main-color-2 rounded-md translate-y-1.5 flex flex-row justify-center items-center gap-3">
+                <div className="size-[calc(100%-1rem)] bg-theme-2 rounded-md translate-y-1.5 flex flex-row justify-center items-center gap-3 ">
                     {renderHeaderContent()}
                 </div>
             </motion.div>}