feat(theme): 新增 force-dark 外观配置

pengzhanbo · Feb 20, 2024 · 979d4d6 · 979d4d6
1 parent 89c8a0e
commit 979d4d6
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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-->