fix(vuepress-theme-reco): mode switching logic with SSR

Author: stevapple

packages/vuepress-theme-reco/components/Mode/ModePicker.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import setMode from './setMode'
+import applyMode from './applyMode'
 export default {
   name: 'ModeOptions',
 
@@ -29,18 +29,27 @@ export default {
   },
 
   mounted () {
-    const mode = localStorage.getItem('mode')
-    const { mode: customMode, modePicker } = this.$themeConfig
-    const themeMode = customMode || 'auto'
-    this.currentMode = modePicker === false ? themeMode : mode || themeMode
-    setMode(this.currentMode)
+    // modePicker 开启时默认使用用户主动设置的模式
+    this.currentMode = localStorage.getItem('mode') || this.$themeConfig.mode || 'auto'
+
+    // Dark and Light autoswitches
+    // 为了避免在 server-side 被执行，故在 Vue 组件中设置监听器
+    var that = this
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+      that.$data.currentMode === 'auto' && applyMode(that.$data.currentMode)
+    })
+    window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+      that.$data.currentMode === 'auto' && applyMode(that.$data.currentMode)
+    })
+
+    applyMode(this.currentMode)
   },
 
   methods: {
     selectMode (mode) {
       if (mode !== this.currentMode) {
         this.currentMode = mode
-        setMode(mode)
+        applyMode(mode)
         localStorage.setItem('mode', mode)
       }
     },

packages/vuepress-theme-reco/components/Mode/applyMode.js

@@ -0,0 +1,35 @@
+import modeOptions from './modeOptions'
+
+function render (mode) {
+  const rootElement = document.querySelector(':root')
+  const options = modeOptions[mode]
+
+  for (const k in options) {
+    rootElement.style.setProperty(k, options[k])
+  }
+}
+
+/**
+ * Sets a color scheme for the website.
+ * If browser supports "prefers-color-scheme", 'auto' mode will respect the setting for light or dark mode
+ * otherwise it will set a dark theme during night time
+ */
+export default function applyMode (mode) {
+  if (mode !== 'auto') {
+    render(mode)
+    return
+  }
+
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+
+  if (isDarkMode) render('dark')
+  if (isLightMode) render('light')
+
+  if (!isDarkMode && !isLightMode) {
+    console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.')
+    const hour = new Date().getHours()
+    if (hour < 6 || hour >= 18) render('dark')
+    else render('light')
+  }
+}

packages/vuepress-theme-reco/components/Mode/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-click-outside="hideMenu" class="color-picker">
+	<div v-click-outside="hideMenu" class="color-picker" v-if="$themeConfig.modePicker !== false" >
 		<a class="color-button" @click.prevent="showMenu = !showMenu">
 			<i class="iconfont reco-color"></i>
 		</a>
@@ -14,6 +14,7 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import ModePicker from './ModePicker'
+import applyMode from './applyMode'
 
 export default {
   name: 'UserSettings',
@@ -32,6 +33,25 @@ export default {
     }
   },
 
+  // 为了在保证 modePicker 在 SSR 中正确开关，并实现管理，Mode 组件将负责 modePicker 关闭的情况
+  mounted () {
+    // modePicker 关闭时默认使用主题设置的模式
+    const themeMode = this.$themeConfig.mode || 'auto'
+    const { modePicker } = this.$themeConfig
+    if (modePicker === false) {
+      // 为 'auto' 模式设置监听器
+      if (themeMode === 'auto') {
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+          applyMode(themeMode)
+        })
+        window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+          applyMode(themeMode)
+        })
+      }
+      applyMode(themeMode)
+    }
+  },
+
   methods: {
     hideMenu () {
       this.showMenu = false

packages/vuepress-theme-reco/components/Mode/setMode.js

@@ -22,7 +22,7 @@
         'max-width': linksWrapMaxWidth + 'px'
       } : {}">
 
-      <Mode v-if="$themeConfig.modePicker !== false" />
+      <Mode />
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"/>