在使用 Vant3 开发单页面应用时，如果需要修改 css 变量的值，可以通过 ConfigProvider 全局配置来实现。
首先， 通过以下方式来全局注册组件：
import { createApp } from 'vue';import { ConfigProvider } from 'vant';const app = createApp();app.use(ConfigProvider);然后，通过 ConfigProvider 覆盖 CSS 变量：
ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。
<van-config-provider :theme-vars="themeVars"> <van-form> <van-field name="rate" label="评分"> <template #input> <van-rate v-model="rate" /> </template> </van-field> <van-field name="slider" label="滑块"> <template #input> <van-slider v-model="slider" /> </template> </van-field> <div style="margin: 16px"> <van-button round block type="primary" native-type="submit"> 提交 </van-button> </div> </van-form></van-config-provider>import { ref } from 'vue';export default { setup() { const rate = ref(4); const slider = ref(50); // themeVars 内的值会被转换成对应 CSS 变量 // 比如 sliderBarHeight 会转换成 `--van-slider-bar-height` const themeVars = { rateIconFullColor: '#07c160', sliderBarHeight: '4px', sliderButtonWidth: '20px', sliderButtonHeight: '20px', sliderActiveBackgroundColor: '#07c160', buttonPrimaryBorderColor: '#07c160', buttonPrimaryBackgroundColor: '#07c160', }; return { rate, slider, themeVars, }; },};ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
实例：修改顶部导航栏的背景色
代码如下：
<template> <van-config-provider :theme-vars="themeVars"> <van-nav-bar :fixed="true" :placeholder="true"> ...... </van-nav-bar> </van-config-provider> <router-view/> <van-tabbar v-model="active" :fixed="true" :placeholder="true"> ...... </van-tabbar></template><script>export default defineComponent({ name: "MainView", setup () { const themeVars = { navBarBackgroundColor: '#2c3e50' } let active = ref(0) return { themeVars, active } }})</script>