feat(@vant/cli): desktop site support dark mode

packages/vant-cli/site/desktop/components/Header.vue

@@ -21,6 +21,16 @@
             </a>
           </li>
 
+          <li v-if="supportDarkMode" class="van-doc-header__top-nav-item">
+            <a
+              class="van-doc-header__link"
+              target="_blank"
+              @click="toggleTheme"
+            >
+              <img :src="themeImg" />
+            </a>
+          </li>
+
           <li
             ref="version"
             v-if="versions"
@@ -79,10 +89,12 @@ export default {
     config: Object,
     versions: Array,
     langConfigs: Array,
+    supportDarkMode: Boolean,
   },
 
   data() {
     return {
+      currentTheme: this.getDefaultTheme(),
       packageVersion,
       showVersionPop: false,
     };
@@ -109,9 +121,35 @@ export default {
     searchConfig() {
       return this.config.searchConfig;
     },
+
+    themeImg() {
+      if (this.currentTheme === 'light') {
+        return 'https://b.yzcdn.cn/vant/dark-theme.svg';
+      }
+      return 'https://b.yzcdn.cn/vant/light-theme.svg';
+    },
+  },
+
+  watch: {
+    currentTheme: {
+      handler(newVal, oldVal) {
+        window.localStorage.setItem('vantTheme', newVal);
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+      },
+      immediate: true,
+    },
   },
 
   methods: {
+    getDefaultTheme() {
+      return window.localStorage.getItem('vantTheme') || 'light';
+    },
+
+    toggleTheme() {
+      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+    },
+
     toggleVersionPop() {
       const val = !this.showVersionPop;
 
@@ -144,18 +182,16 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-header {
   width: 100%;
-  background-color: #001938;
+  background-color: var(--van-doc-header-background);
   user-select: none;
 
   &__top {
     display: flex;
     align-items: center;
-    height: @van-doc-header-top-height;
-    padding: 0 @van-doc-padding;
+    height: var(--van-doc-header-top-height);
+    padding: 0 var(--van-doc-padding);
 
     &-nav {
       flex: 1;
@@ -231,7 +267,7 @@ export default {
         transition: 0.2s;
 
         &:hover {
-          color: @van-doc-blue;
+          color: var(--van-doc-link-color);
           background-color: #f7f8fa;
         }
       }
@@ -259,6 +295,8 @@ export default {
   }
 
   &__link {
+    cursor: pointer;
+
     span {
       color: #fff;
       font-size: 16px;