style(IndexBar): increase font weight of active index

packages/vant-cli/site/common/iframe-sync.js

@@ -1,7 +1,4 @@
-/**
- * 同步父窗口和 iframe 的 vue-router 状态
- */
-
+import { ref } from 'vue';
 import { config } from 'site-desktop-shared';
 
 let queue = [];
@@ -62,6 +59,49 @@ export function syncPathToChild() {
   }
 }
 
+export function syncThemeToChild(theme) {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(() => {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'updateTheme',
+          value: theme,
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function getDefaultTheme() {
+  const cache = window.localStorage.getItem('vantTheme');
+
+  if (cache) {
+    return cache;
+  }
+
+  const useDark =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return useDark ? 'dark' : 'light';
+}
+
+export function useCurrentTheme() {
+  const theme = ref(getDefaultTheme());
+
+  window.addEventListener('message', (event) => {
+    if (event.data?.type !== 'updateTheme') {
+      return;
+    }
+
+    const newTheme = event.data?.value || '';
+    theme.value = newTheme;
+  });
+
+  return theme;
+}
+
 export function listenToSyncPath(router) {
   window.addEventListener('message', (event) => {
     if (event.data?.type !== 'replacePath') {

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

@@ -1,6 +1,6 @@
-:root {
+body {
   // colors
-  --van-doc-black: #1a1a1a;
+  --van-doc-black: #000;
   --van-doc-white: #fff;
   --van-doc-gray-1: #f7f8fa;
   --van-doc-gray-2: #f2f3f5;
@@ -28,14 +28,15 @@
   --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-text-color-4: var(--van-doc-gray-6);
   --van-doc-link-color: var(--van-doc-blue);
 
   // background
-  --van-doc-background: #f7f8fa;
-  --van-doc-background-light: var(--van-doc-white);
+  --van-doc-background: #eeeff2;
+  --van-doc-background-2: var(--van-doc-white);
+  --van-doc-background-3: 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;
@@ -52,14 +53,15 @@
   --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-text-color-4: rgba(255, 255, 255, 0.6);
   --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-background: #202124;
+  --van-doc-background-2: rgba(255, 255, 255, 0.06);
+  --van-doc-background-3: rgba(255, 255, 255, 0.1);
+  --van-doc-header-background: rgba(1, 31, 60, 0.3);
   --van-doc-border-color: #3a3a3c;
-  --van-doc-shadow-color: transparent;
 
   // code
   --van-doc-code-color: rgba(200, 200, 200, 0.85);

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

@@ -8,7 +8,7 @@
       :simulator="simulator"
       :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
-      :support-dark-mode="supportDarkMode"
+      :dark-mode-class="darkModeClass"
     >
       <router-view />
     </van-doc>
@@ -28,7 +28,7 @@ export default {
   data() {
     return {
       hasSimulator: true,
-      supportDarkMode: config.site.supportDarkMode,
+      darkModeClass: config.site.darkModeClass,
     };
   },
 
@@ -72,18 +72,18 @@ export default {
   watch: {
     // eslint-disable-next-line
     '$route.path'() {
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     lang(val) {
       setLang(val);
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     config: {
       handler(val) {
         if (val) {
-          this.setTitleAndToogleSimulator();
+          this.setTitleAndToggleSimulator();
         }
       },
       immediate: true,
@@ -102,7 +102,7 @@ export default {
   },
 
   methods: {
-    setTitleAndToogleSimulator() {
+    setTitleAndToggleSimulator() {
       let { title } = this.config;
 
       const navItems = this.config.nav.reduce(

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

@@ -44,9 +44,8 @@ export default {
 .van-doc-card {
   margin-bottom: 24px;
   padding: 24px;
-  background-color: var(--van-doc-background-light);
+  background-color: var(--van-doc-background-2);
   border-radius: var(--van-doc-border-radius);
-  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
   > p a,
   > ul a,

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

@@ -21,7 +21,7 @@
             </a>
           </li>
 
-          <li v-if="supportDarkMode" class="van-doc-header__top-nav-item">
+          <li v-if="darkModeClass" class="van-doc-header__top-nav-item">
             <a
               class="van-doc-header__link"
               target="_blank"
@@ -76,6 +76,7 @@
 <script>
 import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
+import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
@@ -89,12 +90,12 @@ export default {
     config: Object,
     versions: Array,
     langConfigs: Array,
-    supportDarkMode: Boolean,
+    darkModeClass: String,
   },
 
   data() {
     return {
-      currentTheme: this.getDefaultTheme(),
+      currentTheme: getDefaultTheme(),
       packageVersion,
       showVersionPop: false,
     };
@@ -136,16 +137,13 @@ export default {
         window.localStorage.setItem('vantTheme', newVal);
         document.body.classList.remove(`van-doc-theme-${oldVal}`);
         document.body.classList.add(`van-doc-theme-${newVal}`);
+        syncThemeToChild(newVal);
       },
       immediate: true,
     },
   },
 
   methods: {
-    getDefaultTheme() {
-      return window.localStorage.getItem('vantTheme') || 'light';
-    },
-
     toggleTheme() {
       this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
     },

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

@@ -79,8 +79,7 @@ export default {
   max-width: var(--van-doc-nav-width);
   padding: 8px 0;
   overflow-y: scroll;
-  background-color: var(--van-doc-background-light);
-  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
+  background-color: var(--van-doc-background-2);
 
   @media (min-width: var(--van-doc-row-max-width)) {
     left: 50%;

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

@@ -53,9 +53,8 @@ export default {
   width: var(--van-doc-simulator-width);
   min-width: var(--van-doc-simulator-width);
   overflow: hidden;
-  background: var(--van-doc-background-light);
+  background: var(--van-doc-background-2);
   border-radius: var(--van-doc-border-radius);
-  box-shadow: 0 8px 12px var(--van-doc-shadow-color);
 
   @media (max-width: 1100px) {
     right: auto;

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

@@ -5,7 +5,7 @@
       :config="config"
       :versions="versions"
       :lang-configs="langConfigs"
-      :support-dark-mode="supportDarkMode"
+      :dark-mode-class="darkModeClass"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
@@ -42,7 +42,7 @@ export default {
     simulator: String,
     langConfigs: Array,
     hasSimulator: Boolean,
-    supportDarkMode: Boolean,
+    darkModeClass: String,
     config: {
       type: Object,
       required: true,

packages/vant-cli/site/desktop/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-sync';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);

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

@@ -10,10 +10,31 @@
 </template>
 
 <script>
+import { watch } from 'vue';
 import DemoNav from './components/DemoNav.vue';
+import { useCurrentTheme } from '../common/iframe-sync';
+import { config } from 'site-mobile-shared';
 
 export default {
   components: { DemoNav },
+
+  setup() {
+    const theme = useCurrentTheme();
+
+    watch(
+      theme,
+      (newVal, oldVal) => {
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+
+        const { darkModeClass } = config.site;
+        if (darkModeClass) {
+          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+        }
+      },
+      { immediate: true }
+    );
+  },
 };
 </script>
 
@@ -24,6 +45,14 @@ body {
   min-width: 100vw;
 }
 
+.van-doc-theme-light {
+  background-color: var(--van-doc-gray-1);
+}
+
+.van-doc-theme-dark {
+  background-color: var(--van-doc-black);
+}
+
 ::-webkit-scrollbar {
   width: 0;
   background: transparent;

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

@@ -24,7 +24,7 @@ export default {
   &__title {
     margin: 0;
     padding: 32px 16px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-weight: normal;
     font-size: 14px;
     line-height: 16px;

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

@@ -57,7 +57,6 @@ export default {
   width: 100%;
   min-height: 100vh;
   padding: 46px 20px 20px;
-  background: #fff;
 
   &__title,
   &__desc {
@@ -92,7 +91,7 @@ export default {
 
   &__desc {
     margin: 0 0 40px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 }

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

@@ -46,7 +46,7 @@ export default {
 .demo-home-nav {
   &__title {
     margin: 24px 0 8px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 
@@ -55,20 +55,20 @@ export default {
     display: flex;
     margin: 0 0 12px;
     padding-left: 20px;
-    color: #323233;
+    color: var(--van-doc-text-color-3);
     font-weight: 600;
     font-size: 14px;
     line-height: 40px;
-    background: #f7f8fa;
+    background-color: var(--van-doc-background-3);
     border-radius: 99px;
-    transition: background 0.3s;
+    transition: opacity 0.3s;
 
     &:hover {
-      background: darken(#f7f8fa, 3%);
+      opacity: 0.8;
     }
 
     &:active {
-      background: darken(#f7f8fa, 6%);
+      opacity: 0.6;
     }
   }
 

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

@@ -42,7 +42,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: #fff;
+  background-color: var(--van-doc-background-3);
 
   &__title {
     font-weight: 600;

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome.vue';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-sync';
 
 const { locales, defaultLang } = config.site;
 

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

@@ -29,3 +29,5 @@
 - Button: 默认圆角大小从 `2px` 调整为 `4px`
 - Button: 默认按钮的边框颜色调整为 `--van-gray-4`
 - Button: 调整 `font-smoothing`，默认使用粗体文字
+- Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
+- Tabbar: 调整 `--van-tabbar-item-text-color` 变量的默认值为 `--van-text-color`

packages/vant/docs/markdown/changelog.en-US.md

@@ -16,6 +16,21 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
+### [v3.4.3](https://github.com/compare/v3.4.2...v3.4.3)
+
+`2022-01-26`
+
+**Feature**
+
+- Locale: add Hindi translation [#10248](https://github.com/issues/10248)
+- Locale: add Korean translations [#10243](https://github.com/issues/10243)
+- improve cursor of haptics elements [#10232](https://github.com/issues/10232)
+
+**Bug Fixes**
+
+- Icon: remove white space under image when using image URL [#10220](https://github.com/issues/10220)
+- TreeSelect: click-nav event not work when clicking active item [#10239](https://github.com/issues/10239)
+
 ### [v3.4.2](https://github.com/compare/v3.4.1...v3.4.2)
 
 `2022-01-17`

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

@@ -16,6 +16,21 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
+### [v3.4.3](https://github.com/compare/v3.4.2...v3.4.3)
+
+`2022-01-26`
+
+**Feature**
+
+- Locale: 新增 Hindi 印地语 [#10248](https://github.com/issues/10248)
+- Locale: 新增 Korean 韩语 [#10243](https://github.com/issues/10243)
+- 优化 cursor 样式 [#10232](https://github.com/issues/10232)
+
+**Bug Fixes**
+
+- Icon: 修复使用图片作为图标时水平未对齐的问题 [#10220](https://github.com/issues/10220)
+- TreeSelect: 修复重复点击时无法触发 click-nav 事件的问题 [#10239](https://github.com/issues/10239)
+
 ### [v3.4.2](https://github.com/compare/v3.4.1...v3.4.2)
 
 `2022-01-17`

packages/vant/docs/markdown/migrate-from-v3.zh-CN.md

@@ -67,6 +67,7 @@ animation-duration               ->  duration
 animation-timing-function-enter  ->  ease-out
 animation-timing-function-leave  ->  ease-in
 background-color                 ->  background
+background-color-light           ->  background-2
 border-radius                    ->  radius
 border-width-base                ->  border-width
 box-shadow                       ->  shadow

packages/vant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.js",
@@ -66,7 +66,7 @@
   "dependencies": {
     "@vant/icons": "^1.7.1",
     "@vant/popperjs": "^1.1.0",
-    "@vant/use": "^1.3.4"
+    "@vant/use": "^1.3.5"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vant/src/action-bar-button/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-action-bar-button-height: 40px;
   --van-action-bar-button-warning-color: var(--van-gradient-orange);
   --van-action-bar-button-danger-color: var(--van-gradient-red);

packages/vant/src/action-bar-icon/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-action-bar-icon-width: 48px;
   --van-action-bar-icon-height: 100%;
   --van-action-bar-icon-color: var(--van-text-color);
@@ -6,7 +6,7 @@
   --van-action-bar-icon-font-size: var(--van-font-size-xs);
   --van-action-bar-icon-active-color: var(--van-active-color);
   --van-action-bar-icon-text-color: var(--van-gray-7);
-  --van-action-bar-icon-background: var(--van-background-light);
+  --van-action-bar-icon-background: var(--van-background-2);
 }
 
 .van-action-bar-icon {

packages/vant/src/action-bar/README.md

@@ -154,7 +154,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-action-bar-background | _var(--van-background-light)_ | - |
+| --van-action-bar-background | _var(--van-background-2)_ | - |
 | --van-action-bar-height | _50px_ | - |
 | --van-action-bar-icon-width | _48px_ | - |
 | --van-action-bar-icon-height | _100%_ | - |
@@ -163,7 +163,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
 | --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
 | --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
-| --van-action-bar-icon-background | _var(--van-background-light)_ | - |
+| --van-action-bar-icon-background | _var(--van-background-2)_ | - |
 | --van-action-bar-button-height | _40px_ | - |
 | --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
 | --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |

packages/vant/src/action-bar/README.zh-CN.md

@@ -156,18 +156,18 @@ import type {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                  | 默认值                        | 描述 |
-| ------------------------------------- | ----------------------------- | ---- |
-| --van-action-bar-background           | _var(--van-background-light)_ | -    |
-| --van-action-bar-height               | _50px_                        | -    |
-| --van-action-bar-icon-width           | _48px_                        | -    |
-| --van-action-bar-icon-height          | _100%_                        | -    |
-| --van-action-bar-icon-color           | _var(--van-text-color)_       | -    |
-| --van-action-bar-icon-size            | _18px_                        | -    |
-| --van-action-bar-icon-font-size       | _var(--van-font-size-xs)_     | -    |
-| --van-action-bar-icon-active-color    | _var(--van-active-color)_     | -    |
-| --van-action-bar-icon-text-color      | _var(--van-gray-7)_           | -    |
-| --van-action-bar-icon-background      | _var(--van-background-light)_ | -    |
-| --van-action-bar-button-height        | _40px_                        | -    |
-| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_  | -    |
-| --van-action-bar-button-danger-color  | _var(--van-gradient-red)_     | -    |
+| 名称                                  | 默认值                       | 描述 |
+| ------------------------------------- | ---------------------------- | ---- |
+| --van-action-bar-background           | _var(--van-background-2)_    | -    |
+| --van-action-bar-height               | _50px_                       | -    |
+| --van-action-bar-icon-width           | _48px_                       | -    |
+| --van-action-bar-icon-height          | _100%_                       | -    |
+| --van-action-bar-icon-color           | _var(--van-text-color)_      | -    |
+| --van-action-bar-icon-size            | _18px_                       | -    |
+| --van-action-bar-icon-font-size       | _var(--van-font-size-xs)_    | -    |
+| --van-action-bar-icon-active-color    | _var(--van-active-color)_    | -    |
+| --van-action-bar-icon-text-color      | _var(--van-gray-7)_          | -    |
+| --van-action-bar-icon-background      | _var(--van-background-2)_    | -    |
+| --van-action-bar-button-height        | _40px_                       | -    |
+| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | -    |
+| --van-action-bar-button-danger-color  | _var(--van-gradient-red)_    | -    |

packages/vant/src/action-bar/index.less

@@ -1,5 +1,5 @@
-:root {
-  --van-action-bar-background: var(--van-background-light);
+body {
+  --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }
 

packages/vant/src/action-sheet/README.md

@@ -247,7 +247,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-description-color | _var(--van-text-color-2)_ | - |
 | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
 | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
-| --van-action-sheet-item-background | _var(--van-background-light)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-2)_ | - |
 | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
 | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
 | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |

packages/vant/src/action-sheet/README.zh-CN.md

@@ -259,7 +259,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-description-color | _var(--van-text-color-2)_ | - |
 | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
 | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
-| --van-action-sheet-item-background | _var(--van-background-light)_ | - |
+| --van-action-sheet-item-background | _var(--van-background-2)_ | - |
 | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
 | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
 | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |

packages/vant/src/action-sheet/index.less

@@ -1,13 +1,13 @@
 @import '../style/mixins/hairline';
 
-:root {
+body {
   --van-action-sheet-max-height: 80%;
   --van-action-sheet-header-height: 48px;
   --van-action-sheet-header-font-size: var(--van-font-size-lg);
   --van-action-sheet-description-color: var(--van-text-color-2);
   --van-action-sheet-description-font-size: var(--van-font-size-md);
   --van-action-sheet-description-line-height: var(--van-line-height-md);
-  --van-action-sheet-item-background: var(--van-background-light);
+  --van-action-sheet-item-background: var(--van-background-2);
   --van-action-sheet-item-font-size: var(--van-font-size-lg);
   --van-action-sheet-item-line-height: var(--van-line-height-lg);
   --van-action-sheet-item-text-color: var(--van-text-color);

packages/vant/src/address-edit/AddressEditDetail.tsx

@@ -11,7 +11,8 @@ import { Field } from '../field';
 import type { AddressEditSearchItem } from './types';
 import type { FieldRule, FieldInstance } from '../field/types';
 
-const [name, bem, t] = createNamespace('address-edit-detail');
+const [name, bem] = createNamespace('address-edit-detail');
+const t = createNamespace('address-edit')[2];
 
 export default defineComponent({
   name,
@@ -89,11 +90,11 @@ export default defineComponent({
               rows={props.rows}
               type="textarea"
               rules={props.rules}
-              label={t('label')}
+              label={t('addressDetail')}
               border={!showSearchResult()}
               maxlength={props.maxlength}
               modelValue={props.value}
-              placeholder={t('placeholder')}
+              placeholder={t('addressDetail')}
               onBlur={onBlur}
               onFocus={onFocus}
               onUpdate:modelValue={onInput}

packages/vant/src/address-edit/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-address-edit-padding: var(--van-padding-sm);
   --van-address-edit-buttons-padding: var(--van-padding-xl)
     var(--van-padding-base);

packages/vant/src/address-list/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-address-list-disabled-text-color: var(--van-text-color-2);
   --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;
@@ -28,7 +28,7 @@
     width: 100%;
     padding-left: var(--van-padding-md);
     padding-right: var(--van-padding-md);
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__add {
@@ -46,7 +46,7 @@
 
 .van-address-item {
   padding: var(--van-address-list-item-padding);
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
   border-radius: var(--van-radius-lg);
 
   &:not(:last-child) {

packages/vant/src/badge/demo/index.vue

@@ -102,7 +102,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-badge {
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-badge__wrapper {
     margin-left: var(--van-padding-md);

packages/vant/src/badge/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-badge-size: 16px;
   --van-badge-color: var(--van-white);
   --van-badge-padding: 0 3px;
@@ -23,7 +23,7 @@
   line-height: 1.2;
   text-align: center;
   background: var(--van-badge-background);
-  border: var(--van-badge-border-width) solid var(--van-background-light);
+  border: var(--van-badge-border-width) solid var(--van-background-2);
   border-radius: var(--van-radius-max);
 
   &--fixed {

packages/vant/src/button/README.md

@@ -184,7 +184,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-button-default-line-height | _1.2_ | - |
 | --van-button-default-font-size | _var(--van-font-size-lg)_ | - |
 | --van-button-default-color | _var(--van-text-color)_ | - |
-| --van-button-default-background | _var(--van-background-light)_ | - |
+| --van-button-default-background | _var(--van-background-2)_ | - |
 | --van-button-default-border-color | _var(--van-gray-4)_ | - |
 | --van-button-primary-color | _var(--van-white)_ | - |
 | --van-button-primary-background | _var(--van-primary-color)_ | - |

packages/vant/src/button/README.zh-CN.md

@@ -207,7 +207,7 @@ import type {
 | --van-button-default-line-height  | _1.2_                         | -    |
 | --van-button-default-font-size    | _var(--van-font-size-lg)_     | -    |
 | --van-button-default-color        | _var(--van-text-color)_       | -    |
-| --van-button-default-background   | _var(--van-background-light)_ | -    |
+| --van-button-default-background   | _var(--van-background-2)_     | -    |
 | --van-button-default-border-color | _var(--van-gray-4)_           | -    |
 | --van-button-primary-color        | _var(--van-white)_            | -    |
 | --van-button-primary-background   | _var(--van-primary-color)_    | -    |

packages/vant/src/button/demo/index.vue

@@ -144,8 +144,6 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-button {
-  background: var(--van-background-light);
-
   .van-button {
     &--large {
       margin-bottom: var(--van-padding-md);

packages/vant/src/button/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-button-mini-height: 24px;
   --van-button-mini-padding: 0 var(--van-padding-base);
   --van-button-mini-font-size: var(--van-font-size-xs);
@@ -12,7 +12,7 @@
   --van-button-default-line-height: 1.2;
   --van-button-default-font-size: var(--van-font-size-lg);
   --van-button-default-color: var(--van-text-color);
-  --van-button-default-background: var(--van-background-light);
+  --van-button-default-background: var(--van-background-2);
   --van-button-default-border-color: var(--van-gray-4);
   --van-button-primary-color: var(--van-white);
   --van-button-primary-background: var(--van-primary-color);
@@ -35,6 +35,10 @@
   --van-button-loading-icon-size: 20px;
 }
 
+.van-theme-dark {
+  --van-button-plain-background: transparent;
+}
+
 .van-button {
   position: relative;
   display: inline-block;

packages/vant/src/calendar/CalendarMonth.tsx

@@ -178,7 +178,7 @@ export default defineComponent({
           return t(dayType);
         }
         if (dayType === 'start-end') {
-          return t('startEnd');
+          return `${t('start')}/${t('end')}`;
         }
       }
     };

packages/vant/src/calendar/README.md

@@ -381,7 +381,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-calendar-background | _var(--van-background-light)_ | - |
+| --van-calendar-background | _var(--van-background-2)_ | - |
 | --van-calendar-popup-height | _80%_ | - |
 | --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
 | --van-calendar-header-title-height | _44px_ | - |

packages/vant/src/calendar/README.zh-CN.md

@@ -387,7 +387,7 @@ calendarRef.value?.reset();
 
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
-| --van-calendar-background | _var(--van-background-light)_ | - |
+| --van-calendar-background | _var(--van-background-2)_ | - |
 | --van-calendar-popup-height | _80%_ | - |
 | --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
 | --van-calendar-header-title-height | _44px_ | - |

packages/vant/src/calendar/index.less

@@ -1,5 +1,5 @@
-:root {
-  --van-calendar-background: var(--van-background-light);
+body {
+  --van-calendar-background: var(--van-background-2);
   --van-calendar-popup-height: 80%;
   --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
   --van-calendar-header-title-height: 44px;
@@ -26,6 +26,11 @@
   --van-calendar-confirm-button-margin: 7px 0;
 }
 
+.van-theme-dark {
+  --van-calendar-month-mark-color: rgba(100, 101, 102, 0.2);
+  --van-calendar-day-disabled-color: var(--van-gray-7);
+}
+
 .van-calendar {
   display: flex;
   flex-direction: column;

packages/vant/src/card/demo/index.vue

@@ -71,6 +71,6 @@ const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 
 <style lang="less">
 .demo-card {
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 }
 </style>

packages/vant/src/card/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-card-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-card-font-size: var(--van-font-size-sm);
   --van-card-text-color: var(--van-text-color);

packages/vant/src/cascader/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-cascader-header-height: 48px;
   --van-cascader-header-padding: 0 var(--van-padding-md);
   --van-cascader-title-font-size: var(--van-font-size-lg);

packages/vant/src/cell-group/index.less

@@ -1,5 +1,5 @@
-:root {
-  --van-cell-group-background: var(--van-background-light);
+body {
+  --van-cell-group-background: var(--van-background-2);
   --van-cell-group-title-color: var(--van-text-color-2);
   --van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);
   --van-cell-group-title-font-size: var(--van-font-size-md);

packages/vant/src/cell/README.md

@@ -218,7 +218,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cell-vertical-padding | _10px_ | - |
 | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
 | --van-cell-text-color | _var(--van-text-color)_ | - |
-| --van-cell-background | _var(--van-background-light)_ | - |
+| --van-cell-background | _var(--van-background-2)_ | - |
 | --van-cell-border-color | _var(--van-border-color)_ | - |
 | --van-cell-active-color | _var(--van-active-color)_ | - |
 | --van-cell-required-color | _var(--van-danger-color)_ | - |
@@ -232,7 +232,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
 | --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-group-background | _var(--van-background-light)_ | - |
+| --van-cell-group-background | _var(--van-background-2)_ | - |
 | --van-cell-group-title-color | _var(--van-text-color-2)_ | - |
 | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
 | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |

packages/vant/src/cell/README.zh-CN.md

@@ -223,7 +223,7 @@ import type {
 | --van-cell-vertical-padding | _10px_ | - |
 | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
 | --van-cell-text-color | _var(--van-text-color)_ | - |
-| --van-cell-background | _var(--van-background-light)_ | - |
+| --van-cell-background | _var(--van-background-2)_ | - |
 | --van-cell-border-color | _var(--van-border-color)_ | - |
 | --van-cell-active-color | _var(--van-active-color)_ | - |
 | --van-cell-required-color | _var(--van-danger-color)_ | - |
@@ -237,7 +237,7 @@ import type {
 | --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
 | --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-group-background | _var(--van-background-light)_ | - |
+| --van-cell-group-background | _var(--van-background-2)_ | - |
 | --van-cell-group-title-color | _var(--van-text-color-2)_ | - |
 | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
 | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |

packages/vant/src/cell/index.less

@@ -1,12 +1,12 @@
 @import '../style/mixins/hairline';
 
-:root {
+body {
   --van-cell-font-size: var(--van-font-size-md);
   --van-cell-line-height: 24px;
   --van-cell-vertical-padding: 10px;
   --van-cell-horizontal-padding: var(--van-padding-md);
   --van-cell-text-color: var(--van-text-color);
-  --van-cell-background: var(--van-background-light);
+  --van-cell-background: var(--van-background-2);
   --van-cell-border-color: var(--van-border-color);
   --van-cell-active-color: var(--van-active-color);
   --van-cell-required-color: var(--van-danger-color);

packages/vant/src/checkbox/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-checkbox-size: 20px;
   --van-checkbox-border-color: var(--van-gray-5);
   --van-checkbox-duration: var(--van-duration-fast);

packages/vant/src/circle/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-circle-size: 100px;
   --van-circle-color: var(--van-primary-color);
   --van-circle-layer-color: var(--van-white);

packages/vant/src/col/demo/index.vue

@@ -70,8 +70,6 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-col {
-  background: var(--van-background-light);
-
   .van-doc-demo-block {
     padding: 0 var(--van-padding-md);
   }

packages/vant/src/collapse-item/index.less

@@ -1,13 +1,13 @@
 @import '../style/mixins/hairline';
 
-:root {
+body {
   --van-collapse-item-duration: var(--van-duration-base);
   --van-collapse-item-content-padding: var(--van-padding-sm)
     var(--van-padding-md);
   --van-collapse-item-content-font-size: var(--van-font-size-md);
   --van-collapse-item-content-line-height: 1.5;
   --van-collapse-item-content-text-color: var(--van-text-color-2);
-  --van-collapse-item-content-background: var(--van-background-light);
+  --van-collapse-item-content-background: var(--van-background-2);
   --van-collapse-item-title-disabled-color: var(--van-text-color-3);
 }
 

packages/vant/src/collapse/README.md

@@ -197,5 +197,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
 | --van-collapse-item-content-line-height | _1.5_ | - |
 | --van-collapse-item-content-text-color | _var(--van-text-color-2)_ | - |
-| --van-collapse-item-content-background | _var(--van-background-light)_ | - |
+| --van-collapse-item-content-background | _var(--van-background-2)_ | - |
 | --van-collapse-item-title-disabled-color | _var(--van-text-color-3)_ | - |

packages/vant/src/collapse/README.zh-CN.md

@@ -213,5 +213,5 @@ collapseItemRef.value?.toggle();
 | --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
 | --van-collapse-item-content-line-height | _1.5_ | - |
 | --van-collapse-item-content-text-color | _var(--van-text-color-2)_ | - |
-| --van-collapse-item-content-background | _var(--van-background-light)_ | - |
+| --van-collapse-item-content-background | _var(--van-background-2)_ | - |
 | --van-collapse-item-title-disabled-color | _var(--van-text-color-3)_ | - |

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

@@ -1,4 +1,5 @@
 import {
+  watch,
   provide,
   computed,
   defineComponent,
@@ -7,7 +8,12 @@ import {
   type CSSProperties,
   type ExtractPropTypes,
 } from 'vue';
-import { kebabCase, makeStringProp, createNamespace } from '../utils';
+import {
+  inBrowser,
+  kebabCase,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 
 const [name, bem] = createNamespace('config-provider');
 
@@ -49,13 +55,20 @@ export default defineComponent({
       }
     });
 
+    if (inBrowser) {
+      watch(
+        () => props.theme,
+        (newVal, oldVal) => {
+          document.body.classList.remove(`van-theme-${oldVal}`);
+          document.body.classList.add(`van-theme-${newVal}`);
+        }
+      );
+    }
+
     provide(CONFIG_PROVIDER_KEY, props);
 
     return () => (
-      <props.tag
-        class={[bem(), `van-theme-${props.theme}`]}
-        style={style.value}
-      >
+      <props.tag class={bem()} style={style.value}>
         {slots.default?.()}
       </props.tag>
     );

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

@@ -33,10 +33,10 @@ Looking at the style of the Button component, you can see that the following var
 }
 ```
 
-The default values of these variables are defined on the `root` node:
+The default values of these variables are defined on the `body` node:
 
 ```css
-:root {
+body {
   --van-white: #fff;
   --van-blue: #1989fa;
   --van-button-primary-color: var(--van-white);
@@ -52,7 +52,7 @@ You can directly override these CSS variables in the code, and the style of the
 
 ```css
 /* the Primary Button will turn red */
-:root {
+body {
   --van-button-primary-background: red;
 }
 ```
@@ -120,8 +120,8 @@ CSS variables in Vant are divided into **basic variables** and **component varia
 
 #### Modify Basic Variables
 
-- The basic variables can only be modified through the `root` selector.
-- The component variables can be modified through the `root` selector and `ConfigProvider` component.
+- The basic variables can only be modified through the `body` selector.
+- The component variables can be modified through the `body` selector and `ConfigProvider` component.
 
 #### Variable List
 
@@ -163,7 +163,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background: var(--van-gray-1);
---van-background-light: var(--van-white);
+--van-background-2: var(--van-white);
 
 // Padding
 --van-padding-base: 4px;

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

@@ -33,10 +33,10 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 }
 ```
 
-这些变量的默认值被定义在 `root` 节点上，HTML 文档的任何节点都可以访问到这些变量：
+这些变量的默认值被定义在 `body` 节点上，body 下所有子节点都可以访问到这些变量：
 
 ```css
-:root {
+body {
   --van-white: #fff;
   --van-blue: #1989fa;
   --van-button-primary-color: var(--van-white);
@@ -52,7 +52,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 
 ```css
 /* 添加这段样式后，Primary Button 会变成红色 */
-:root {
+body {
   --van-button-primary-background: red;
 }
 ```
@@ -112,7 +112,7 @@ export default {
 };
 ```
 
-> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
+> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 body 节点。
 
 ### 基础变量
 
@@ -122,8 +122,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
 
-- 基础变量只能通过 `root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
-- 组件变量可以通过 `root 选择器` 和 `ConfigProvider 组件` 修改。
+- 基础变量只能通过 `body 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
+- 组件变量可以通过 `body 选择器` 和 `ConfigProvider 组件` 修改。
 
 #### 变量列表
 
@@ -165,7 +165,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background: var(--van-gray-1);
---van-background-light: var(--van-white);
+--van-background-2: var(--van-white);
 
 // Padding
 --van-padding-base: 4px;
@@ -213,7 +213,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| theme | 主题风格，设置为 `dark` 来开启暗色模式，局部生效 | _ConfigProviderTheme_ | `light` |
+| 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` |

packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap

@@ -122,7 +122,7 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-config-provider"
-       style="--van-rate-icon-full-color: #07c160; --van-slider-bar-height: 4px; --van-slider-button-width: 20px; --van-slider-button-height: 20px; --van-slider-active-background-color: #07c160; --van-button-primary-border-color: #07c160; --van-button-primary-background-color: #07c160;"
+       style="--van-rate-icon-full-color: #07c160; --van-slider-bar-height: 4px; --van-slider-button-width: 20px; --van-slider-button-height: 20px; --van-slider-active-background: #07c160; --van-button-primary-border-color: #07c160; --van-button-primary-background: #07c160;"
   >
     <form class="van-form">
       <div class="van-cell van-field">

packages/vant/src/contact-card/ContactCard.tsx

@@ -32,7 +32,7 @@ export default defineComponent({
 
     const renderContent = () => {
       if (props.type === 'add') {
-        return props.addText || t('addText');
+        return props.addText || t('addContact');
       }
 
       return [

packages/vant/src/contact-card/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-contact-card-padding: var(--van-padding-md);
   --van-contact-card-add-icon-size: 40px;
   --van-contact-card-add-icon-color: var(--van-primary-color);

packages/vant/src/contact-card/test/__snapshots__/demo.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-add-square van-cell__left-icon">
     </i>
     <div class="van-cell__value van-cell__value--alone van-contact-card__value">
-      Add contact info
+      Add contact
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>

packages/vant/src/contact-edit/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-contact-edit-padding: var(--van-padding-md);
   --van-contact-edit-fields-radius: var(--van-radius-md);
   --van-contact-edit-buttons-padding: var(--van-padding-xl) 0;

packages/vant/src/contact-list/ContactList.tsx

@@ -100,7 +100,7 @@ export default defineComponent({
             block
             type="danger"
             class={bem('add')}
-            text={props.addText || t('addText')}
+            text={props.addText || t('addContact')}
             onClick={() => emit('add')}
           />
         </div>

packages/vant/src/contact-list/demo/index.vue

@@ -75,7 +75,7 @@ const onSelect = (contact: { id: string }) => {
 .demo-contact-card {
   .van-popup {
     height: 100%;
-    background-color: var(--van-background-color);
+    background-color: var(--van-background);
   }
 }
 </style>

packages/vant/src/contact-list/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-contact-list-edit-icon-size: 16px;
   --van-contact-list-add-button-z-index: 999;
   --van-contact-list-item-padding: var(--van-padding-md);
@@ -55,7 +55,7 @@
     z-index: var(--van-contact-list-add-button-z-index);
     padding-left: var(--van-padding-md);
     padding-right: var(--van-padding-md);
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__add {

packages/vant/src/contact-list/test/__snapshots__/demo.spec.ts.snap

@@ -62,7 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div class="van-button__content">
           <span class="van-button__text">
-            Add new contact
+            Add contact
           </span>
         </div>
       </button>

packages/vant/src/contact-list/test/__snapshots__/index.spec.ts.snap

@@ -39,7 +39,7 @@ exports[`should render ContactList correctly 1`] = `
     >
       <div class="van-button__content">
         <span class="van-button__text">
-          Add new contact
+          Add contact
         </span>
       </div>
     </button>

packages/vant/src/count-down/demo/index.vue

@@ -91,7 +91,7 @@ const onFinish = () => Toast(t('finished'));
 
 <style lang="less">
 .demo-count-down {
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-count-down {
     margin-left: var(--van-padding-md);

packages/vant/src/count-down/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-count-down-text-color: var(--van-text-color);
   --van-count-down-font-size: var(--van-font-size-md);
   --van-count-down-line-height: var(--van-line-height-md);

packages/vant/src/coupon-cell/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-coupon-cell-selected-text-color: var(--van-text-color);
 }
 

packages/vant/src/coupon-list/README.md

@@ -169,7 +169,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-coupon-content-height | _84px_ | - |
 | --van-coupon-content-padding | _14px 0_ | - |
 | --van-coupon-content-text-color | _var(--van-text-color)_ | - |
-| --van-coupon-background | _var(--van-background-light)_ | - |
+| --van-coupon-background | _var(--van-background-2)_ | - |
 | --van-coupon-active-background | _var(--van-active-color)_ | - |
 | --van-coupon-radius | _var(--van-radius-lg)_ | - |
 | --van-coupon-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |

packages/vant/src/coupon-list/README.zh-CN.md

@@ -52,7 +52,7 @@ export default {
   setup() {
     const coupon = {
       available: 1,
-      condition: '无使用门槛\n最多优惠12元',
+      condition: '无门槛\n最多优惠12元',
       reason: '',
       value: 150,
       name: '优惠券名称',
@@ -171,7 +171,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
 | --van-coupon-content-height | _84px_ | - |
 | --van-coupon-content-padding | _14px 0_ | - |
 | --van-coupon-content-text-color | _var(--van-text-color)_ | - |
-| --van-coupon-background | _var(--van-background-light)_ | - |
+| --van-coupon-background | _var(--van-background-2)_ | - |
 | --van-coupon-active-background | _var(--van-active-color)_ | - |
 | --van-coupon-radius | _var(--van-radius-lg)_ | - |
 | --van-coupon-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |

packages/vant/src/coupon-list/demo/index.vue

@@ -35,7 +35,7 @@ const exchangedCoupons = ref<CouponInfo[]>([]);
 
 const coupon = computed(() => ({
   id: 1,
-  condition: '无使用门槛\n最多优惠12元',
+  condition: '无门槛\n最多优惠12元',
   reason: '',
   value: 150,
   name: t('coupon.name'),

packages/vant/src/coupon-list/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-coupon-list-background: var(--van-background);
   --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
   --van-coupon-list-exchange-button-height: 32px;
@@ -37,7 +37,7 @@
   &__exchange-bar {
     display: flex;
     align-items: center;
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__exchange {
@@ -72,7 +72,7 @@
     width: 100%;
     padding: 5px var(--van-padding-md);
     font-weight: var(--van-font-bold);
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
   }
 
   &__close {

packages/vant/src/coupon/index.less

@@ -1,11 +1,11 @@
 @import '../style/mixins/ellipsis';
 
-:root {
+body {
   --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
   --van-coupon-content-height: 84px;
   --van-coupon-content-padding: 14px 0;
   --van-coupon-content-text-color: var(--van-text-color);
-  --van-coupon-background: var(--van-background-light);
+  --van-coupon-background: var(--van-background-2);
   --van-coupon-active-background: var(--van-active-color);
   --van-coupon-radius: var(--van-radius-lg);
   --van-coupon-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

packages/vant/src/dialog/README.md

@@ -241,7 +241,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
 | --van-dialog-transition | _var(--van-duration-base)_ | - |
 | --van-dialog-radius | _16px_ | - |
-| --van-dialog-background | _var(--van-background-light)_ | - |
+| --van-dialog-background | _var(--van-background-2)_ | - |
 | --van-dialog-header-font-weight | _var(--van-font-bold)_ | - |
 | --van-dialog-header-line-height | _24px_ | - |
 | --van-dialog-header-padding-top | _26px_ | - |

packages/vant/src/dialog/README.zh-CN.md

@@ -293,7 +293,7 @@ import type {
 | --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
 | --van-dialog-transition | _var(--van-duration-base)_ | - |
 | --van-dialog-radius | _16px_ | - |
-| --van-dialog-background | _var(--van-background-light)_ | - |
+| --van-dialog-background | _var(--van-background-2)_ | - |
 | --van-dialog-header-font-weight | _var(--van-font-bold)_ | - |
 | --van-dialog-header-line-height | _24px_ | - |
 | --van-dialog-header-padding-top | _26px_ | - |

packages/vant/src/dialog/index.less

@@ -1,10 +1,10 @@
-:root {
+body {
   --van-dialog-width: 320px;
   --van-dialog-small-screen-width: 90%;
   --van-dialog-font-size: var(--van-font-size-lg);
   --van-dialog-transition: var(--van-duration-base);
   --van-dialog-radius: 16px;
-  --van-dialog-background: var(--van-background-light);
+  --van-dialog-background: var(--van-background-2);
   --van-dialog-header-font-weight: var(--van-font-bold);
   --van-dialog-header-line-height: 24px;
   --van-dialog-header-padding-top: 26px;

packages/vant/src/divider/demo/index.vue

@@ -58,7 +58,7 @@ const t = useTranslate({
 
 <style lang="less">
 .demo-divider {
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-doc-demo-block__title {
     padding-top: var(--van-padding-md);

packages/vant/src/divider/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-divider-margin: var(--van-padding-md) 0;
   --van-divider-text-color: var(--van-text-color-2);
   --van-divider-font-size: var(--van-font-size-md);

packages/vant/src/dropdown-item/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-dropdown-item-z-index: 10;
 }
 

packages/vant/src/dropdown-menu/README.md

@@ -233,7 +233,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --- | --- | --- |
 | --van-dropdown-menu-height | _48px_ | - |
-| --van-dropdown-menu-background | _var(--van-background-light)_ | - |
+| --van-dropdown-menu-background | _var(--van-background-2)_ | - |
 | --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
 | --van-dropdown-menu-title-font-size | _15px_ | - |
 | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |

packages/vant/src/dropdown-menu/README.zh-CN.md

@@ -237,7 +237,7 @@ dropdownItemRef.value?.toggle();
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
 | --van-dropdown-menu-height | _48px_ | - |
-| --van-dropdown-menu-background | _var(--van-background-light)_ | - |
+| --van-dropdown-menu-background | _var(--van-background-2)_ | - |
 | --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
 | --van-dropdown-menu-title-font-size | _15px_ | - |
 | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |

packages/vant/src/dropdown-menu/index.less

@@ -1,6 +1,6 @@
-:root {
+body {
   --van-dropdown-menu-height: 48px;
-  --van-dropdown-menu-background: var(--van-background-light);
+  --van-dropdown-menu-background: var(--van-background-2);
   --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
   --van-dropdown-menu-title-font-size: 15px;
   --van-dropdown-menu-title-text-color: var(--van-text-color);

packages/vant/src/empty/demo/index.vue

@@ -68,8 +68,6 @@ const active = ref('error');
 
 <style lang="less">
 .demo-empty {
-  background: var(--van-background-light);
-
   .custom-image {
     .van-empty__image {
       width: 90px;

packages/vant/src/empty/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-empty-padding: var(--van-padding-xl) 0;
   --van-empty-image-size: 160px;
   --van-empty-description-margin-top: var(--van-padding-md);

packages/vant/src/field/README.md

@@ -361,7 +361,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --- | --- | --- |
 | --van-field-label-width | _6.2em_ | - |
-| --van-field-label-color | _var(--van-gray-7)_ | - |
+| --van-field-label-color | _var(--van-text-color)_ | - |
 | --van-field-label-margin-right | _var(--van-padding-sm)_ | - |
 | --van-field-input-text-color | _var(--van-text-color)_ | - |
 | --van-field-input-error-text-color | _var(--van-danger-color)_ | - |

packages/vant/src/field/README.zh-CN.md

@@ -380,7 +380,7 @@ fieldRef.value?.focus();
 | 名称                                  | 默认值                    | 描述 |
 | ------------------------------------- | ------------------------- | ---- |
 | --van-field-label-width               | _6.2em_                   | -    |
-| --van-field-label-color               | _var(--van-gray-7)_       | -    |
+| --van-field-label-color               | _var(--van-text-color)_   | -    |
 | --van-field-label-margin-right        | _var(--van-padding-sm)_   | -    |
 | --van-field-input-text-color          | _var(--van-text-color)_   | -    |
 | --van-field-input-error-text-color    | _var(--van-danger-color)_ | -    |

packages/vant/src/field/index.less

@@ -1,6 +1,6 @@
-:root {
+body {
   --van-field-label-width: 6.2em;
-  --van-field-label-color: var(--van-gray-7);
+  --van-field-label-color: var(--van-text-color);
   --van-field-label-margin-right: var(--van-padding-sm);
   --van-field-input-text-color: var(--van-text-color);
   --van-field-input-error-text-color: var(--van-danger-color);

packages/vant/src/grid-item/index.less

@@ -1,6 +1,6 @@
-:root {
+body {
   --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
-  --van-grid-item-content-background: var(--van-background-light);
+  --van-grid-item-content-background: var(--van-background-2);
   --van-grid-item-content-active-color: var(--van-active-color);
   --van-grid-item-icon-size: 28px;
   --van-grid-item-text-color: var(--van-gray-7);

packages/vant/src/grid/README.md

@@ -160,7 +160,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --- | --- | --- |
 | --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - |
-| --van-grid-item-content-background | _var(--van-background-light)_ | - |
+| --van-grid-item-content-background | _var(--van-background-2)_ | - |
 | --van-grid-item-content-active-color | _var(--van-active-color)_ | - |
 | --van-grid-item-icon-size | _28px_ | - |
 | --van-grid-item-text-color | _var(--van-gray-7)_ | - |

packages/vant/src/grid/README.zh-CN.md

@@ -176,7 +176,7 @@ import type { GridProps, GridDirection, GridItemProps } from 'vant';
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
 | --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - |
-| --van-grid-item-content-background | _var(--van-background-light)_ | - |
+| --van-grid-item-content-background | _var(--van-background-2)_ | - |
 | --van-grid-item-content-active-color | _var(--van-active-color)_ | - |
 | --van-grid-item-icon-size | _28px_ | - |
 | --van-grid-item-text-color | _var(--van-gray-7)_ | - |

packages/vant/src/icon/demo/index.vue

@@ -197,7 +197,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
   &-tab-panel {
     width: auto;
     margin: 20px;
-    background-color: var(--van-background-light);
+    background-color: var(--van-background-2);
     border-radius: 12px;
   }
 

packages/vant/src/image-preview/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-image-preview-index-text-color: var(--van-white);
   --van-image-preview-index-font-size: var(--van-font-size-md);
   --van-image-preview-index-line-height: var(--van-line-height-md);

packages/vant/src/image/demo/index.vue

@@ -124,7 +124,7 @@ const positions2 = ['top', 'center', 'bottom'] as const;
 <style lang="less">
 .demo-image {
   overflow-x: hidden;
-  background-color: var(--van-background-light);
+  background-color: var(--van-background-2);
 
   .van-row {
     padding: 0 var(--van-padding-md);

packages/vant/src/image/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-image-placeholder-text-color: var(--van-text-color-2);
   --van-image-placeholder-font-size: var(--van-font-size-md);
   --van-image-placeholder-background: var(--van-background);

packages/vant/src/index-anchor/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-index-anchor-z-index: 1;
   --van-index-anchor-padding: 0 var(--van-padding-md);
   --van-index-anchor-text-color: var(--van-text-color);
@@ -7,7 +7,7 @@
   --van-index-anchor-line-height: 32px;
   --van-index-anchor-background: transparent;
   --van-index-anchor-sticky-text-color: var(--van-primary-color);
-  --van-index-anchor-sticky-background: var(--van-background-light);
+  --van-index-anchor-sticky-background: var(--van-background-2);
 }
 
 .van-index-anchor {

packages/vant/src/index-bar/README.md

@@ -144,4 +144,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-index-anchor-line-height | _32px_ | - |
 | --van-index-anchor-background | _transparent_ | - |
 | --van-index-anchor-sticky-text-color | _var(--van-primary-color)_ | - |
-| --van-index-anchor-sticky-background | _var(--van-background-light)_ | - |
+| --van-index-anchor-sticky-background | _var(--van-background-2)_ | - |

packages/vant/src/index-bar/README.zh-CN.md

@@ -134,18 +134,18 @@ indexBarRef.value?.scrollTo('B');
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                 | 默认值                        | 描述 |
-| ------------------------------------ | ----------------------------- | ---- |
-| --van-index-bar-sidebar-z-index      | _2_                           | -    |
-| --van-index-bar-index-font-size      | _var(--van-font-size-xs)_     | -    |
-| --van-index-bar-index-line-height    | _var(--van-line-height-xs)_   | -    |
-| --van-index-bar-index-active-color   | _var(--van-primary-color)_    | -    |
-| --van-index-anchor-z-index           | _1_                           | -    |
-| --van-index-anchor-padding           | _0 var(--van-padding-md)_     | -    |
-| --van-index-anchor-text-color        | _var(--van-text-color)_       | -    |
-| --van-index-anchor-font-weight       | _var(--van-font-bold)_        | -    |
-| --van-index-anchor-font-size         | _var(--van-font-size-md)_     | -    |
-| --van-index-anchor-line-height       | _32px_                        | -    |
-| --van-index-anchor-background        | _transparent_                 | -    |
-| --van-index-anchor-sticky-text-color | _var(--van-primary-color)_    | -    |
-| --van-index-anchor-sticky-background | _var(--van-background-light)_ | -    |
+| 名称                                 | 默认值                      | 描述 |
+| ------------------------------------ | --------------------------- | ---- |
+| --van-index-bar-sidebar-z-index      | _2_                         | -    |
+| --van-index-bar-index-font-size      | _var(--van-font-size-xs)_   | -    |
+| --van-index-bar-index-line-height    | _var(--van-line-height-xs)_ | -    |
+| --van-index-bar-index-active-color   | _var(--van-primary-color)_  | -    |
+| --van-index-anchor-z-index           | _1_                         | -    |
+| --van-index-anchor-padding           | _0 var(--van-padding-md)_   | -    |
+| --van-index-anchor-text-color        | _var(--van-text-color)_     | -    |
+| --van-index-anchor-font-weight       | _var(--van-font-bold)_      | -    |
+| --van-index-anchor-font-size         | _var(--van-font-size-md)_   | -    |
+| --van-index-anchor-line-height       | _32px_                      | -    |
+| --van-index-anchor-background        | _transparent_               | -    |
+| --van-index-anchor-sticky-text-color | _var(--van-primary-color)_  | -    |
+| --van-index-anchor-sticky-background | _var(--van-background-2)_   | -    |