docs: config provider usage (#8856)

src/config-provider/README.md

@@ -16,11 +16,50 @@ const app = createApp();
 app.use(ConfigProvider);
 ```
 
-## Usage
+## Custom Theme
 
-### Custom Theme
+### CSS Variables
 
-Use `theme-vars` prop to custom theme variables。
+Vant organize component styles through [CSS Variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), you can custom themes by overriding these CSS Variables.
+
+#### Demo
+
+Looking at the style of the Button component, you can see that the following variables exist on the `.van-button--primary` class:
+
+```css
+.van-button--primary {
+  color: var(--van-button-primary-color);
+  background-color: var(--van-button-primary-background-color);
+}
+```
+
+The default values of these variables are defined on the `root` node:
+
+```css
+:root {
+  --van-white: #fff;
+  --van-blue: #1989fa;
+  --van-button-primary-color: var(--van-white);
+  --van-button-primary-background-color: var(--van-blue);
+}
+```
+
+### Custom CSS Variables
+
+#### Override by CSS
+
+You can directly override these CSS variables in the code, and the style of the Button component will change accordingly:
+
+```css
+/* the Primary Button will turn red */
+:root {
+  --van-button-primary-background-color: red;
+}
+```
+
+#### Override by ConfigProvider
+
+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.
 
 ```html
 <van-config-provider :theme-vars="themeVars">
@@ -51,8 +90,9 @@ export default {
   setup() {
     const rate = ref(4);
     const slider = ref(50);
-    const switchChecked = ref(true);
 
+    // ThemeVars will be converted to the corresponding CSS variable
+    // For example, sliderBarHeight will be converted to `--van-slider-bar-height`
     const themeVars = {
       rateIconFullColor: '#07c160',
       sliderBarHeight: '4px',
@@ -67,7 +107,6 @@ export default {
       rate,
       slider,
       themeVars,
-      switchChecked,
     };
   },
 };