feat(vitepress): 状态栏主题适配深色模式 (#25)

maomao1996 · Aug 21, 2024 · 059a58f · 059a58f
1 parent 6f92f9d
commit 059a58f
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/docs/.vitepress/theme/components/MLayout.vue b/docs/.vitepress/theme/components/MLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData, inBrowser } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'
 import Giscus from '@giscus/vue'
@@ -19,9 +19,20 @@ const enableTransitions = () =>
   'startViewTransition' in document &&
   window.matchMedia('(prefers-reduced-motion: no-preference)').matches
 
+function updateMetaThemeColor() {
+  if (inBrowser) {
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]')!
+    // #1b1b1f 是 vitepress 在 dark 模式下的背景色
+    metaThemeColor.setAttribute('content', isDark.value ? '#1b1b1f' : '#3eaf7c')
+  }
+}
+
+updateMetaThemeColor()
+
 provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
   if (!enableTransitions()) {
     isDark.value = !isDark.value
+    updateMetaThemeColor()
     return
   }
 
@@ -36,6 +47,7 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
   // @ts-ignore
   await document.startViewTransition(async () => {
     isDark.value = !isDark.value
+    updateMetaThemeColor()
     await nextTick()
   }).ready