1

docs/.vitepress/theme/components/VideoBackground.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, computed } from 'vue'
 import { useSettingsStore } from '../stores/settings'
 import { getVideoUrl } from '../utils'
 
@@ -7,6 +7,8 @@ const settingsStore = useSettingsStore()
 const videoRef = ref<HTMLVideoElement | null>(null)
 const isLoading = ref(true)
 
+const brightness = computed(() => settingsStore.theme.videoBrightness ?? 0.3)
+
 onMounted(async () => {
   await settingsStore.fetchVideoList()
 })
@@ -46,7 +48,7 @@ function onVideoCanPlay() {
         type="video/mp4"
       />
     </video>
-    <div class="video-overlay"></div>
+    <div class="video-overlay" :style="{ background: 'rgba(0, 0, 0, ' + brightness + ')' }"></div>
   </div>
 </template>