好资源导航 » 文章资讯 » VUE项目实现主题切换的多种方法

VUE项目实现主题切换的多种方法

2023-07-10 17:44:03 273

需求是做一个深色主题和浅色主题切换的效果

方法一多套css

这个方法也是最简单，也是最无聊的。





当class为box使用witch的css
@import"./style/witch.scss";
当class为boxs使用black的css
@import"./style/black.scss";
.switch{
position:fixed;
top:4px;
right:10px;
z-index:50;
width:60px;
height:60px;
background:#fff;
line-height:60px;
border-radius:20%;
}

每个css文件样式大致相同，只是最外层的父级不一样，分别为.box和.boxs

方法二scss动态切换变量

我自己是分为了2个主要文件来做的

_variable.scss变量管理文件
var()为css3中提出的声明样式变量的方法
var(属性名,属性值)注意属性值不能是字符串

//主题切换
$bgColor:var(--backgroundColor,rgb(255,255,255));
$fontColor:var(--fonntColor,rgb(0,0,0));
$bgmColor:var(--backgroundMColor,rgb(238,238,238));
$tableColor:var(--tableColor,rgb(218,218,218));
$borderColor:var(--borderColor,rgb(238,238,238));
$tablesColor:var(--tablesColor,rgb(255,255,255));
$inputColor:var(--inputColor,rgb(255,255,255))

创建的_variable.scss文件我在vue.config.js进行了一个全局的配置，没有在组件中引入

css:{
loaderOptions:{
//此文件为主题切换文件
sass:{
prependData:`@import"./src/styles/_variable.scss";`,
},
},
},

2.publicStyle.js
这个方法可以去修改var定义的变量
document.getElementsByTagName("body")[0].style.setProperty("属性名","替换的属性值f");

//主题切换
constcut=(cutcheack)=>{
document.getElementsByTagName("body")[0].style.setProperty("--backgroundColor",cutcheack?"#121212":"#fff");
document.getElementsByTagName("body")[0].style.setProperty("--fonntColor",cutcheack?"#cecece":"#333");
document.getElementsByTagName("body")[0].style.setProperty("--backgroundMColor",cutcheack?"#333":"#eee");
document.getElementsByTagName("body")[0].style.setProperty("--tableColor",cutcheack?"#000":"#d8d8d8");
document.getElementsByTagName("body")[0].style.setProperty("--tablesColor",cutcheack?"#222":"#fff");
document.getElementsByTagName("body")[0].style.setProperty("--inputColor",cutcheack?"#666":"#fff");
document.getElementsByTagName("body")[0].style.setProperty("--borderColor",cutcheack?"#666":"#fff");
};
exportdefaultcut;

组件中使用





.home{
height:100%;
width:100%;
	background:$bgColor;
.el-container{
height:100%;
color:$fontColor;
}
}

到此这篇关于VUE项目实现主题切换的文章就介绍到这了,更多相关VUE实现主题切换内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

VUE项目实现主题切换的多种方法

热门推荐

随机推荐