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

brc-dd · web-flow · commit 1fb5d228a269 · 2023-09-16T00:21:15.000+05:30
diff --git 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).
diff --git a/src/client/app/data.ts b/src/client/app/data.ts
@@ -69,18 +69,18 @@ export function initData(route: Route): VitePressData {
     resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath)
   )
 
-  const isDark = site.value.appearance
-    ? useDark({
-        storageKey: APPEARANCE_KEY,
-        initialValue: () =>
-          typeof site.value.appearance === 'string'
-            ? site.value.appearance
-            : 'auto',
-        ...(typeof site.value.appearance === 'object'
-          ? site.value.appearance
-          : {})
-      })
-    : ref(false)
+  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 appearance === 'string' ? appearance : 'auto',
+          ...(typeof appearance === 'object' ? appearance : {})
+        })
+      : ref(false)
 
   return {
     site,
diff --git 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>
diff --git 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(
-      [
-        'script',
-        { id: 'check-dark-light' },
-        `;(() => {
-          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')
-        })()`
-      ],
-      [
-        'script',
-        { id: 'check-mac-os' },
-        `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`
-      ]
-    )
+    head.push([
+      'script',
+      { 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
 }
diff --git 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>
diff --git 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:
