使用vue3+vant如何实现主题定制

前言：

在实际开发中不可避免的要使用一些组件库，但是里面的样式往往不是我们所需要的，和我们做的项目的主题所不匹配，那么我们就可以自己来主题定制，最常用的就是色彩主题定制和样式定制。

• 项目主题：选择适合项目的主题色彩，可以根据品牌色彩或项目设计风格来进行选择，确保组件库的颜色与项目整体一致。
• 样式定制：定制组件库的样式，包括按钮样式、输入框样式、边框样式等。可以通过修改 CSS 或使用样式覆盖机制，使组件库的样式与项目的整体风格一致。
  

实现:

CSS 主题定制

选择适合项目的主题色彩，可以根据品牌色彩或项目设计风格来进行选择。确保组件库的颜色与项目整体一致。
实现：
使用 CSS 变量定制项目主题，覆盖 vant 主题色，我们要做项目中创建一个styles/main.scss

: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);
}

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。

在main.ts(这里我用的是ts创建的)引入此文件

<!-- 样式全局使用 -->
import 'vant/lib/index.css'
// main.scss一定要引入vant组件库样式的下面，在上面是不会生效的因为会被覆盖
import './styles/main.scss'

让我们看看效果，如图：
定制前

定制后

样式定制

定制组件库的样式，包括按钮样式、输入框样式、边框样式等。可以通过修改 CSS 或使用样式覆盖机制，使组件库的样式与项目的整体风格一致。
实现：
这里我们改变navBar的title字体样式

<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__title {
    font-weight: normal;
  }
}
</style>

拓展：
<<<
Vue2.x的深度作用选择器正式写法

1. 仅适用于Vue2.x版本
2. 支持css预加载器

/deep/
Vue2.x的深度作用选择器正式写法

1. 仅适用于Vue2.x版本
2. 支持css预加载器

**::v-deep() **
也可以::v-deep， 不过官方现在已经改了推荐用::v-deep()
Vue3.x的深度作用选择器正式写法

前后对比：