blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

refactor: rename --van-background-light to --van-background-2

Browse Source
This commit is contained in:
chenjiahan 2022-01-27 10:35:57 +08:00
parent 0e8e3200a2
commit 98b999d911
119 changed files with 307 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant-cli/site/mobile/App.vue
View File

@ -46,7 +46,7 @@ body {
}
.van-doc-theme-dark {
background-color: var(--van-doc-black);
background-color: #000;
}
::-webkit-scrollbar {

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

@ -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

2
packages/vant/src/action-bar-icon/index.less
View File

@ -6,7 +6,7 @@ body {
--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 {

4
packages/vant/src/action-bar/README.md
View File

@ -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)_ | - |

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

@ -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)_ | - |

2
packages/vant/src/action-bar/index.less
View File

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

2
packages/vant/src/action-sheet/README.md
View File

@ -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)_ | - |

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

@ -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)_ | - |

2
packages/vant/src/action-sheet/index.less
View File

@ -7,7 +7,7 @@ body {
--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);

4
packages/vant/src/address-list/index.less
View File

@ -28,7 +28,7 @@ body {
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 @@ body {
.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) {

2
packages/vant/src/badge/demo/index.vue
View File

@ -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);

2
packages/vant/src/badge/index.less
View File

@ -23,7 +23,7 @@ body {
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 {

2
packages/vant/src/button/README.md
View File

@ -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)_ | - |

2
packages/vant/src/button/README.zh-CN.md
View File

@ -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)_ | - |

2
packages/vant/src/button/demo/index.vue
View File

@ -144,7 +144,7 @@ const t = useTranslate({
<style lang="less">
.demo-button {
background: var(--van-background-light);
background: var(--van-background-2);
.van-button {
&--large {

2
packages/vant/src/button/index.less
View File

@ -12,7 +12,7 @@ body {
--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);

2
packages/vant/src/calendar/README.md
View File

@ -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_ | - |

2
packages/vant/src/calendar/README.zh-CN.md
View File

@ -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_ | - |

2
packages/vant/src/calendar/index.less
View File

@ -1,5 +1,5 @@
body {
--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;

2
packages/vant/src/card/demo/index.vue
View File

@ -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>

2
packages/vant/src/cell-group/index.less
View File

@ -1,5 +1,5 @@
body {
--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);
--van-cell-group-title-font-size: var(--van-font-size-md);

4
packages/vant/src/cell/README.md
View File

@ -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)_ | - |

4
packages/vant/src/cell/README.zh-CN.md
View File

@ -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)_ | - |

2
packages/vant/src/cell/index.less
View File

@ -6,7 +6,7 @@ body {
--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);

2
packages/vant/src/col/demo/index.vue
View File

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

2
packages/vant/src/collapse-item/index.less
View File

@ -7,7 +7,7 @@ body {
--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);
}

2
packages/vant/src/collapse/README.md
View File

@ -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)_ | - |

2
packages/vant/src/collapse/README.zh-CN.md
View File

@ -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)_ | - |

2
packages/vant/src/config-provider/README.md
View File

@ -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;

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

@ -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;

2
packages/vant/src/contact-list/index.less
View File

@ -55,7 +55,7 @@ body {
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 {

2
packages/vant/src/count-down/demo/index.vue
View File

@ -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);

2
packages/vant/src/coupon-list/README.md
View File

@ -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)_ | - |

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

@ -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)_ | - |

4
packages/vant/src/coupon-list/index.less
View File

@ -37,7 +37,7 @@ body {
&__exchange-bar {
display: flex;
align-items: center;
background-color: var(--van-background-light);
background-color: var(--van-background-2);
}
&__exchange {
@ -72,7 +72,7 @@ body {
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 {

2
packages/vant/src/coupon/index.less
View File

@ -5,7 +5,7 @@ body {
--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);

2
packages/vant/src/dialog/README.md
View File

@ -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_ | - |

2
packages/vant/src/dialog/README.zh-CN.md
View File

@ -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_ | - |

2
packages/vant/src/dialog/index.less
View File

@ -4,7 +4,7 @@ body {
--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;

2
packages/vant/src/divider/demo/index.vue
View File

@ -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);

2
packages/vant/src/dropdown-menu/README.md
View File

@ -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)_ | - |

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

@ -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)_ | - |

2
packages/vant/src/dropdown-menu/index.less
View File

@ -1,6 +1,6 @@
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);

2
packages/vant/src/empty/demo/index.vue
View File

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

2
packages/vant/src/grid-item/index.less
View File

@ -1,6 +1,6 @@
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);

2
packages/vant/src/grid/README.md
View File

@ -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)_ | - |

2
packages/vant/src/grid/README.zh-CN.md
View File

@ -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)_ | - |

2
packages/vant/src/icon/demo/index.vue
View File

@ -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;
}

2
packages/vant/src/image/demo/index.vue
View File

@ -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);

2
packages/vant/src/index-anchor/index.less
View File

@ -7,7 +7,7 @@ body {
--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 {

2
packages/vant/src/index-bar/README.md
View File

@ -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)_ | - |

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

@ -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)_ | - |

2
packages/vant/src/loading/demo/index.vue
View File

@ -62,7 +62,7 @@ const t = useTranslate({
<style lang="less">
.demo-loading {
background: var(--van-background-light);
background: var(--van-background-2);
.van-loading {
display: inline-block;

20
packages/vant/src/nav-bar/README.md
View File

@ -129,13 +129,13 @@ import type { NavBarProps } from 'vant';
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ------------------------------ | ----------------------------- | ----------- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background | _var(--van-background-light)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |
| Name | Default Value | Description |
| ------------------------------ | -------------------------- | ----------- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background | _var(--van-background-2)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |

20
packages/vant/src/nav-bar/README.zh-CN.md
View File

@ -137,13 +137,13 @@ import type { NavBarProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ----------------------------- | ---- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background | _var(--van-background-light)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | -------------------------- | ---- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background | _var(--van-background-2)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |

2
packages/vant/src/nav-bar/index.less
View File

@ -1,6 +1,6 @@
body {
--van-nav-bar-height: 46px;
--van-nav-bar-background: var(--van-background-light);
--van-nav-bar-background: var(--van-background-2);
--van-nav-bar-arrow-size: 16px;
--van-nav-bar-icon-color: var(--van-primary-color);
--van-nav-bar-text-color: var(--van-primary-color);

2
packages/vant/src/notice-bar/demo/index.vue
View File

@ -81,7 +81,7 @@ const t = useTranslate({
<style lang="less">
.demo-notice-bar {
background: var(--van-background-light);
background: var(--van-background-2);
.van-notice-bar:not(:first-of-type) {
margin-top: 4px;

2
packages/vant/src/number-keyboard/index.less
View File

@ -3,7 +3,7 @@ body {
--van-number-keyboard-key-height: 48px;
--van-number-keyboard-key-font-size: 28px;
--van-number-keyboard-key-active-color: var(--van-gray-3);
--van-number-keyboard-key-background: var(--van-background-light);
--van-number-keyboard-key-background: var(--van-background-2);
--van-number-keyboard-delete-font-size: var(--van-font-size-lg);
--van-number-keyboard-title-color: var(--van-gray-7);
--van-number-keyboard-title-height: 34px;

4
packages/vant/src/overlay/demo/index.vue
View File

@ -47,7 +47,7 @@ const showEmbedded = ref(false);
<style lang="less">
.demo-overlay {
background: var(--van-background-light);
background: var(--van-background-2);
.wrapper {
display: flex;
@ -59,7 +59,7 @@ const showEmbedded = ref(false);
.block {
width: 120px;
height: 120px;
background-color: var(--van-background-light);
background-color: var(--van-background-2);
border-radius: 4px;
}
}

2
packages/vant/src/pagination/README.md
View File

@ -118,6 +118,6 @@ The component provides the following CSS variables, which can be used to customi
| --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
| --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - |
| --van-pagination-item-disabled-background | _var(--van-background)_ | - |
| --van-pagination-background | _var(--van-background-light)_ | - |
| --van-pagination-background | _var(--van-background-2)_ | - |
| --van-pagination-desc-color | _var(--van-gray-7)_ | - |
| --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |

2
packages/vant/src/pagination/README.zh-CN.md
View File

@ -126,6 +126,6 @@ import type { PaginationMode, PaginationProps } from 'vant';
| --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
| --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - |
| --van-pagination-item-disabled-background | _var(--van-background)_ | - |
| --van-pagination-background | _var(--van-background-light)_ | - |
| --van-pagination-background | _var(--van-background-2)_ | - |
| --van-pagination-desc-color | _var(--van-gray-7)_ | - |
| --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |

2
packages/vant/src/pagination/index.less
View File

@ -5,7 +5,7 @@ body {
--van-pagination-item-default-color: var(--van-primary-color);
--van-pagination-item-disabled-color: var(--van-gray-7);
--van-pagination-item-disabled-background: var(--van-background);
--van-pagination-background: var(--van-background-light);
--van-pagination-background: var(--van-background-2);
--van-pagination-desc-color: var(--van-gray-7);
--van-pagination-disabled-opacity: var(--van-disabled-opacity);
}

2
packages/vant/src/password-input/README.md
View File

@ -168,7 +168,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-password-input-margin | _0 var(--van-padding-md)_ | - |
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-radius | _6px_ | - |
| --van-password-input-background | _var(--van-background-light)_ | - |
| --van-password-input-background | _var(--van-background-2)_ | - |
| --van-password-input-info-color | _var(--van-text-color-2)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |

34
packages/vant/src/password-input/README.zh-CN.md
View File

@ -172,20 +172,20 @@ import type { PasswordInputProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ----------------------------- | ---- |
| --van-password-input-height | _50px_ | - |
| --van-password-input-margin | _0 var(--van-padding-md)_ | - |
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-radius | _6px_ | - |
| --van-password-input-background | _var(--van-background-light)_ | - |
| --van-password-input-info-color | _var(--van-text-color-2)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
| --van-password-input-dot-size | _10px_ | - |
| --van-password-input-dot-color | _var(--van-text-color)_ | - |
| --van-password-input-text-color | _var(--van-text-color)_ | - |
| --van-password-input-cursor-color | _var(--van-text-color)_ | - |
| --van-password-input-cursor-width | _1px_ | - |
| --van-password-input-cursor-height | _40%_ | - |
| --van-password-input-cursor-duration | _1s_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------------------------- | ---- |
| --van-password-input-height | _50px_ | - |
| --van-password-input-margin | _0 var(--van-padding-md)_ | - |
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-radius | _6px_ | - |
| --van-password-input-background | _var(--van-background-2)_ | - |
| --van-password-input-info-color | _var(--van-text-color-2)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
| --van-password-input-dot-size | _10px_ | - |
| --van-password-input-dot-color | _var(--van-text-color)_ | - |
| --van-password-input-text-color | _var(--van-text-color)_ | - |
| --van-password-input-cursor-color | _var(--van-text-color)_ | - |
| --van-password-input-cursor-width | _1px_ | - |
| --van-password-input-cursor-height | _40%_ | - |
| --van-password-input-cursor-duration | _1s_ | - |

2
packages/vant/src/password-input/index.less
View File

@ -3,7 +3,7 @@ body {
--van-password-input-margin: 0 var(--van-padding-md);
--van-password-input-font-size: 20px;
--van-password-input-radius: 6px;
--van-password-input-background: var(--van-background-light);
--van-password-input-background: var(--van-background-2);
--van-password-input-info-color: var(--van-text-color-2);
--van-password-input-info-font-size: var(--van-font-size-md);
--van-password-input-error-info-color: var(--van-danger-color);

2
packages/vant/src/picker/README.md
View File

@ -396,7 +396,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-picker-background | _var(--van-background-light)_ | - |
| --van-picker-background | _var(--van-background-2)_ | - |
| --van-picker-toolbar-height | _44px_ | - |
| --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-title-line-height | _var(--van-line-height-md)_ | - |

34
packages/vant/src/picker/README.zh-CN.md
View File

@ -413,23 +413,23 @@ pickerRef.value?.confirm();
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------ | ----------------------------- | ---- |
| --van-picker-background | _var(--van-background-light)_ | - |
| --van-picker-toolbar-height | _44px_ | - |
| --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
| --van-picker-confirm-action-color | _var(--van-link-color)_ | - |
| --van-picker-cancel-action-color | _var(--van-text-color-2)_ | - |
| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-option-text-color | _var(--van-text-color)_ | - |
| --van-picker-option-disabled-opacity | _0.3_ | - |
| --van-picker-mask-color | _linear-gradient_ | - |
| --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
| --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------ | --------------------------- | ---- |
| --van-picker-background | _var(--van-background-2)_ | - |
| --van-picker-toolbar-height | _44px_ | - |
| --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
| --van-picker-confirm-action-color | _var(--van-link-color)_ | - |
| --van-picker-cancel-action-color | _var(--van-text-color-2)_ | - |
| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-option-text-color | _var(--van-text-color)_ | - |
| --van-picker-option-disabled-opacity | _0.3_ | - |
| --van-picker-mask-color | _linear-gradient_ | - |
| --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
| --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |
## 常见问题

2
packages/vant/src/picker/index.less
View File

@ -1,5 +1,5 @@
body {
--van-picker-background: var(--van-background-light);
--van-picker-background: var(--van-background-2);
--van-picker-toolbar-height: 44px;
--van-picker-title-font-size: var(--van-font-size-lg);
--van-picker-title-line-height: var(--van-line-height-md);

2
packages/vant/src/popover/README.md
View File

@ -286,7 +286,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
| --van-popover-action-icon-size | _20px_ | - |
| --van-popover-light-text-color | _var(--van-text-color)_ | - |
| --van-popover-light-background | _var(--van-background-light)_ | - |
| --van-popover-light-background | _var(--van-background-2)_ | - |
| --van-popover-light-action-disabled-text-color | _var(--van-text-color-3)_ | - |
| --van-popover-dark-text-color | _var(--van-white)_ | - |
| --van-popover-dark-background | _#4a4a4a_ | - |

2
packages/vant/src/popover/README.zh-CN.md
View File

@ -298,7 +298,7 @@ import type {
| --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
| --van-popover-action-icon-size | _20px_ | - |
| --van-popover-light-text-color | _var(--van-text-color)_ | - |
| --van-popover-light-background | _var(--van-background-light)_ | - |
| --van-popover-light-background | _var(--van-background-2)_ | - |
| --van-popover-light-action-disabled-text-color | _var(--van-text-color-3)_ | - |
| --van-popover-dark-text-color | _var(--van-white)_ | - |
| --van-popover-dark-background | _#4a4a4a_ | - |

2
packages/vant/src/popover/index.less
View File

@ -7,7 +7,7 @@ body {
--van-popover-action-line-height: var(--van-line-height-md);
--van-popover-action-icon-size: 20px;
--van-popover-light-text-color: var(--van-text-color);
--van-popover-light-background: var(--van-background-light);
--van-popover-light-background: var(--van-background-2);
--van-popover-light-action-disabled-text-color: var(--van-text-color-3);
--van-popover-dark-text-color: var(--van-white);
--van-popover-dark-background: #4a4a4a;

2
packages/vant/src/popup/README.md
View File

@ -167,7 +167,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-popup-background | _var(--van-background-light)_ | - |
| --van-popup-background | _var(--van-background-2)_ | - |
| --van-popup-transition | _transform var(--van-duration-base)_ | - |
| --van-popup-round-radius | _16px_ | - |
| --van-popup-close-icon-size | _22px_ | - |

2
packages/vant/src/popup/README.zh-CN.md
View File

@ -173,7 +173,7 @@ import type {
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------------------------------------ | ---- |
| --van-popup-background | _var(--van-background-light)_ | - |
| --van-popup-background | _var(--van-background-2)_ | - |
| --van-popup-transition | _transform var(--van-duration-base)_ | - |
| --van-popup-round-radius | _16px_ | - |
| --van-popup-close-icon-size | _22px_ | - |

2
packages/vant/src/popup/index.less
View File

@ -1,5 +1,5 @@
body {
--van-popup-background: var(--van-background-light);
--van-popup-background: var(--van-background-2);
--van-popup-transition: transform var(--van-duration-base);
--van-popup-round-radius: 16px;
--van-popup-close-icon-size: 22px;

2
packages/vant/src/progress/demo/index.vue
View File

@ -72,7 +72,7 @@ const reduce = () => {
<style lang="less">
.demo-progress {
background: var(--van-background-light);
background: var(--van-background-2);
.van-progress {
margin: 20px 16px;

2
packages/vant/src/pull-refresh/demo/index.vue
View File

@ -100,7 +100,7 @@ onMounted(preloadImage);
<style lang="less">
.demo-pull-refresh {
background-color: var(--van-background-light);
background-color: var(--van-background-2);
.van-pull-refresh {
height: calc(100vh - 50px);

2
packages/vant/src/rate/demo/index.vue
View File

@ -88,7 +88,7 @@ const onChange = (value: number) => Toast(t('toastContent', value));
<style lang="less">
.demo-rate {
padding-bottom: 20px;
background-color: var(--van-background-light);
background-color: var(--van-background-2);
.van-rate {
margin-left: var(--van-padding-md);

26
packages/vant/src/search/README.md
View File

@ -219,16 +219,16 @@ searchRef.value?.focus();
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| --- | --- | --- |
| --van-search-padding | _10px var(--van-padding-sm)_ | - |
| --van-search-background | _var(--van-background-light)_ | - |
| --van-search-content-background | _var(--van-gray-1)_ | - |
| --van-search-input-height | _34px_ | - |
| --van-search-label-padding | _0 5px_ | - |
| --van-search-label-color | _var(--van-text-color)_ | - |
| --van-search-label-font-size | _var(--van-font-size-md)_ | - |
| --van-search-left-icon-color | _var(--van-gray-6)_ | - |
| --van-search-action-padding | _0 var(--van-padding-xs)_ | - |
| --van-search-action-text-color | _var(--van-text-color)_ | - |
| --van-search-action-font-size | _var(--van-font-size-md)_ | - |
| Name | Default Value | Description |
| ------------------------------- | ---------------------------- | ----------- |
| --van-search-padding | _10px var(--van-padding-sm)_ | - |
| --van-search-background | _var(--van-background-2)_ | - |
| --van-search-content-background | _var(--van-gray-1)_ | - |
| --van-search-input-height | _34px_ | - |
| --van-search-label-padding | _0 5px_ | - |
| --van-search-label-color | _var(--van-text-color)_ | - |
| --van-search-label-font-size | _var(--van-font-size-md)_ | - |
| --van-search-left-icon-color | _var(--van-gray-6)_ | - |
| --van-search-action-padding | _0 var(--van-padding-xs)_ | - |
| --van-search-action-text-color | _var(--van-text-color)_ | - |
| --van-search-action-font-size | _var(--van-font-size-md)_ | - |

26
packages/vant/src/search/README.zh-CN.md
View File

@ -231,19 +231,19 @@ searchRef.value?.focus();
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------- | ----------------------------- | ---- |
| --van-search-padding | _10px var(--van-padding-sm)_ | - |
| --van-search-background | _var(--van-background-light)_ | - |
| --van-search-content-background | _var(--van-gray-1)_ | - |
| --van-search-input-height | _34px_ | - |
| --van-search-label-padding | _0 5px_ | - |
| --van-search-label-color | _var(--van-text-color)_ | - |
| --van-search-label-font-size | _var(--van-font-size-md)_ | - |
| --van-search-left-icon-color | _var(--van-gray-6)_ | - |
| --van-search-action-padding | _0 var(--van-padding-xs)_ | - |
| --van-search-action-text-color | _var(--van-text-color)_ | - |
| --van-search-action-font-size | _var(--van-font-size-md)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------- | ---------------------------- | ---- |
| --van-search-padding | _10px var(--van-padding-sm)_ | - |
| --van-search-background | _var(--van-background-2)_ | - |
| --van-search-content-background | _var(--van-gray-1)_ | - |
| --van-search-input-height | _34px_ | - |
| --van-search-label-padding | _0 5px_ | - |
| --van-search-label-color | _var(--van-text-color)_ | - |
| --van-search-label-font-size | _var(--van-font-size-md)_ | - |
| --van-search-left-icon-color | _var(--van-gray-6)_ | - |
| --van-search-action-padding | _0 var(--van-padding-xs)_ | - |
| --van-search-action-text-color | _var(--van-text-color)_ | - |
| --van-search-action-font-size | _var(--van-font-size-md)_ | - |
## 常见问题

2
packages/vant/src/search/index.less
View File

@ -1,6 +1,6 @@
body {
--van-search-padding: 10px var(--van-padding-sm);
--van-search-background: var(--van-background-light);
--van-search-background: var(--van-background-2);
--van-search-content-background: var(--van-gray-1);
--van-search-input-height: 34px;
--van-search-label-padding: 0 5px;

2
packages/vant/src/share-sheet/README.md
View File

@ -249,4 +249,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-share-sheet-option-description-font-size | _var(--van-font-size-sm)_ | - |
| --van-share-sheet-cancel-button-font-size | _var(--van-font-size-lg)_ | - |
| --van-share-sheet-cancel-button-height | _48px_ | - |
| --van-share-sheet-cancel-button-background | _var(--van-background-light)_ | - |
| --van-share-sheet-cancel-button-background | _var(--van-background-2)_ | - |

2
packages/vant/src/share-sheet/README.zh-CN.md
View File

@ -263,7 +263,7 @@ import type {
| --van-share-sheet-option-description-font-size | _var(--van-font-size-sm)_ | - |
| --van-share-sheet-cancel-button-font-size | _var(--van-font-size-lg)_ | - |
| --van-share-sheet-cancel-button-height | _48px_ | - |
| --van-share-sheet-cancel-button-background | _var(--van-background-light)_ | - |
| --van-share-sheet-cancel-button-background | _var(--van-background-2)_ | - |
## 常见问题

2
packages/vant/src/share-sheet/index.less
View File

@ -15,7 +15,7 @@ body {
--van-share-sheet-option-description-font-size: var(--van-font-size-sm);
--van-share-sheet-cancel-button-font-size: var(--van-font-size-lg);
--van-share-sheet-cancel-button-height: 48px;
--van-share-sheet-cancel-button-background: var(--van-background-light);
--van-share-sheet-cancel-button-background: var(--van-background-2);
}
.van-share-sheet {

2
packages/vant/src/sidebar-item/index.less
View File

@ -11,7 +11,7 @@ body {
--van-sidebar-selected-border-width: 4px;
--van-sidebar-selected-border-height: 16px;
--van-sidebar-selected-border-color: var(--van-primary-color);
--van-sidebar-selected-background: var(--van-background-light);
--van-sidebar-selected-background: var(--van-background-2);
}
.van-sidebar-item {

2
packages/vant/src/sidebar/README.md
View File

@ -154,4 +154,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-primary-color)_ | - |
| --van-sidebar-selected-background | _var(--van-background-light)_ | - |
| --van-sidebar-selected-background | _var(--van-background-2)_ | - |

32
packages/vant/src/sidebar/README.zh-CN.md
View File

@ -147,19 +147,19 @@ import type { SidebarProps, SidebarItemProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------ | ----------------------------- | ---- |
| --van-sidebar-width | _80px_ | - |
| --van-sidebar-font-size | _var(--van-font-size-md)_ | - |
| --van-sidebar-line-height | _var(--van-line-height-md)_ | - |
| --van-sidebar-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-disabled-text-color | _var(--van-text-color-3)_ | - |
| --van-sidebar-padding | _20px var(--van-padding-sm)_ | - |
| --van-sidebar-active-color | _var(--van-active-color)_ | - |
| --van-sidebar-background | _var(--van-background)_ | - |
| --van-sidebar-selected-font-weight | _var(--van-font-bold)_ | - |
| --van-sidebar-selected-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-primary-color)_ | - |
| --van-sidebar-selected-background | _var(--van-background-light)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------ | ---------------------------- | ---- |
| --van-sidebar-width | _80px_ | - |
| --van-sidebar-font-size | _var(--van-font-size-md)_ | - |
| --van-sidebar-line-height | _var(--van-line-height-md)_ | - |
| --van-sidebar-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-disabled-text-color | _var(--van-text-color-3)_ | - |
| --van-sidebar-padding | _20px var(--van-padding-sm)_ | - |
| --van-sidebar-active-color | _var(--van-active-color)_ | - |
| --van-sidebar-background | _var(--van-background)_ | - |
| --van-sidebar-selected-font-weight | _var(--van-font-bold)_ | - |
| --van-sidebar-selected-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-primary-color)_ | - |
| --van-sidebar-selected-background | _var(--van-background-2)_ | - |

2
packages/vant/src/sidebar/demo/index.vue
View File

@ -71,7 +71,7 @@ const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
<style lang="less">
.demo-sidebar {
background-color: var(--van-background-light);
background-color: var(--van-background-2);
.van-sidebar {
margin-left: var(--van-padding-md);

2
packages/vant/src/skeleton/demo/index.vue
View File

@ -47,7 +47,7 @@ const show = ref(false);
<style lang="less">
.demo-skeleton {
background-color: var(--van-background-light);
background-color: var(--van-background-2);
.van-switch {
margin: 0 var(--van-padding-md) var(--van-padding-xs);

2
packages/vant/src/slider/demo/index.vue
View File

@ -96,7 +96,7 @@ const onChange = (value: string) => Toast(t('text') + value);
<style lang="less">
.demo-slider {
background: var(--van-background-light);
background: var(--van-background-2);
user-select: none;
.van-doc-demo-block {

2
packages/vant/src/step/index.less
View File

@ -64,7 +64,7 @@ body {
left: calc(var(--van-padding-xs) * -1);
z-index: 1;
padding: 0 var(--van-padding-xs);
background-color: var(--van-background-light);
background-color: var(--van-background-2);
transform: translateY(-50%);
}

2
packages/vant/src/stepper/index.less
View File

@ -122,7 +122,7 @@ body {
.van-stepper__minus {
color: var(--van-stepper-button-round-theme-color);
background-color: var(--van-background-light);
background-color: var(--van-background-2);
border: 1px solid var(--van-stepper-button-round-theme-color);
}
}

2
packages/vant/src/steps/README.md
View File

@ -128,4 +128,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-step-circle-size | _5px_ | - |
| --van-step-circle-color | _var(--van-gray-6)_ | - |
| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
| --van-steps-background | _var(--van-background-light)_ | - |
| --van-steps-background | _var(--van-background-2)_ | - |

28
packages/vant/src/steps/README.zh-CN.md
View File

@ -121,17 +121,17 @@ import type { StepsProps, StepsDirection } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ----------------------------- | ---- |
| --van-step-text-color | _var(--van-text-color-2)_ | - |
| --van-step-active-color | _var(--van-primary-color)_ | - |
| --van-step-process-text-color | _var(--van-text-color)_ | - |
| --van-step-font-size | _var(--van-font-size-md)_ | - |
| --van-step-line-color | _var(--van-border-color)_ | - |
| --van-step-finish-line-color | _var(--van-primary-color)_ | - |
| --van-step-finish-text-color | _var(--van-text-color)_ | - |
| --van-step-icon-size | _12px_ | - |
| --van-step-circle-size | _5px_ | - |
| --van-step-circle-color | _var(--van-gray-6)_ | - |
| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
| --van-steps-background | _var(--van-background-light)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------------- | ---- |
| --van-step-text-color | _var(--van-text-color-2)_ | - |
| --van-step-active-color | _var(--van-primary-color)_ | - |
| --van-step-process-text-color | _var(--van-text-color)_ | - |
| --van-step-font-size | _var(--van-font-size-md)_ | - |
| --van-step-line-color | _var(--van-border-color)_ | - |
| --van-step-finish-line-color | _var(--van-primary-color)_ | - |
| --van-step-finish-text-color | _var(--van-text-color)_ | - |
| --van-step-icon-size | _12px_ | - |
| --van-step-circle-size | _5px_ | - |
| --van-step-circle-color | _var(--van-gray-6)_ | - |
| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
| --van-steps-background | _var(--van-background-2)_ | - |

2
packages/vant/src/steps/index.less
View File

@ -1,5 +1,5 @@
body {
--van-steps-background: var(--van-background-light);
--van-steps-background: var(--van-background-2);
}
.van-steps {

2
packages/vant/src/sticky/demo/index.vue
View File

@ -40,7 +40,7 @@ const container = ref(null);
<demo-block :title="t('setContainer')">
<div
ref="container"
style="height: 150px; background-color: var(--van-background-light)"
style="height: 150px; background-color: var(--van-background-2)"
>
<van-sticky :container="container">
<van-button type="warning" style="margin-left: 215px">

10
packages/vant/src/style/css-variables.less
View File

@ -34,7 +34,8 @@ body {
--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);
--van-background-3: var(--van-white);
// Padding
--van-padding-base: 4px;
@ -79,10 +80,11 @@ body {
.van-theme-dark {
--van-text-color: #f5f5f5;
--van-text-color-secondary: #707070;
--van-text-color-tertiary: #4d4d4d;
--van-text-color-2: #707070;
--van-text-color-3: #4d4d4d;
--van-border-color: #3a3a3c;
--van-active-color: #3a3a3c;
--van-background: #000;
--van-background-light: #2c2c2e;
--van-background-2: #1c1c1e;
--van-background-3: #37363b;
}

2
packages/vant/src/style/demo/index.vue
View File

@ -77,7 +77,7 @@ const animate = (newName: string) => {
.van-hairline--top {
height: 30px;
background-color: var(--van-background-light);
background-color: var(--van-background-2);
&::after {
top: 5px;

2
packages/vant/src/submit-bar/README.md
View File

@ -140,7 +140,7 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| --van-submit-bar-height | _50px_ | - |
| --van-submit-bar-z-index | _100_ | - |
| --van-submit-bar-background | _var(--van-background-light)_ | - |
| --van-submit-bar-background | _var(--van-background-2)_ | - |
| --van-submit-bar-button-width | _110px_ | - |
| --van-submit-bar-price-color | _var(--van-danger-color)_ | - |
| --van-submit-bar-price-font-size | _var(--van-font-size-sm)_ | - |

2
packages/vant/src/submit-bar/README.zh-CN.md
View File

@ -147,7 +147,7 @@ import type { SubmitBarProps, SubmitBarTextAlign } from 'vant';
| --- | --- | --- |
| --van-submit-bar-height | _50px_ | - |
| --van-submit-bar-z-index | _100_ | - |
| --van-submit-bar-background | _var(--van-background-light)_ | - |
| --van-submit-bar-background | _var(--van-background-2)_ | - |
| --van-submit-bar-button-width | _110px_ | - |
| --van-submit-bar-price-color | _var(--van-danger-color)_ | - |
| --van-submit-bar-price-font-size | _var(--van-font-size-sm)_ | - |

2
packages/vant/src/submit-bar/index.less
View File

@ -1,7 +1,7 @@
body {
--van-submit-bar-height: 50px;
--van-submit-bar-z-index: 100;
--van-submit-bar-background: var(--van-background-light);
--van-submit-bar-background: var(--van-background-2);
--van-submit-bar-button-width: 110px;
--van-submit-bar-price-color: var(--van-danger-color);
--van-submit-bar-price-font-size: var(--van-font-size-sm);

Some files were not shown because too many files have changed in this diff Show More