fix: support comment tags coloring in dark mode. closes #880 (#897)

* fix: bilibili comment theme color

* cleanup

* fix: spinner bg color

* refactor: adjust theme color timer logic

* fix: comment tags still show a light color when page is first loaded

* chore: remove unused import in useDark.ts

---------

Co-authored-by: Hakadao <a578457889743@gmail.com>

src/composables/useDark.ts

@@ -1,6 +1,9 @@
 import { usePreferredDark } from '@vueuse/core'
 
 import { settings } from '~/logic'
+import { runWhenIdle } from '~/utils/lazyLoad'
+import { setCookie } from '~/utils/main'
+import { executeTimes } from '~/utils/timer'
 
 export function useDark() {
   const isPreferredDark = usePreferredDark()
@@ -12,6 +15,7 @@ export function useDark() {
       return currentSystemColorScheme.value
   })
   const isDark = computed(() => currentAppColorScheme.value === 'dark')
+  let themeChangeTimer: NodeJS.Timeout | null = null
 
   // Watch for changes in the 'settings.value.theme' variable and add the 'dark' class to the 'mainApp' element
   // to prevent some Unocss dark-specific styles from failing to take effect
@@ -23,18 +27,46 @@ export function useDark() {
     { immediate: true },
   )
 
+  onMounted(() => {
+    // Because some shadow dom may not be loaded when the page has already loaded, we need to wait until the page is idle
+    runWhenIdle(() => {
+      if (isDark.value) {
+        setCookie('theme_style', 'dark', 365 * 10)
+        // TODO: find a better way implement this
+        themeChangeTimer = executeTimes(() => {
+          window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'dark' }))
+        }, 10, 500)
+      }
+      else {
+        setCookie('theme_style', 'light', 365 * 10)
+        themeChangeTimer = executeTimes(() => {
+          window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'light' }))
+        }, 10, 500)
+      }
+    })
+  })
+
   /**
    * Watch for changes in the 'settings.value.theme' 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 (themeChangeTimer)
+      clearInterval(themeChangeTimer)
+
     if (isDark.value) {
       document.querySelector('#bewly')?.classList.add('dark')
       document.documentElement.classList.add('dark')
+
+      setCookie('theme_style', 'dark', 365 * 10)
+      window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'dark' }))
     }
     else {
       document.querySelector('#bewly')?.classList.remove('dark')
       document.documentElement.classList.remove('dark')
+
+      setCookie('theme_style', 'light', 365 * 10)
+      window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'light' }))
     }
   }
 

src/styles/variables.scss

@@ -743,4 +743,6 @@
   --Si8: #c8ced6;
   --Si9: #dce0e5;
   --Si10: #f0f2f4;
+
+  --bg1_rgb: #1d1628;
 }

src/utils/timer.ts

@@ -0,0 +1,14 @@
+export function executeTimes(fn: () => void | Promise<void>, times: number, interval: number = 1000) {
+  let count = 0
+  let timer: NodeJS.Timeout
+  // eslint-disable-next-line prefer-const
+  timer = setInterval(async () => {
+    await fn()
+    count++
+    if (count >= times) {
+      clearInterval(timer)
+    }
+  }, interval)
+
+  return timer
+}