style(@vant/cli): adjust css vars

packages/vant-cli/site/common/style/base.less

@@ -1,16 +1,16 @@
-@import './var';
+@import './vars.less';
 @import './font.less';
 
 body {
   min-width: 1100px;
   margin: 0;
   overflow-x: auto;
-  color: @van-doc-black;
+  color: var(--van-doc-text-color-2);
   font-size: 16px;
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
     Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
-  background-color: @van-doc-background-color;
+  background-color: var(--van-doc-background);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -42,8 +42,8 @@ a {
 .van-doc-row {
   width: 100%;
 
-  @media (min-width: @van-doc-row-max-width) {
-    width: @van-doc-row-max-width;
+  @media (min-width: var(--van-doc-row-max-width)) {
+    width: var(--van-doc-row-max-width);
     margin: 0 auto;
   }
 }

packages/vant-cli/site/common/style/highlight.less

@@ -1,20 +1,18 @@
-@import './var';
-
 code {
   position: relative;
   display: block;
   padding: 16px 20px;
   overflow-x: auto;
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
   font-weight: 400;
   font-size: 14px;
-  font-family: @van-doc-code-font-family;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
   line-height: 26px;
   white-space: pre-wrap;
   word-wrap: break-word;
   -webkit-font-smoothing: auto;
-  background-color: #f8f8f8;
-  border-radius: @van-doc-border-radius;
+  background-color: var(--van-doc-code-background);
+  border-radius: var(--van-doc-border-radius);
 }
 
 pre {
@@ -33,7 +31,7 @@ pre {
 }
 
 .hljs-subst {
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
 }
 
 .hljs-string,
@@ -42,18 +40,18 @@ pre {
 .hljs-template-tag,
 .hljs-template-variable,
 .hljs-addition {
-  color: @van-doc-green;
+  color: var(--van-doc-green);
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #999;
+  color: var(--van-doc-code-comment-color);
 }
 
 .hljs-params,
 .hljs-keyword,
 .hljs-attribute {
-  color: @van-doc-purple;
+  color: var(--van-doc-purple);
 }
 
 .hljs-deletion,

packages/vant-cli/site/common/style/var.less

@@ -1,27 +0,0 @@
-@van-doc-black: #323233;
-@van-doc-blue: #1989fa;
-@van-doc-purple: #8080ff;
-@van-doc-fuchsia: #a7419e;
-@van-doc-green: #4fc08d;
-@van-doc-text-color: #34495e;
-@van-doc-text-light-blue: rgba(69, 90, 100, 0.6);
-@van-doc-background-color: #f7f8fa;
-@van-doc-grey: #999;
-@van-doc-dark-grey: #666;
-@van-doc-light-grey: #ccc;
-@van-doc-border-color: #f1f4f8;
-@van-doc-code-color: #58727e;
-@van-doc-code-background-color: #f1f4f8;
-@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-@van-doc-padding: 24px;
-@van-doc-row-max-width: 1680px;
-@van-doc-nav-width: 220px;
-@van-doc-border-radius: 20px;
-
-// header
-@van-doc-header-top-height: 64px;
-@van-doc-header-bottom-height: 50px;
-
-// simulator
-@van-doc-simulator-width: 360px;
-@van-doc-simulator-height: 620px;

packages/vant-cli/site/common/style/vars.less

@@ -0,0 +1,72 @@
+:root {
+  // colors
+  --van-doc-black: #1a1a1a;
+  --van-doc-white: #fff;
+  --van-doc-gray-1: #f7f8fa;
+  --van-doc-gray-2: #f2f3f5;
+  --van-doc-gray-3: #ebedf0;
+  --van-doc-gray-4: #dcdee0;
+  --van-doc-gray-5: #c8c9cc;
+  --van-doc-gray-6: #969799;
+  --van-doc-gray-7: #646566;
+  --van-doc-gray-8: #323233;
+  --van-doc-blue: #1989fa;
+  --van-doc-green: #07c160;
+
+  // sizes
+  --van-doc-padding: 24px;
+  --van-doc-row-max-width: 1680px;
+  --van-doc-nav-width: 220px;
+  --van-doc-border-radius: 20px;
+  --van-doc-simulator-width: 360px;
+  --van-doc-simulator-height: 620px;
+  --van-doc-header-top-height: 64px;
+}
+
+.van-doc-theme-light {
+  // text
+  --van-doc-text-color-1: var(--van-doc-black);
+  --van-doc-text-color-2: var(--van-doc-gray-8);
+  --van-doc-text-color-3: #34495e;
+  --van-doc-link-color: var(--van-doc-blue);
+
+  // background
+  --van-doc-background: #f7f8fa;
+  --van-doc-background-light: var(--van-doc-white);
+  --van-doc-header-background: #011f3c;
+  --van-doc-border-color: var(--van-doc-gray-2);
+  --van-doc-shadow-color: var(--van-doc-gray-3);
+
+  // code
+  --van-doc-code-color: #58727e;
+  --van-doc-code-comment-color: var(--van-doc-gray-6);
+  --van-doc-code-background: var(--van-doc-gray-1);
+
+  // blockquote
+  --van-doc-blockquote-color: #4994df;
+  --van-doc-blockquote-background: #ecf9ff;
+}
+
+.van-doc-theme-dark {
+  // text
+  --van-doc-text-color-1: var(--van-doc-white);
+  --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
+  --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
+  --van-doc-link-color: #1bb5fe;
+
+  // background
+  --van-doc-background: var(--van-doc-black);
+  --van-doc-background-light: rgba(255, 255, 255, 0.06);
+  --van-doc-header-background: #011428;
+  --van-doc-border-color: #3a3a3c;
+  --van-doc-shadow-color: transparent;
+
+  // code
+  --van-doc-code-color: rgba(200, 200, 200, 0.85);
+  --van-doc-code-comment-color: var(--van-doc-gray-7);
+  --van-doc-code-background: rgba(0, 0, 0, 0.24);
+
+  // blockquote
+  --van-doc-blockquote-color: #bae6fd;
+  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
+}

packages/vant-cli/site/desktop/App.vue

@@ -8,6 +8,7 @@
       :simulator="simulator"
       :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
+      :support-dark-mode="supportDarkMode"
     >
       <router-view />
     </van-doc>
@@ -27,6 +28,7 @@ export default {
   data() {
     return {
       hasSimulator: true,
+      supportDarkMode: config.site.supportDarkMode,
     };
   },
 

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

@@ -18,18 +18,18 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-container {
   box-sizing: border-box;
-  padding-left: @van-doc-nav-width;
+  padding-left: var(--van-doc-nav-width);
   overflow: hidden;
 
   &--with-simulator {
-    padding-right: @van-doc-simulator-width + @van-doc-padding;
+    padding-right: calc(
+      var(--van-doc-simulator-width) + var(--van-doc-padding)
+    );
 
     @media (max-width: 1100px) {
-      padding-right: @van-doc-simulator-width - 8px;
+      padding-right: calc(var(--van-doc-simulator-width) - 8px);
     }
   }
 }

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

@@ -41,29 +41,27 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-card {
   margin-bottom: 24px;
   padding: 24px;
-  background-color: #fff;
-  border-radius: @van-doc-border-radius;
-  box-shadow: 0 8px 12px #ebedf0;
+  background-color: var(--van-doc-background-light);
+  border-radius: var(--van-doc-border-radius);
+  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
   > p a,
   > ul a,
   > table a,
   > blockquote a {
     margin: 0 1px;
-    color: @van-doc-blue;
+    color: var(--van-doc-link-color);
     -webkit-font-smoothing: auto;
 
     &:hover {
-      color: darken(@van-doc-blue, 10%);
+      opacity: 0.8;
     }
 
     &:active {
-      color: darken(@van-doc-blue, 20%);
+      opacity: 0.6;
     }
   }
 
@@ -71,7 +69,6 @@ export default {
   > h4,
   > h5,
   > h6 {
-    color: @van-doc-black;
     font-weight: normal;
     line-height: 1.6;
 
@@ -100,23 +97,19 @@ export default {
 
   > p {
     margin-top: 8px;
-  }
-
-  > p,
-  > blockquote p {
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
     strong {
-      color: black;
+      color: var(--van-doc-text-color-1);
     }
   }
 
   > table {
     width: 100%;
     margin-top: 12px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 14px;
     line-height: 1.5;
     border-collapse: collapse;
@@ -137,7 +130,7 @@ export default {
 
     td {
       padding: 8px;
-      border-top: 1px solid @van-doc-code-background-color;
+      border-top: 1px solid var(--van-doc-border-color);
 
       &:first-child {
         padding-left: 0;
@@ -146,10 +139,10 @@ export default {
         code {
           margin: 0;
           padding: 2px 6px;
-          color: @van-doc-blue;
+          color: var(--van-doc-blue);
           font-weight: 600;
           font-size: 11px;
-          background-color: fade(@van-doc-blue, 10%);
+          background-color: rgba(25, 137, 250, 0.15);
           border-radius: 20px;
         }
       }
@@ -161,9 +154,9 @@ export default {
 
     em {
       display: inline-block;
-      color: @van-doc-green;
+      color: var(--van-doc-green);
       font-size: 14px;
-      font-family: @van-doc-code-font-family;
+      font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
       font-style: normal;
       max-width: 300px;
       -webkit-font-smoothing: auto;
@@ -179,7 +172,7 @@ export default {
     position: relative;
     margin: 5px 0 5px 10px;
     padding-left: 15px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
@@ -191,7 +184,7 @@ export default {
       width: 6px;
       height: 6px;
       margin-top: 10px;
-      border: 1px solid @van-doc-dark-grey;
+      border: 1px solid currentColor;
       border-radius: 50%;
       content: '';
     }
@@ -221,15 +214,17 @@ export default {
   > blockquote {
     margin: 16px 0 0;
     padding: 16px;
-    background-color: #ecf9ff;
-    border-radius: @van-doc-border-radius;
+    font-size: 14px;
+    color: var(--van-doc-blockquote-color);
+    background-color: var(--van-doc-blockquote-background);
+    border-radius: var(--van-doc-border-radius);
   }
 
   > img,
   > p img {
     width: 100%;
     margin: 16px 0;
-    border-radius: @van-doc-border-radius;
+    border-radius: var(--van-doc-border-radius);
   }
 }
 
@@ -244,7 +239,6 @@ export default {
 
     h1,
     h2 {
-      color: @van-doc-black;
       font-weight: normal;
       line-height: 1.5;
 

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;

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

@@ -71,22 +71,20 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-nav {
   position: fixed;
   left: 0;
   z-index: 1;
-  min-width: @van-doc-nav-width;
-  max-width: @van-doc-nav-width;
-  padding: @van-doc-padding 0;
+  min-width: var(--van-doc-nav-width);
+  max-width: var(--van-doc-nav-width);
+  padding: 8px 0;
   overflow-y: scroll;
-  background-color: #fff;
-  box-shadow: 0 8px 12px #ebedf0;
+  background-color: var(--van-doc-background-light);
+  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     left: 50%;
-    margin-left: -(@van-doc-row-max-width / 2);
+    margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
   }
 
   &::-webkit-scrollbar {
@@ -110,8 +108,8 @@ export default {
   }
 
   &__title {
-    padding: 8px 0 8px @van-doc-padding;
-    color: #455a64;
+    padding: 24px 0 0 var(--van-doc-padding);
+    color: var(--van-doc-text-color-2);
     font-weight: 600;
     font-size: 15px;
     line-height: 28px;
@@ -121,21 +119,19 @@ export default {
     a {
       display: block;
       margin: 8px 0;
-      padding: 8px 0 8px @van-doc-padding;
-      color: #455a64;
+      padding: 6px 0 6px var(--van-doc-padding);
+      color: var(--van-doc-text-color-3);
       font-size: 14px;
       line-height: 20px;
       transition: color 0.2s;
 
       &:hover,
       &.active {
-        color: @van-doc-green;
+        color: var(--van-doc-link-color);
       }
 
       &.active {
         font-weight: 600;
-        background-color: #ebfff0;
-        border-radius: 999px;
       }
 
       span {

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

@@ -38,8 +38,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 #docsearch {
   display: inline-block;
   vertical-align: middle;

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

@@ -44,34 +44,32 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-simulator {
   position: absolute;
-  top: @van-doc-padding + @van-doc-header-top-height;
-  right: @van-doc-padding;
+  top: calc(var(--van-doc-padding) + var(--van-doc-header-top-height));
+  right: var(--van-doc-padding);
   z-index: 1;
   box-sizing: border-box;
-  width: @van-doc-simulator-width;
-  min-width: @van-doc-simulator-width;
+  width: var(--van-doc-simulator-width);
+  min-width: var(--van-doc-simulator-width);
   overflow: hidden;
-  background: #fafafa;
-  border-radius: @van-doc-border-radius;
-  box-shadow: 0 8px 12px #ebedf0;
+  background: var(--van-doc-background-light);
+  border-radius: var(--van-doc-border-radius);
+  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
   @media (max-width: 1100px) {
     right: auto;
     left: 750px;
   }
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     right: 50%;
-    margin-right: -(@van-doc-row-max-width / 2) + 24px;
+    margin-right: calc(var(--van-doc-row-max-width) / 2 * -1 + 24px);
   }
 
   &-fixed {
     position: fixed;
-    top: @van-doc-padding;
+    top: var(--van-doc-padding);
   }
 
   iframe {

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

@@ -5,6 +5,7 @@
       :config="config"
       :versions="versions"
       :lang-configs="langConfigs"
+      :support-dark-mode="supportDarkMode"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
@@ -39,8 +40,9 @@ export default {
     lang: String,
     versions: Array,
     simulator: String,
-    hasSimulator: Boolean,
     langConfigs: Array,
+    hasSimulator: Boolean,
+    supportDarkMode: Boolean,
     config: {
       type: Object,
       required: true,
@@ -108,7 +110,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-@import '../../common/style/var';
-</style>

packages/vant-cli/site/mobile/App.vue

@@ -18,7 +18,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../common/style/var';
 @import '../common/style/base';
 
 body {

packages/vant-cli/site/mobile/components/DemoBlock.vue

@@ -20,13 +20,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-demo-block {
   &__title {
     margin: 0;
     padding: 32px 16px 16px;
-    color: @van-doc-text-light-blue;
+    color: rgba(69, 90, 100, 0.6);
     font-weight: normal;
     font-size: 14px;
     line-height: 16px;

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -52,8 +52,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home {
   box-sizing: border-box;
   width: 100%;

packages/vant-cli/site/mobile/components/DemoHomeNav.vue

@@ -43,8 +43,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home-nav {
   &__title {
     margin: 24px 0 8px 16px;

packages/vant/docs/markdown/changelog-v4.zh-CN.md

@@ -6,6 +6,11 @@
 
 `2022-01-17`
 
+**Feature**
+
+- ConfigProvider: 新增 `theme` 属性，用于开启暗色模式
+- ConfigProvider: 新增 `ConfigProviderTheme` 类型
+
 **Style**
 
 以下组件的默认色值调整为 `--van-primary-color`：
@@ -23,4 +28,4 @@
 
 - Button: 默认圆角大小从 `2px` 调整为 `4px`
 - Button: 默认按钮的边框颜色调整为 `--van-gray-4`
-- Button: 调整 font-smoothing，默认使用粗体文字
+- Button: 调整 `font-smoothing`，默认使用粗体文字

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -11,6 +11,8 @@ import { kebabCase, makeStringProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('config-provider');
 
+export type ConfigProviderTheme = 'light' | 'dark';
+
 export type ConfigProviderProvide = {
   iconPrefix?: string;
 };
@@ -20,6 +22,7 @@ export const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide> =
 
 const configProviderProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  theme: makeStringProp<ConfigProviderTheme>('light'),
   themeVars: Object as PropType<Record<string, string | number>>,
   iconPrefix: String,
 };
@@ -49,7 +52,10 @@ export default defineComponent({
     provide(CONFIG_PROVIDER_KEY, props);
 
     return () => (
-      <props.tag class={bem()} style={style.value}>
+      <props.tag
+        class={[bem(), `van-theme-${props.theme}`]}
+        style={style.value}
+      >
         {slots.default?.()}
       </props.tag>
     );

packages/vant/src/config-provider/README.md

@@ -207,16 +207,17 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 
 ### Props
 
-| Attribute            | Description              | Type     | Default    |
-| -------------------- | ------------------------ | -------- | ---------- |
-| theme-vars           | Theme variables          | _object_ | -          |
-| tag `v3.1.2`         | HTML Tag of root element | _string_ | `div`      |
-| icon-prefix `v3.1.3` | Icon className prefix    | _string_ | `van-icon` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| theme | Theme mode, can be set to `dark` | _ConfigProviderTheme_ | `light` |
+| theme-vars | Theme variables | _object_ | - |
+| tag `v3.1.2` | HTML Tag of root element | _string_ | `div` |
+| icon-prefix `v3.1.3` | Icon className prefix | _string_ | `van-icon` |
 
 ### Types
 
 The component exports the following type definitions:
 
 ```ts
-import type { ConfigProviderProps } from 'vant';
+import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
 ```

packages/vant/src/config-provider/README.zh-CN.md

@@ -213,7 +213,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| theme-vars | 自定义主题变量 | _object_ | - |
+| theme | 主题风格，设置为 `dark` 来开启暗色模式，局部生效 | _ConfigProviderTheme_ | `light` |
+| theme-vars | 自定义主题变量，局部生效 | _object_ | - |
 | tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div` |
 | icon-prefix `v3.1.3` | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
@@ -222,5 +223,5 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 组件导出以下类型定义：
 
 ```ts
-import type { ConfigProviderProps } from 'vant';
+import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
 ```

packages/vant/src/config-provider/index.ts

@@ -3,7 +3,10 @@ import _ConfigProvider from './ConfigProvider';
 
 export const ConfigProvider = withInstall(_ConfigProvider);
 export default ConfigProvider;
-export type { ConfigProviderProps } from './ConfigProvider';
+export type {
+  ConfigProviderProps,
+  ConfigProviderTheme,
+} from './ConfigProvider';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/vant.config.mjs

@@ -16,6 +16,7 @@ export default {
   },
   site: {
     defaultLang: 'en-US',
+    supportDarkMode: true,
     versions: [
       { label: 'v1', link: '/vant/v1/' },
       { label: 'v2', link: '/vant/' },