vue3快速实现主题切换功能的步骤详解
作者：蒾酒
本文介绍一种基于css变量的主题切换实现方式,这种是最简单,最直接,最容易理解的方式,实现的原理就是定义不同的HTML根标签元素的样式,通过data属性来区分不同主题css变量样式,感兴趣的朋友可以参考下
内容概要
本文介绍一种基于css变量的主题切换实现方式，这种是最简单，最直接，最容易理解的方式。
实现的原理就是定义不同的HTML根标签元素的样式，通过data属性来区分不同主题css变量样式，通过修改根元素的data属性值来加载不同的css变量，实现主题切换。
实现步骤
1.定义不同主题的css样式变量
一般把该css文件放在styles目录下的theme.css里面
代码如下：
/* 浅色色主题 */
html[data-theme="light"]{
--page-bg: #ecf4fd;
--bg1: #ffffff;
--bg2: #ffffff;
--txt-color: #000000;
--prominent-txt-color :#ffffff;
--prominent-color :#000000;
}
/* 暗色主题 */
html[data-theme="dark"]{
--page-bg: #06142a;/*页面级背景色*/
--bg1: #06142a;/*菜单导航栏级背景色*/
--bg2: #06142a;/*按钮控件等小组件背景色*/
--txt-color: #ffffff;
--prominent-txt-color :#000000;
--prominent-color :#ffffff;
}2.入口main.ts中引入这个样式文件
3.主题样式css变量引用
在页面各种根据主题变化的地方，如页面背景色，导航栏背景色，文字颜色等引用这些css变量
比如：
通过var()来引用css变量
此时全部的前置工作已经完成。
4.设置默认主题样式
在index.html设置默认样式。如图设置的是深色主题
代码如下：
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" rel="external nofollow" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的工具箱</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>此时你的页面就变成深色主题了。
5.实现点击按钮主题切换
准备一个主题切换按钮
js部分代码：
//当前主题
const theme=ref('dark')
//切换主题
const toggleTheme=()=>{
//获取根元素并设置属性
document.documentElement.setAttribute('data-theme',theme.value=='dark'?'light':'dark')
theme.value=theme.value=='dark'?'light':'dark'
}html部分：
<div class="theme" @click="toggleTheme()">
<div class="theme-img">
<a href="#" rel="external nofollow" >
<div v-if="theme==='light'">
<img src="../../assets/月亮 .png" alt="">
</div>
<div v-if="theme==='dark'">
<img src="../../assets/太阳.png" alt="">
</div>
</a>
</div>
</div>效果：
点击切换即可。
总结
这种实现主题切换的原理就是通过 HTML 的 data 属性和 CSS 变量来动态改变页面的样式，从而实现不同主题下的样式切换。当用户切换主题时，只需改变 HTML 标签上的 data 属性的值，页面的样式会自动更新为对应主题下的样式。
以上就是vue3快速实现主题切换功能的步骤详解的详细内容，更多关于vue3主题切换的资料请关注脚本之家其它相关文章！