diff --git a/assets/tailwind.css b/assets/tailwind.css
index 08764ff9..2ecc8dfe 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -22,6 +22,25 @@
     --gradient-minimized-audio-player: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%);
   }
 
+  html[data-theme='black'] {
+      color: white;
+      --color-bg: 0 0 0;
+      --color-bg-hover: 0 0 0;
+      --color-fg: 230 237 243;
+      --color-fg-muted: 120 126 132;
+      --color-primary: 0 0 0;
+      --color-secondary: 0 0 0;
+      --color-border: 55 62 65;
+      --color-bg-toggle: 0 0 0;
+      --color-bg-toggle-selected: 35 35 35;
+      --color-track-cursor: 229 231 235;
+      --color-track: 107 114 128;
+      --color-track-buffered: 75 85 99;
+      --gradient-item-page: rgb(0, 0, 0);
+      --gradient-audio-player: rgb(0, 0, 0);
+      --gradient-minimized-audio-player: rgb(0, 0, 0);
+    }
+  
   html[data-theme='light'] {
     color: black;
     --color-bg: 255 255 255;
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index b7747f2c..7684fb90 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -4,15 +4,15 @@
       <div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" />
 
       <div class="top-4 left-4 absolute cursor-pointer">
-        <span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">keyboard_arrow_down</span>
+        <span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight && theme !== 'black' }" @click="collapseFullscreen">keyboard_arrow_down</span>
       </div>
       <div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer">
-        <span class="material-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
+        <span class="material-symbols text-3xl" :class="coverBgIsLight && theme !== 'black' ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
       </div>
       <div class="top-6 right-4 absolute cursor-pointer">
-        <span class="material-symbols text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
+        <span class="material-symbols text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight && theme !== 'black' }" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
-      <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight }" style="font-size: 10px">{{ isDirectPlayMethod ? $strings.LabelPlaybackDirect : isLocalPlayMethod ? $strings.LabelPlaybackLocal : $strings.LabelPlaybackTranscode }}</p>
+      <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight && theme !== 'black' }" style="font-size: 10px">{{ isDirectPlayMethod ? $strings.LabelPlaybackDirect : isLocalPlayMethod ? $strings.LabelPlaybackLocal : $strings.LabelPlaybackTranscode }}</p>
     </div>
 
     <div v-if="playerSettings.useChapterTrack && playerSettings.useTotalTrack && showFullscreen" class="absolute total-track w-full z-30 px-6">
@@ -182,6 +182,9 @@ export default {
     }
   },
   computed: {
+    theme() {
+      return document.documentElement.dataset.theme || 'dark'
+    },
     menuItems() {
       const items = []
       // TODO: Implement on iOS
diff --git a/pages/settings.vue b/pages/settings.vue
index 660d6a6a..63357548 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -363,6 +363,10 @@ export default {
     },
     themeOptionItems() {
       return [
+        {
+          text: this.$strings.LabelThemeBlack,
+          value: 'black'
+        },
         {
           text: this.$strings.LabelThemeDark,
           value: 'dark'