Vue3 vant组件库主题自定义

实现：使用css变量定制项目主题，和修改vant主题

定义和使用 css 变量

styles/index.scss

/*
项目全局样式
现在浏览器都支持css原生变量
语法：1. 定义： --css变量名：css变量值
     2. 使用： var(--变量名)

作用域：
     1. 局部作用域 => .类型 { 在类名下定义的变量，只能在这个类名下使用} 元素在这里内名下才生效
     2. 全局变量 => :root { 在 :root 下定义的变量为全局 }
*/

// test
:root {
  --cp-color:pink;
  --cp-border-color:blue
}
.cp-box {
  --cp-box-color:red;
  width: 100px;
  height: 100px;
  background-color: var(--cp-color);
  color: var(--cp-border-color);
}

// 覆盖vant定义的变量，使用双root 【:root:root】 【双root权重更高类似于选择器权重：待测试】
// 详情查看 vant4 ConfigProvider配置
:root: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主体色
  --van-primary-color: var(--cp-primary);
  // == vant组件变量 ==
  // 单元格上下间距
  --van-cell-vertical-padding: 14px;
  // 复选框大小
  --van-checkbox-size: 14px;
  // 默认按钮文字大小
  --van-button-normal-font-size: 16px;
}

// 全局样式
body {
  font-size: 14px;
  color: var(--cp-text1);
}
a {
  color: var(--cp-text2);
}
h1,h2,h3,h4,h5,h6,p,ul,ol {
  margin: 0;
  padding: 0;
}

// 全局覆盖van-tab样式
.van-tabs {
  .van-tabs__nav {
    padding: 0 0 15px 0;
  }
  .van-tabs__line {
    width: 20px;
    background-color: var(--cp-primary);
  }
  .van-tab {
    padding: 0 15px;
  }
}

在main.ts中进行引入

import { createApp } from 'vue'

import App from '@/App.vue'

import store from '@/stores'
import router from './router'

// 引入全局样式
import '@/style/index.scss'

// 创建app实例
const app = createApp(App)

// 注册：pinia
app.use(store)
// 注册：路由
app.use(router)

app.mount('#app')

定义项目的颜色风格，覆盖vant的主题色官方文档

修改vant组件库主题思路❓：

前提=》vant组件库中所有组件用到的颜色、字体大小、间距等，都定义成全局的原生css变量

根据公司需求修改主题=》覆盖vant内置的全局css变量=》变量修改后，就会影响所有组件

styles/main.scss

覆盖vant定义的变量，需要使用双root 【:root:root】

Vue3 vant组件库主题自定义

猜你喜欢