/*! For license information please see 9862.345c6578.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["9862"],{70353:function(s,a,n){"use strict";n.r(a);var e=n("80681");let t=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,e.wg)(),(0,e.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

ConfigProvider

\n

Intro

\n

Used to configure Vant components globally, providing dark mode, theme customization and other capabilities.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { ConfigProvider } from 'vant';\n\nconst app = createApp();\napp.use(ConfigProvider);\n
\n

Dark Mode

\n

Enable Dark Mode

\n

Enabling dark mode by setting the theme prop of the ConfigProvider component to dark.

\n

In takes effect globally, making all Vant components on the page dark.

\n
<van-config-provider theme="dark">...</van-config-provider>\n
\n

The theme prop will not change the text-color or background-color of the page, you can set it manually like this:

\n
.van-theme-dark body {\n  color: #f5f5f5;\n  background-color: black;\n}\n
\n
\n

Tips: The theme prop will not change the background color of the page, you need to set it manually.

\n
\n

Switch Theme

\n

Switching between light and dark theme by dynamically setting the theme property.

\n
<van-config-provider :theme="theme">...</van-config-provider>\n
\n
export default {\n  setup() {\n    const theme = ref('light');\n\n    setTimeout(() => {\n      theme.value = 'dark';\n    }, 1000);\n\n    return { theme };\n  },\n};\n
\n

Custom Theme

\n

Intro

\n

Vant organize component styles through CSS Variables, you can custom themes by overriding these CSS Variables.

\n

Demo

\n

Looking at the style of the Button component, you can see that the following variables exist on the .van-button--primary class:

\n
.van-button--primary {\n  color: var(--van-button-primary-color);\n  background-color: var(--van-button-primary-background);\n}\n
\n

The default values of these variables are defined on the :root node:

\n
:root {\n  --van-white: #fff;\n  --van-blue: #1989fa;\n  --van-button-primary-color: var(--van-white);\n  --van-button-primary-background: var(--van-primary-color);\n}\n
\n

Custom CSS Variables

\n

Override by CSS

\n

You can directly override these CSS variables in the code, and the style of the Button component will change accordingly:

\n
/* the Primary Button will turn red */\n:root:root {\n  --van-button-primary-background: red;\n}\n
\n
\n

Note: Why write two duplicate :root?

\n

Since the theme variables in vant are also declared under :root, in some cases they cannot be successfully overwritten due to priority issues. Through :root:root you can explicitly make the content you write a higher priority to ensure the successful coverage of the theme variables.

\n
\n

Override by ConfigProvider

\n

The ConfigProvider component provides the ability to override CSS variables. You need to wrap a ConfigProvider component at the root node and configure some CSS variables through the theme-vars property.

\n
<van-config-provider :theme-vars="themeVars">\n  <van-form>\n    <van-field name="rate" label="Rate">\n      <template #input>\n        <van-rate v-model="rate" />\n      </template>\n    </van-field>\n    <van-field name="slider" label="Slider">\n      <template #input>\n        <van-slider v-model="slider" />\n      </template>\n    </van-field>\n    <div style="margin: 16px">\n      <van-button round block type="primary" native-type="submit">\n        Submit\n      </van-button>\n    </div>\n  </van-form>\n</van-config-provider>\n
\n
import { ref, reactive } from 'vue';\n\nexport default {\n  setup() {\n    const rate = ref(4);\n    const slider = ref(50);\n\n    // ThemeVars will be converted to the corresponding CSS variable\n    // For example, sliderBarHeight will be converted to `--van-slider-bar-height`\n    const themeVars = reactive({\n      rateIconFullColor: '#07c160',\n      sliderBarHeight: '4px',\n      sliderButtonWidth: '20px',\n      sliderButtonHeight: '20px',\n      sliderActiveBackground: '#07c160',\n      buttonPrimaryBackground: '#07c160',\n      buttonPrimaryBorderColor: '#07c160',\n    });\n\n    return {\n      rate,\n      slider,\n      themeVars,\n    };\n  },\n};\n
\n

Scope of CSS Variables

\n

By default, the CSS variables generated by themeVars are applied to the root node of the component, thereby only affecting the styles of its child components and not the entire page.

\n

You can modify the scope of CSS variables using the theme-vars-scope prop. For example, by setting theme-vars-scope to global, the CSS variables generated by themeVars will be applied to the root node of the HTML and affect all components within the entire page.

\n
<van-config-provider :theme-vars="themeVars" theme-vars-scope="global">\n  ...\n</van-config-provider>\n
\n

Use In TypeScript

\n

Using ConfigProviderThemeVars type to get code intellisense.

\n
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n  sliderBarHeight: '4px',\n};\n
\n

Combining dark mode with CSS variables

\n

If you need to define CSS variables for dark mode or light mode separately, you can use the theme-vars-dark and theme-vars-light props.

\n\n

Example

\n

Take the buttonPrimaryBackground variable below as an example, the value will be blue in dark mode, and green in light mode.

\n
<van-config-provider\n  :theme-vars="themeVars"\n  :theme-vars-dark="themeVarsDark"\n  :theme-vars-light="themeVarsLight"\n>\n  ...\n</van-config-provider>\n
\n
import { ref, reactive } from 'vue';\n\nexport default {\n  setup() {\n    const themeVars = reactive({ buttonPrimaryBackground: 'red' });\n    const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });\n    const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });\n\n    return {\n      themeVars,\n      themeVarsDark,\n      themeVarsLight,\n    };\n  },\n};\n
\n

Using Class Names

\n

In addition, you can also use the class selectors .van-theme-light and .van-theme-dark to individually modify the base variables and component variables in the light or dark mode.

\n
.van-theme-light {\n  --van-white: white;\n}\n\n.van-theme-dark {\n  --van-white: black;\n}\n
\n

Variables

\n

Variable Types

\n

In Vant, CSS variables are divided into basic variables and component variables. Component variables inherit from basic variables, so modifying a basic variable will affect all related components.

\n

Modifying Variables

\n

CSS variables have an inheritance relationship, where component variables inherit from the nearest parent basic variable.

\n

Therefore, there are certain limitations when modifying basic variables. You need to use the :root selector or the global mode of the ConfigProvider component to modify basic variables. Otherwise, component variables may not inherit basic variables correctly.

\n

Taking the --van-primary-color basic variable as an example:

\n\n
:root {\n  --van-primary-color: red;\n}\n
\n\n
<van-config-provider\n  :theme-vars="{ primaryColor: 'red' }"\n  theme-vars-scope="global"\n>\n  ...\n</van-config-provider>\n
\n\n
<van-config-provider :theme-vars="{ primaryColor: 'red' }">\n  ...\n</van-config-provider>\n
\n

As for component variables, there are no such limitations, and you can modify them in any way you want.

\n

Basic Variables List

\n

There are all Basic Variables below, for component CSS Variables, please refer to the documentation of each component.

\n
// Color Palette\n--van-black: #000;\n--van-white: #fff;\n--van-gray-1: #f7f8fa;\n--van-gray-2: #f2f3f5;\n--van-gray-3: #ebedf0;\n--van-gray-4: #dcdee0;\n--van-gray-5: #c8c9cc;\n--van-gray-6: #969799;\n--van-gray-7: #646566;\n--van-gray-8: #323233;\n--van-red: #ee0a24;\n--van-blue: #1989fa;\n--van-orange: #ff976a;\n--van-orange-dark: #ed6a0c;\n--van-orange-light: #fffbe8;\n--van-green: #07c160;\n\n// Gradient Colors\n--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);\n--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);\n\n// Component Colors\n--van-primary-color: var(--van-blue);\n--van-success-color: var(--van-green);\n--van-danger-color: var(--van-red);\n--van-warning-color: var(--van-orange);\n--van-text-color: var(--van-gray-8);\n--van-text-color-2: var(--van-gray-6);\n--van-text-color-3: var(--van-gray-5);\n--van-active-color: var(--van-gray-2);\n--van-active-opacity: 0.6;\n--van-disabled-opacity: 0.5;\n--van-background: var(--van-gray-1);\n--van-background-2: var(--van-white);\n\n// Padding\n--van-padding-base: 4px;\n--van-padding-xs: 8px;\n--van-padding-sm: 12px;\n--van-padding-md: 16px;\n--van-padding-lg: 24px;\n--van-padding-xl: 32px;\n\n// Font\n--van-font-size-xs: 10px;\n--van-font-size-sm: 12px;\n--van-font-size-md: 14px;\n--van-font-size-lg: 16px;\n--van-font-bold: 600;\n--van-line-height-xs: 14px;\n--van-line-height-sm: 18px;\n--van-line-height-md: 20px;\n--van-line-height-lg: 22px;\n--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n  Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n  sans-serif;\n--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;\n\n// Animation\n--van-duration-base: 0.3s;\n--van-duration-fast: 0.2s;\n--van-ease-out: ease-out;\n--van-ease-in: ease-in;\n\n// Border\n--van-border-color: var(--van-gray-3);\n--van-border-width: 1px;\n--van-radius-sm: 2px;\n--van-radius-md: 4px;\n--van-radius-lg: 8px;\n--van-radius-max: 999px;\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
themeTheme mode, can be set to darkConfigProviderThemelight
theme-varsTheme variablesobject-
theme-vars-darkTheme variables that work in dark mode\uFF0Cwill override theme-varsobject-
theme-vars-lightTheme variables that work in light mode, will override theme-varsobject-
theme-vars-scopeby default only affects its child components\uFF0Cset to global for the entire page to take effectConfigProviderThemeVarsScopelocal
z-indexSet the z-index of all popup components, this property takes effect globallynumber2000
tagHTML Tag of root elementstringdiv
icon-prefixIcon className prefixstringvan-icon
\n

Types

\n

The component exports the following type definitions:

\n
import type {\n  ConfigProviderProps,\n  ConfigProviderTheme,\n  ConfigProviderThemeVars,\n  ConfigProviderThemeVarsScope,\n} from 'vant';\n
\n
'},null,8,t))}}}]);