CSS变量定制项目主题

1.定义和使用CSS变量

:root {
    --main: #999;
}

a {
    color: var(--main)
}

vant组件库是采用cass变量设置主题色的,所以我们可以通过修改css变量更改vant组件的样式

 

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

<style>
:root {
    // 问诊患者：色板
    --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);
}
</style>

测试主题色，views/index.vue

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

样式穿透

不同语法有不同的穿透方式

less/scss

::v-deep  样式穿透

<template>
    <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" fixed right-text="注册" @click-right="onClickRight" />
</template>

<style lang="scss" scoped>
    ::v-deep() {
        .van-nav-bar {
            &__arrow {
                font-size: 18px;
                color: var(--cp-text1);
            }

            &__text {
                font-size: 15px;
            }
        }
    }
</style>