fix: some bug that i dunno know to describe

src/contentScripts/index.ts

@@ -23,45 +23,42 @@ import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
     || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)
     || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
   ) {
-    // if the current homepage is an old version, redirect to the new version
-    // because they had some style errors in the old version
-    // if (`${getCookie('i-wanna-go-back')}` === '2') {
-    //   setCookie('i-wanna-go-back', '-1', 1)
-    //   location.reload()
-    // }
-
     const originalPageContent = document.querySelector('#i_cecream')
     if (originalPageContent)
       originalPageContent.innerHTML = ''
 
-    // const container = document.createElement('div')
-    // const root = document.createElement('div')
-    // const styleEl = document.createElement('link')
-    // styleEl.setAttribute('rel', 'stylesheet')
-    // styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
-    // container.id = 'bewly'
-    // container.appendChild(styleEl)
-    // container.appendChild(root)
-    // document.body.appendChild(container)
+    if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)) {
+      const container = document.createElement('div')
+      const root = document.createElement('div')
+      const styleEl = document.createElement('link')
+      styleEl.setAttribute('rel', 'stylesheet')
+      styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
+      container.id = 'bewly'
+      container.appendChild(styleEl)
+      container.appendChild(root)
+      document.body.appendChild(container)
+  
+      const app = createApp(App)
+      setupApp(app)
+      app.use(i18n).mount(root)
+    }
+    else {
+      // mount component to context window
+      const container = document.createElement('div')
+      container.id = 'bewly'
+      const root = document.createElement('div')
+      const styleEl = document.createElement('link')
+      const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
+      styleEl.setAttribute('rel', 'stylesheet')
+      styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
+      shadowDOM.appendChild(styleEl)
+      shadowDOM.appendChild(root)
+      document.body.appendChild(container)
+      const app = createApp(App)
+      setupApp(app)
+      app.use(i18n).mount(root)
+    }
 
-    // const app = createApp(App)
-    // setupApp(app)
-    // app.use(i18n).mount(root)
-
-    // mount component to context window
-    const container = document.createElement('div')
-    container.id = 'bewly'
-    const root = document.createElement('div')
-    const styleEl = document.createElement('link')
-    const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
-    styleEl.setAttribute('rel', 'stylesheet')
-    styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
-    shadowDOM.appendChild(styleEl)
-    shadowDOM.appendChild(root)
-    document.body.appendChild(container)
-    const app = createApp(App)
-    setupApp(app)
-    app.use(i18n).mount(root)
 
     // inject svg icons
     const svgDiv = document.createElement('div')

src/contentScripts/views/App.vue

@@ -16,10 +16,23 @@ import { AppPage, LanguageType } from '~/enums/appEnums'
 
 const { locale } = useI18n()
 const [showSettings, toggle] = useToggle(false)
-const isDark = useDark({ selector: '#bewly' })
+const isDark = useDark({
+  // selector: '#bewly',
+  onChanged: (isDark: boolean) => {
+    if (isDark) {
+      document.querySelector('html')?.classList.add('dark')
+      document.querySelector('#bewly')?.classList.add('dark')
+    }
+    else {
+      document.querySelector('html')?.classList.remove('dark')
+      document.querySelector('#bewly')?.classList.remove('dark')
+    }
+  },
+})
 const toggleDark = useToggle(isDark)
 const pages = { Home, Search, Anime, History, Favorites, Video }
 const isVideoPage = ref<boolean>(false)
+const mainApp = ref<HTMLElement>()
 
 watch(
   () => activatedPage.value,
@@ -28,6 +41,12 @@ watch(
   },
 )
 
+// Watch for changes in the 'isDark' variable and add the 'dark' class to the 'mainApp' element
+// to prevent some Unocss dark-specific styles from failing to take effect
+watch(() => isDark.value, (newValue, oldValue) => {
+  setAppAppearance()
+})
+
 onUpdated(() => {
   setAppLanguage()
 })
@@ -35,6 +54,11 @@ onUpdated(() => {
 onMounted(() => {
   if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
     isVideoPage.value = true
+  setAppAppearance()
+  setAppLanguage()
+  // nextTick(() => {
+  //   setAppLanguage()
+  // })
 })
 
 function changeActivatePage(pageName: AppPage) {
@@ -59,13 +83,26 @@ async function setAppLanguage() {
       language.value = LanguageType.English
     }
   }
+  console.log('hey, im here', language.value)
 
   locale.value = language.value
 }
+
+/**
+ * Watch for changes in the 'isDark' variable and add the 'dark' class to the 'mainApp' element
+ * to prevent some Unocss dark-specific styles from failing to take effect
+ */
+function setAppAppearance() {
+  if (isDark.value)
+    mainApp.value?.classList.add('dark')
+
+  else
+    mainApp.value?.classList.remove('dark')
+}
 </script>
 
 <template>
-  <div bg="$bew-bg" text="$bew-text-1" min-h-100vh>
+  <div ref="mainApp" bg="$bew-bg" text="$bew-text-1" min-h-100vh>
     <div m-auto max-w="$bew-page-max-width">
       <Transition name="topbar">
         <Topbar

src/contentScripts/views/Video/Video.vue

@@ -29,9 +29,9 @@ onMounted(async () => {
     if (danmukuContent.value && danmukuBox)
       danmukuContent.value.appendChild(danmukuBox)
 
-    const recoList = document.querySelector('#reco_list') as HTMLElement
-    if (recommendedContent.value && recoList)
-      recommendedContent.value.appendChild(recoList)
+    // const recoList = document.querySelector('#reco_list') as HTMLElement
+    // if (recommendedContent.value && recoList)
+    //   recommendedContent.value.appendChild(recoList)
 
     const multiPage = document.querySelector('#multi_page') as HTMLElement
     if (videoEpisodeList.value && multiPage)