feat: add a pure black theme

src/assets/base.css

@@ -22,7 +22,8 @@
 }
 
 :root,
-body[data-theme='dark'] {
+body[data-theme='dark'],
+body[date-theme='black'] {
   --color-foreground: var(--vt-c-blue);
   --color-background: var(--vt-c-black);
   --color-background-soft: var(--vt-c-black-soft);
@@ -39,6 +40,11 @@ body[data-theme='dark'] {
   --color-text: var(--vt-c-text-dark-2);
 }
 
+body[data-theme='black'] {
+  --color-background: #000;
+  --color-background-mute: #181818;
+}
+
 body[data-theme^='light'] {
   --color-foreground: cornflowerblue;
   --color-background: var(--vt-c-white);

src/components/Prefs.vue

@@ -130,6 +130,7 @@ onMounted(() => {
     @change="setTheme($event.target.value)">
     <option value="dark">{{ t('pref.dark') }}</option>
     <option value="light">{{ t('pref.light') }}</option>
+    <option value="black">{{ t('pref.black') }}</option>
     <option value="blur">{{ t('pref.blur') }}</option>
     <option value="light blur">{{ t('pref.blur_light') }}</option>
     <option value="dracula">{{ t('pref.dracula') }}</option>

src/locales/en.json

@@ -47,6 +47,7 @@
     "theme": "Theme",
     "dark": "Dark (Default)",
     "light": "Light",
+    "black": "Black",
     "blur": "Blur",
     "blur_light": "Blur (Light)",
     "dracula": "Dracula",
@@ -93,8 +94,8 @@
     "lyrics": "Lyrics"
   },
   "statusBar": {
-    "currentPlaylist": "Current Playlist", 
+    "currentPlaylist": "Current Playlist",
-    "loop": "Loop", 
+    "loop": "Loop",
     "add_current_to_playlist": "Add Current Song to a Playlist"
   },
   "general": {