From 79f11cbb87ac450d4f51e8bf427640ed150a6bf2 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Thu, 2 May 2024 02:10:59 +0800
Subject: [PATCH] refactor: group dark mode logic to useDark (#694)

* refactor: group dark mode logic to useDark

* fix: cannot get the bewlyWrapper

---------

Co-authored-by: hakadao <a578457889743@gmail.com>
---
 src/auto-imports.d.ts                         |   1 +
 src/components/Dock/Dock.vue                  |  91 +------------
 .../RightSideButtons/RightSideButtons.vue     |  92 +------------
 src/composables/useDark.ts                    | 122 ++++++++++++++++++
 src/contentScripts/views/App.vue              |  44 +------
 5 files changed, 138 insertions(+), 212 deletions(-)
 create mode 100644 src/composables/useDark.ts

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 82645102..d4fb45ab 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -59,6 +59,7 @@ declare global {
   const useBewlyImage: typeof import('./composables/useImage')['useBewlyImage']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useDark: typeof import('./composables/useDark')['useDark']
   const useDelayedHover: typeof import('./composables/useDelayedHover')['useDelayedHover']
   const useSlots: typeof import('vue')['useSlots']
   const useStorageLocal: typeof import('./composables/useStorageLocal')['useStorageLocal']
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 340ac869..1bae0051 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { usePreferredDark } from '@vueuse/core'
 import type { HoveringDockItem } from './types'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
@@ -10,9 +9,9 @@ import { useMainStore } from '~/stores/mainStore'
 defineProps<{ activatedPage: AppPage }>()
 
 const emit = defineEmits(['change-page', 'settings-visibility-change'])
-const { mainAppRef } = useBewlyApp()
 
 const mainStore = useMainStore()
+const { isDark, toggleDark } = useDark()
 
 const hideDock = ref<boolean>(false)
 const hoveringDockItem = reactive<HoveringDockItem>({
@@ -31,16 +30,6 @@ const tooltipPlacement = computed(() => {
   return 'right'
 })
 
-const isPreferredDark = usePreferredDark()
-const currentSystemColorScheme = computed(() => isPreferredDark.value ? 'dark' : 'light')
-
-const currentAppColorScheme = computed((): 'dark' | 'light' => {
-  if (settings.value.theme !== 'auto')
-    return settings.value.theme
-  else
-    return currentSystemColorScheme.value
-})
-
 watch(() => settings.value.autoHideDock, (newValue) => {
   hideDock.value = newValue
 })
@@ -76,78 +65,6 @@ onMounted(() => {
   currentDockItems.value = computeDockItem()
 })
 
-function toggleDark(e: MouseEvent) {
-  const updateThemeSettings = () => {
-    if (currentAppColorScheme.value !== currentSystemColorScheme.value)
-      settings.value.theme = 'auto'
-    else
-      settings.value.theme = isPreferredDark.value ? 'light' : 'dark'
-  }
-
-  const isAppearanceTransition = typeof document !== 'undefined'
-  // @ts-expect-error: Transition API
-    && document.startViewTransition
-    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  if (!isAppearanceTransition) {
-    updateThemeSettings()
-  }
-  else {
-    const x = e.clientX
-    const y = e.clientY
-    const endRadius = Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    )
-    // https://github.com/vueuse/vueuse/pull/3129
-    const style = document.createElement('style')
-    const styleString = `
-    *, *::before, *::after
-    {-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
-    style.appendChild(document.createTextNode(styleString))
-    document.head.appendChild(style)
-
-    // Since the above normal dom style cannot be applied in shadow dom style
-    // We need to add this style again to the shadow dom
-    const shadowDomStyle = document.createElement('style')
-    const shadowDomStyleString = `
-    *, *::before, *::after
-    {-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important; will-change: background}`
-    shadowDomStyle.appendChild(document.createTextNode(shadowDomStyleString))
-    mainAppRef.value.appendChild(shadowDomStyle)
-
-    // @ts-expect-error: Transition API
-    const transition = document.startViewTransition(async () => {
-      updateThemeSettings()
-      await nextTick()
-    })
-
-    transition.ready.then(() => {
-      const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
-      ]
-      const animation = document.documentElement.animate(
-        {
-          clipPath: currentAppColorScheme.value === 'dark'
-            ? [...clipPath].reverse()
-            : clipPath,
-        },
-        {
-          duration: 300,
-          easing: 'ease-in-out',
-          pseudoElement: currentAppColorScheme.value === 'dark'
-            ? '::view-transition-old(root)'
-            : '::view-transition-new(root)',
-        },
-      )
-      animation.addEventListener('finish', () => {
-        document.head.removeChild(style!)
-        mainAppRef.value.removeChild(shadowDomStyle!)
-      }, { once: true })
-    })
-  }
-}
-
 function toggleDockHide(hide: boolean) {
   if (settings.value.autoHideDock)
     hideDock.value = hide
@@ -209,7 +126,7 @@ function toggleDockHide(hide: boolean) {
       <!-- dividing line -->
       <div class="divider" />
 
-      <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
+      <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
         <button
           class="dock-item"
           @click="toggleDark"
@@ -218,13 +135,13 @@ function toggleDockHide(hide: boolean) {
         >
           <Transition name="fade">
             <div v-show="hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-loop-transition v-if="currentAppColorScheme === 'dark'" />
+              <line-md:sunny-outline-to-moon-loop-transition v-if="isDark" />
               <line-md:moon-alt-to-sunny-outline-loop-transition v-else />
             </div>
           </Transition>
           <Transition name="fade">
             <div v-show="!hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" />
+              <line-md:sunny-outline-to-moon-transition v-if="isDark" />
               <line-md:moon-to-sunny-outline-transition v-else />
             </div>
           </Transition>
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 08e354bf..078b24b1 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,97 +1,13 @@
 <script setup lang="ts">
-import { usePreferredDark } from '@vueuse/core'
 import type { HoveringDockItem } from './types'
-import { settings } from '~/logic'
 
 const emit = defineEmits(['settings-visibility-change'])
-const { mainAppRef } = useBewlyApp()
+const { isDark, toggleDark } = useDark()
 
 const hoveringDockItem = reactive<HoveringDockItem>({
   themeMode: false,
   settings: false,
 })
-
-const isPreferredDark = usePreferredDark()
-const currentSystemColorScheme = computed(() => isPreferredDark.value ? 'dark' : 'light')
-
-const currentAppColorScheme = computed((): 'dark' | 'light' => {
-  if (settings.value.theme !== 'auto')
-    return settings.value.theme
-  else
-    return currentSystemColorScheme.value
-})
-
-function toggleDark(e: MouseEvent) {
-  const updateThemeSettings = () => {
-    if (currentAppColorScheme.value !== currentSystemColorScheme.value)
-      settings.value.theme = 'auto'
-    else
-      settings.value.theme = isPreferredDark.value ? 'light' : 'dark'
-  }
-
-  const isAppearanceTransition = typeof document !== 'undefined'
-  // @ts-expect-error: Transition API
-    && document.startViewTransition
-    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  if (!isAppearanceTransition) {
-    updateThemeSettings()
-  }
-  else {
-    const x = e.clientX
-    const y = e.clientY
-    const endRadius = Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    )
-    // https://github.com/vueuse/vueuse/pull/3129
-    const style = document.createElement('style')
-    const styleString = `
-    *, *::before, *::after
-    {-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
-    style.appendChild(document.createTextNode(styleString))
-    document.head.appendChild(style)
-
-    // Since normal dom style cannot be applied in shadow dom style
-    // We need to add this style again to the shadow dom
-    const shadowDomStyle = document.createElement('style')
-    const shadowDomStyleString = `
-    *, *::before, *::after
-    {-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
-    shadowDomStyle.appendChild(document.createTextNode(shadowDomStyleString))
-    mainAppRef.value.appendChild(shadowDomStyle)
-
-    // @ts-expect-error: Transition API
-    const transition = document.startViewTransition(async () => {
-      updateThemeSettings()
-      await nextTick()
-    })
-
-    transition.ready.then(() => {
-      const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
-      ]
-      const animation = document.documentElement.animate(
-        {
-          clipPath: currentAppColorScheme.value === 'dark'
-            ? [...clipPath].reverse()
-            : clipPath,
-        },
-        {
-          duration: 300,
-          easing: 'ease-in-out',
-          pseudoElement: currentAppColorScheme.value === 'dark'
-            ? '::view-transition-old(root)'
-            : '::view-transition-new(root)',
-        },
-      )
-      animation.addEventListener('finish', () => {
-        document.head.removeChild(style!)
-        mainAppRef.value.removeChild(shadowDomStyle!)
-      }, { once: true })
-    })
-  }
-}
 </script>
 
 <template>
@@ -100,7 +16,7 @@ function toggleDark(e: MouseEvent) {
     pointer-events-none
   >
     <div flex="~ gap-2 col" pointer-events-auto>
-      <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
+      <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
         <Button
           class="ctrl-btn"
           style="backdrop-filter: var(--bew-filter-glass-1);"
@@ -111,13 +27,13 @@ function toggleDark(e: MouseEvent) {
         >
           <Transition name="fade">
             <div v-show="hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-loop-transition v-if="currentAppColorScheme === 'dark'" />
+              <line-md:sunny-outline-to-moon-loop-transition v-if="isDark" />
               <line-md:moon-alt-to-sunny-outline-loop-transition v-else />
             </div>
           </Transition>
           <Transition name="fade">
             <div v-show="!hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" />
+              <line-md:sunny-outline-to-moon-transition v-if="isDark" />
               <line-md:moon-to-sunny-outline-transition v-else />
             </div>
           </Transition>
diff --git a/src/composables/useDark.ts b/src/composables/useDark.ts
new file mode 100644
index 00000000..1f059e31
--- /dev/null
+++ b/src/composables/useDark.ts
@@ -0,0 +1,122 @@
+import { usePreferredDark } from '@vueuse/core'
+import { settings } from '~/logic'
+
+export function useDark() {
+  const isPreferredDark = usePreferredDark()
+  const currentSystemColorScheme = computed(() => isPreferredDark.value ? 'dark' : 'light')
+  const currentAppColorScheme = computed((): 'dark' | 'light' => {
+    if (settings.value.theme !== 'auto')
+      return settings.value.theme
+    else
+      return currentSystemColorScheme.value
+  })
+  const isDark = computed(() => currentAppColorScheme.value === 'dark')
+
+  // 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
+  watch(
+    () => [settings.value.theme, isPreferredDark.value],
+    () => {
+      setAppAppearance()
+    },
+    { immediate: true },
+  )
+
+  /**
+   * 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 (isDark.value) {
+      document.querySelector('#bewly')?.classList.add('dark')
+      document.documentElement.classList.add('dark')
+    }
+    else {
+      document.querySelector('#bewly')?.classList.remove('dark')
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  function toggleDark(e: MouseEvent) {
+    const updateThemeSettings = () => {
+      if (currentAppColorScheme.value !== currentSystemColorScheme.value)
+        settings.value.theme = 'auto'
+      else
+        settings.value.theme = isPreferredDark.value ? 'light' : 'dark'
+    }
+
+    const isAppearanceTransition = typeof document !== 'undefined'
+    // @ts-expect-error: Transition API
+      && document.startViewTransition
+      && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (!isAppearanceTransition) {
+      updateThemeSettings()
+    }
+    else {
+      const x = e.clientX
+      const y = e.clientY
+      const endRadius = Math.hypot(
+        Math.max(x, innerWidth - x),
+        Math.max(y, innerHeight - y),
+      )
+      // https://github.com/vueuse/vueuse/pull/3129
+      const style = document.createElement('style')
+      const styleString = `
+            *, *::before, *::after
+            {-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+      style.appendChild(document.createTextNode(styleString))
+      document.head.appendChild(style)
+
+      // Since the above normal dom style cannot be applied in shadow dom style
+      // We need to add this style again to the shadow dom
+      const shadowDomStyle = document.createElement('style')
+      const shadowDomStyleString = `
+            *, *::before, *::after
+            {-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important; will-change: background}`
+      shadowDomStyle.appendChild(document.createTextNode(shadowDomStyleString))
+
+      const bewlyShadowRoot = document.getElementById('bewly')?.shadowRoot
+      const bewlyWrapper = bewlyShadowRoot?.getElementById('bewly-wrapper')
+      if (!bewlyWrapper)
+        throw new Error('mainAppRef is not found')
+
+      bewlyWrapper.appendChild(shadowDomStyle)
+
+      // @ts-expect-error: Transition API
+      const transition = document.startViewTransition(async () => {
+        updateThemeSettings()
+        await nextTick()
+      })
+
+      transition.ready.then(() => {
+        const clipPath = [
+              `circle(0px at ${x}px ${y}px)`,
+              `circle(${endRadius}px at ${x}px ${y}px)`,
+        ]
+        const animation = document.documentElement.animate(
+          {
+            clipPath: currentAppColorScheme.value === 'dark'
+              ? [...clipPath].reverse()
+              : clipPath,
+          },
+          {
+            duration: 300,
+            easing: 'ease-in-out',
+            pseudoElement: currentAppColorScheme.value === 'dark'
+              ? '::view-transition-old(root)'
+              : '::view-transition-new(root)',
+          },
+        )
+        animation.addEventListener('finish', () => {
+          document.head.removeChild(style!)
+          bewlyWrapper.removeChild(shadowDomStyle!)
+        }, { once: true })
+      })
+    }
+  }
+
+  return {
+    isDark,
+    toggleDark,
+  }
+}
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index b0da9799..f7a3da65 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { usePreferredDark, useThrottleFn, useToggle } from '@vueuse/core'
+import { useThrottleFn, useToggle } from '@vueuse/core'
+import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
-import type { Ref } from 'vue'
 
-import { accessKey, settings } from '~/logic'
-import { AppPage, LanguageType } from '~/enums/appEnums'
-import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
+import { AppPage, LanguageType } from '~/enums/appEnums'
+import { accessKey, settings } from '~/logic'
+import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
 
+const { isDark } = useDark()
 const activatedPage = ref<AppPage>(settings.value.dockItemVisibilityList.find(e => e.visible === true)?.page ?? AppPage.Home)
 const { locale } = useI18n()
 const [showSettings, toggleSettings] = useToggle(false)
@@ -29,13 +30,6 @@ const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.
 const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
 const topBarRef = ref()
 
-const isPreferredDark = usePreferredDark()
-const isDark = computed(() => {
-  if (settings.value.theme === 'auto')
-    return isPreferredDark.value
-  return settings.value.theme === 'dark'
-})
-
 const isVideoPage = computed(() => {
   if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
     return true
@@ -82,12 +76,6 @@ watch(
   { immediate: true },
 )
 
-// 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
-watch(() => settings.value.theme, () => {
-  setAppAppearance()
-}, { immediate: true })
-
 watch(() => settings.value.language, () => {
   setAppLanguage()
 })
@@ -133,10 +121,7 @@ onMounted(() => {
     else showTopBarMask.value = false
   })
 
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setAppAppearance)
-
   handleChangeAccessKey()
-  setAppAppearance()
   setAppLanguage()
 })
 
@@ -184,21 +169,6 @@ async function setAppLanguage() {
   locale.value = settings.value.language
 }
 
-/**
- * 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 (isDark.value) {
-    document.querySelector('#bewly')?.classList.add('dark')
-    document.documentElement.classList.add('dark')
-  }
-  else {
-    document.querySelector('#bewly')?.classList.remove('dark')
-    document.documentElement.classList.remove('dark')
-  }
-}
-
 function setAppThemeColor() {
   const bewlyElement = document.querySelector('#bewly') as HTMLElement
   if (bewlyElement) {
@@ -311,7 +281,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
 </script>
 
 <template>
-  <div ref="mainAppRef" class="bewly-wrapper" :class="{ dark: isDark }" text="$bew-text-1">
+  <div id="bewly-wrapper" ref="mainAppRef" class="bewly-wrapper" :class="{ dark: isDark }" text="$bew-text-1">
     <!-- Background -->
     <template v-if="isHomePage() && !settings.useOriginalBilibiliHomepage">
       <AppBackground :activated-page="activatedPage" />