feat(theme): allow forcing dark mode (#2974)

1 year ago · 1fb5d228a2
parent a18e5e48a4
commit 1fb5d228a2
6 changed files with 34 additions and 31 deletions
--- a/docs/reference/site-config.md
+++ b/docs/reference/site-config.md
@ -426,7 +426,7 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-

 ### appearance

- Type: `boolean | 'dark' | import('@vueuse/core').UseDarkOptions`
+- Type: `boolean | 'dark' | 'force-dark' | import('@vueuse/core').UseDarkOptions`
 - Default: `true`

 Whether to enable dark mode (by adding the `.dark` class to the `<html>` element).
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@ -69,16 +69,16 @@ export function initData(route: Route): VitePressData {
    resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath)
  )

-  const isDark = site.value.appearance
+  const appearance = site.value.appearance // fine with reactivity being lost here, config change triggers a restart
+  const isDark =
+    appearance === 'force-dark'
+      ? ref(true)
+      : appearance
      ? useDark({
          storageKey: APPEARANCE_KEY,
          initialValue: () =>
-          typeof site.value.appearance === 'string'
-            ? site.value.appearance
-            : 'auto',
-        ...(typeof site.value.appearance === 'object'
-          ? site.value.appearance
-          : {})
+            typeof appearance === 'string' ? appearance : 'auto',
+          ...(typeof appearance === 'object' ? appearance : {})
        })
      : ref(false)

--- a/src/client/theme-default/components/VPNavBarAppearance.vue
+++ b/src/client/theme-default/components/VPNavBarAppearance.vue
@ -6,7 +6,7 @@ const { site } = useData()
 </script>

 <template>
-  <div v-if="site.appearance" class="VPNavBarAppearance">
+  <div v-if="site.appearance && site.appearance !== 'force-dark'" class="VPNavBarAppearance">
    <VPSwitchAppearance />
  </div>
 </template>
--- a/src/node/config.ts
+++ b/src/node/config.ts
@ -255,24 +255,25 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
        ? userConfig.appearance.initialValue ?? 'auto'
        : 'auto'

-    head.push(
-      [
+    head.push([
      'script',
-        { id: 'check-dark-light' },
-        `;(() => {
+      { id: 'check-dark-mode' },
+      fallbackPreference === 'force-dark'
+        ? `document.documentElement.classList.add('dark')`
+        : `;(() => {
            const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
            if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
              document.documentElement.classList.add('dark')
          })()`
-      ],
-      [
+    ])
+  }
+
+  head.push([
    'script',
    { id: 'check-mac-os' },
    `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`
-      ]
-    )
-  }
+  ])

  return head
 }
--- a/src/node/siteConfig.ts
+++ b/src/node/siteConfig.ts
@ -72,6 +72,7 @@ export interface UserConfig<ThemeConfig = any>
  appearance?:
    | boolean
    | 'dark'
+    | 'force-dark'
    | (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' })
  lastUpdated?: boolean
  contentProps?: Record<string, any>
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@ -60,6 +60,7 @@ export interface SiteData<ThemeConfig = any> {
  appearance:
    | boolean
    | 'dark'
+    | 'force-dark'
    | (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' })
  themeConfig: ThemeConfig
  scrollOffset: