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

最新推荐文章于 2025-04-02 10:16:04 发布

原创最新推荐文章于 2025-04-02 10:16:04 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章介绍了如何定义和使用CSS变量来设置网页主色，并展示了如何在Vant框架中覆盖默认主题色，通过修改--van-primary-color变量实现。示例代码中，作者使用了VueSFC（单文件组件）结构，引入VantButton组件，并应用了自定义的主题色。

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>

效果