使用CSS变量定制项目主题(使用vant4组件库)

1.如何定义和使用 CSS 变量

:root {
    --main: #999;
}

a {
    color: var(--main)
}

2.覆盖 vant 主题色 styles/main.scss

// 问诊患者：色板
    --cp-primary: #16c2a3;
    --cp-plain: #eaf8f6;
    --cp-orange: #fca21c;
    --cp-text1: #121826;
    --cp-text2: #3c3e42;
    --cp-text3: #6f6f6f;
    --cp-tag: #848484;
    --cp-dark: #979797;
    --cp-tip: #c3c3c5;
    --cp-disable: #d9dbde;
    --cp-line: #ededed;
    --cp-bg: #f6f7f9;
    --cp-price: #eb5757;
    // 覆盖 Vant 主体色
    // 官方文档：ConfigProvider 全局配置
    --van-primary-color: var(--cp-primary);

3.测试

<script lang="ts" setup>
    import {
        Button as VanButton
    } from 'vant'
</script>
<template>
    <div class="login-page">
        <van-button type="primary">按钮</van-button>
    </div>
</template>

效果