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

src/composables/useDark.ts

@@ -1,7 +1,8 @@
 import { usePreferredDark } from '@vueuse/core'
 
 import { settings } from '~/logic'
-import { setCookie } from '~/utils/main'
+import { runWhenIdle } from '~/utils/lazyLoad'
+import { delay, setCookie } from '~/utils/main'
 import { executeTimes } from '~/utils/timer'
 
 export function useDark() {
@@ -26,6 +27,25 @@ 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
@@ -37,19 +57,16 @@ export function useDark() {
     if (isDark.value) {
       document.querySelector('#bewly')?.classList.add('dark')
       document.documentElement.classList.add('dark')
-      // TODO: find a better way implement this
-      themeChangeTimer = executeTimes(() => {
-        setCookie('theme_style', 'dark', 365 * 10)
-        window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'dark' }))
-      }, 10, 200)
+
+      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')
-      themeChangeTimer = executeTimes(() => {
-        setCookie('theme_style', 'light', 365 * 10)
-        window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'light' }))
-      }, 10, 200)
+
+      setCookie('theme_style', 'light', 365 * 10)
+      window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'light' }))
     }
   }