feat(backdrop): use theme background color for overlay

components/Backdrop.vue

@@ -1,12 +1,7 @@
 <template>
-  <div class="backdrop">
+  <div v-if="blurhash" class="backdrop">
     <v-fade-transition>
-      <blurhash-canvas
-        v-if="blurhash"
-        :hash="blurhash"
-        :width="32"
-        :height="18"
-      />
+      <blurhash-canvas :hash="blurhash" :width="32" :height="18" />
     </v-fade-transition>
   </div>
 </template>
@@ -44,7 +39,8 @@ export default Vue.extend({
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: var(--v-background-base);
+    opacity: 0.75;
   }
 }
 </style>

layouts/default.vue

@@ -143,3 +143,9 @@ export default Vue.extend({
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.v-application {
+  background-color: var(--v-background-base) !important;
+}
+</style>

nuxt.config.ts

@@ -199,7 +199,8 @@ const config: NuxtConfig = {
           info: '#2196F3',
           warning: '#FB8C00',
           error: '#FF5252',
-          success: '#4CAF50'
+          success: '#4CAF50',
+          background: '#101010'
         },
         light: {
           primary: '#00A4DC',
@@ -208,7 +209,8 @@ const config: NuxtConfig = {
           info: '#2196F3',
           warning: '#FB8C00',
           error: '#FF5252',
-          success: '#4CAF50'
+          success: '#4CAF50',
+          background: '#f2f2f2'
         }
       },
       options: {