方式1：定义全局的CSS变量App.vue：
/* 定义全局的css变量 */
:root {
/* 背景色 */
--theme_bg_color: red;
/* 按钮颜色 */
--theme_button_color: yellowgreen;
}
demo.vue（css）：
/* 使用全局的css变量设置颜色 */
.myButton {
background: var(--theme_bg_color);
}
.myDiv {
background: var(--theme_button_color);
width: 200px;
height: 200px;
}
demo.vue（html）：
换肤 / 切换样式主题 方式1：
我是一个可以换肤的div【vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（干货）】demo.vue（js）：
效果：
文章图片
方式2：切换已定义好的css文件Public/css/theme_1.css：
.myButton2{
background: Moccasin;
}
.myDiv2 {
background: Moccasin;
}
文章图片
App.vue：
demo.vue（html）：
换肤 / 切换样式主题 方式2：
我是一个可以换肤的divdemo.vue（js）：
效果：
文章图片
方式3：切换顶级CSS类名 (需使用css处理器,如sass、less等)src/assets/css/theme.less：
/* 预设四种主题 */
.theme_1 {
.myButton3 {
background: #00ff7f;
}
.myDiv3 {
background: #00ff7f;
}
}.theme_2 {
.myButton3 {
background: #00ff7f;
}
.myDiv3 {
background: #00ff7f;
}
}.theme_3 {
.myButton3 {
background: #00ff7f;
}
.myDiv3 {
background: #00ff7f;
}
}.theme_4 {
.myButton3 {
background: #00ff7f;
}
.myDiv3 {
background: #00ff7f;
}
}
文章图片
main.js：
// 方式3：需要先引入全局主题样式文件
import "./assets/css/theme.less";
App.vue：
demo.vue（html）：
换肤 / 切换样式主题 方式3：
我是一个可以换肤的divdemo.vue（js）：
效果：
文章图片
推荐阅读
- vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录
- 为啥我用Vue.use(axios)报错了！（）
- ts 版 vue 之 vue-property-decorator
- 北京丨蓝湖丨产品设计协同平台丨诚招前端工程师 30K—50K
- Vue源码理解（一）
- 自定义指令实现渐进加载图片