chore: dunno

src/contentScripts/index.ts

@@ -11,13 +11,15 @@ import { i18n } from '~/utils/i18n'
 import { SVG_ICONS } from '~/utils/svgIcons'
 import { injectCSS } from '~/utils/main'
 import 'vue-toastification/dist/index.css'
+import { settings } from '~/logic'
 
 const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
 
 let beforeLoadedStyleEl: HTMLStyleElement
-if (localStorage.getItem('darkMode')?.toLowerCase() === 'true') {
+
+if (settings.value.theme === 'dark' || (settings.value.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
   beforeLoadedStyleEl = injectCSS(`
-  html.dark {
+  html {
     background-color: hsl(230 12% 6%);
   }
 
@@ -127,13 +129,22 @@ function injectApp() {
     styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
     shadowDOM.appendChild(styleEl)
     shadowDOM.appendChild(root)
+    container.style.opacity = '0'
+    container.style.transition = 'opacity 0.5s'
+    styleEl.onload = () => {
+      setTimeout(() => {
+        container.style.opacity = '1'
+      }, 500)
+    }
 
     const newStyleEl = document.createElement('link')
     newStyleEl.setAttribute('rel', 'stylesheet')
     newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
     document.documentElement.appendChild(newStyleEl)
     newStyleEl.onload = () => {
-      document.body.style.opacity = '1'
+      setTimeout(() => {
+        document.body.style.opacity = '1'
+      }, 500)
     }
 
     // inject svg icons

src/contentScripts/views/App.vue

@@ -24,7 +24,6 @@ const scrollbarRef = ref()
 const showTopbarMask = ref<boolean>(false)
 const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
 const topbarRef = ref()
-const mainAppOpacity = ref<number>(0)
 
 const isVideoPage = computed(() => {
   if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
@@ -90,12 +89,6 @@ watch(() => settings.value.adaptToOtherPageStyles, () => {
 })
 
 onMounted(() => {
-  nextTick(() => {
-    setTimeout(() => {
-      mainAppOpacity.value = 1
-    }, 1000)
-  })
-
   if (isHomePage()) {
     // Force overwrite Bilibili Evolved body tag & html tag background color
     document.body.style.setProperty('background-color', 'unset', 'important')
@@ -172,26 +165,22 @@ function setAppAppearance() {
     mainAppRef.value?.classList.add('dark')
     document.querySelector('#bewly')?.classList.add('dark')
     document.documentElement.classList.add('dark')
-    localStorage.setItem('darkMode', 'true')
   }
   else if (settings.value.theme === 'light') {
     mainAppRef.value?.classList.remove('dark')
     document.querySelector('#bewly')?.classList.remove('dark')
     document.documentElement.classList.remove('dark')
-    localStorage.setItem('darkMode', 'false')
   }
   else if (settings.value.theme === 'auto') {
     if (currentColorScheme) {
       mainAppRef.value?.classList.add('dark')
       document.querySelector('#bewly')?.classList.add('dark')
       document.documentElement.classList.add('dark')
-      localStorage.setItem('darkMode', 'true')
     }
     else {
       mainAppRef.value?.classList.remove('dark')
       document.querySelector('#bewly')?.classList.remove('dark')
       document.documentElement.classList.remove('dark')
-      localStorage.setItem('darkMode', 'false')
     }
   }
 }
@@ -261,7 +250,7 @@ provide('scrollbarRef', scrollbarRef)
     ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300"
     z-60
     pos="absolute top-0 left-0" w-full h-full
-    :style="{ opacity: mainAppOpacity, height: isHomePage() ? '100dvh' : '0' }"
+    :style="{ height: isHomePage() ? '100dvh' : '0' }"
   >
     <!-- Dock & RightSideButtons -->
     <div pos="absolute top-0 left-0" w-inherit h-inherit overflow-hidden>