From 979d4d645f81bd6871b41a2169513a1cccd28033 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 21 Feb 2024 03:52:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=96=B0=E5=A2=9E=20`force-dark?=
 =?UTF-8?q?`=20=E5=A4=96=E8=A7=82=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Nav/NavBar.vue    |  1 +
 .../components/Nav/NavBarAppearance.vue       |  5 ++++-
 .../src/client/components/Nav/NavBarExtra.vue |  2 +-
 .../components/Nav/NavScreenAppearance.vue    |  5 ++++-
 theme/src/node/theme.ts                       | 22 +++++++++++++++++++
 theme/src/shared/options/locale.ts            |  2 +-
 theme/templates/build.html                    | 11 ----------
 7 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/theme/src/client/components/Nav/NavBar.vue b/theme/src/client/components/Nav/NavBar.vue
index 8296a251e..b5c44f684 100644
--- a/theme/src/client/components/Nav/NavBar.vue
+++ b/theme/src/client/components/Nav/NavBar.vue
@@ -189,6 +189,7 @@ watchPostEffect(() => {
 .menu + .appearance::before,
 .menu + .social-links::before,
 .translations + .appearance::before,
+.translations + .social-links::before,
 .appearance + .social-links::before {
   width: 1px;
   height: 24px;
diff --git a/theme/src/client/components/Nav/NavBarAppearance.vue b/theme/src/client/components/Nav/NavBarAppearance.vue
index b04ed1fdd..3c830cca4 100644
--- a/theme/src/client/components/Nav/NavBarAppearance.vue
+++ b/theme/src/client/components/Nav/NavBarAppearance.vue
@@ -6,7 +6,10 @@ const theme = useThemeLocaleData()
 </script>
 
 <template>
-  <div v-if="theme.appearance" class="navbar-appearance">
+  <div
+    v-if="theme.appearance && theme.appearance !== 'force-dark'"
+    class="navbar-appearance"
+  >
     <SwitchAppearance />
   </div>
 </template>
diff --git a/theme/src/client/components/Nav/NavBarExtra.vue b/theme/src/client/components/Nav/NavBarExtra.vue
index bd2860be4..5a49bca9d 100644
--- a/theme/src/client/components/Nav/NavBarExtra.vue
+++ b/theme/src/client/components/Nav/NavBarExtra.vue
@@ -30,7 +30,7 @@ const hasExtraContent = computed(
       </template>
     </div>
 
-    <div v-if="theme.appearance" class="group">
+    <div v-if="theme.appearance && theme.appearance !== 'force-dark'" class="group">
       <div class="item appearance">
         <p class="label">
           {{ theme.appearanceText || 'Appearance' }}
diff --git a/theme/src/client/components/Nav/NavScreenAppearance.vue b/theme/src/client/components/Nav/NavScreenAppearance.vue
index c1b8ddbbf..cc4acced8 100644
--- a/theme/src/client/components/Nav/NavScreenAppearance.vue
+++ b/theme/src/client/components/Nav/NavScreenAppearance.vue
@@ -6,7 +6,10 @@ const theme = useThemeLocaleData()
 </script>
 
 <template>
-  <div v-if="theme.appearance" class="nav-screen-appearance">
+  <div
+    v-if="theme.appearance && theme.appearance !== 'force-dark'"
+    class="nav-screen-appearance"
+  >
     <p class="text">
       {{ theme.appearanceText ?? 'Appearance' }}
     </p>
diff --git a/theme/src/node/theme.ts b/theme/src/node/theme.ts
index 891067d17..301dcdf40 100644
--- a/theme/src/node/theme.ts
+++ b/theme/src/node/theme.ts
@@ -28,6 +28,28 @@ export function plumeTheme({
         extendsPageData(app, page as Page<PlumeThemePageData>, localeOptions)
 
         page.frontmatter.head ??= []
+        if (localeOptions.appearance ?? true) {
+          const appearance = typeof localeOptions.appearance === 'string'
+            ? localeOptions.appearance
+            : 'auto'
+
+          page.frontmatter.head.push([
+            'script',
+            { id: 'check-dark-mode' },
+            appearance === 'force-dark'
+              ? `document.documentElement.classList.add('dark')`
+              : `;(function () {
+        const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}';
+        const sm =
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (um === 'dark' || (um !== 'light' && sm)) {
+          document.documentElement.classList.add('dark');
+        }
+      })();`,
+          ])
+        }
+
         page.frontmatter.head?.push([
           'script',
           { id: 'check-mac-os' },
diff --git a/theme/src/shared/options/locale.ts b/theme/src/shared/options/locale.ts
index 9db8c7abf..d62c539c2 100644
--- a/theme/src/shared/options/locale.ts
+++ b/theme/src/shared/options/locale.ts
@@ -114,7 +114,7 @@ export interface PlumeThemeLocaleData extends LocaleData {
   /**
    * 是否启用深色模式切换按钮
    */
-  appearance?: boolean | 'dark'
+  appearance?: boolean | 'dark' | 'force-dark'
 
   /**
    * 深色模式切换按钮的文本
diff --git a/theme/templates/build.html b/theme/templates/build.html
index b2da758d5..29e105a38 100644
--- a/theme/templates/build.html
+++ b/theme/templates/build.html
@@ -5,17 +5,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="generator" content="VuePress {{ version }}" />
     <meta name="theme" content="VuePress Theme Plume {{ themeVersion }}" />
-    <script>
-      ;(function () {
-        const um = localStorage.getItem('vuepress-theme-appearance');
-        const sm =
-          window.matchMedia &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (um === 'dark' || (um !== 'light' && sm)) {
-          document.documentElement.classList.add('dark');
-        }
-      })();
-    </script>
     <!--vuepress-ssr-head-->
     <!--vuepress-ssr-styles-->
     <!--vuepress-ssr-preload-->