实现:使用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】
版权声明:本文为m0_73461567原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。