vue3快速实现主题切换功能的步骤详解
更新时间：2024年06月04日 10:57:09 作者：蒾酒
本文介绍一种基于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主题切换的资料请关注脚本之家其它相关文章！
相关文章
响应系统是Vue.js的一个显著功能，修改属性，可以更新视图，这让状态管理变得非常简单且直观。这篇文章主要给大家介绍如何利用Vue.js实现观察属性的变化，有需要的朋友们可以参考借鉴，感兴趣的朋友们下面来一起看看吧。2016-11-11
这篇文章主要介绍了vue 避免变量赋值后双向绑定的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue 底部footer导航组件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue cli使用iview自定义主题遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue.js 中的组件，需要的朋友参考下2018-02-02
Vue是一款流行的JavaScript框架，它提供了数据响应式更新的能力，可以让我们轻松地更新数据，并自动更新视图，本文将介绍Vue中如何进行数据响应式更新，包括使用Vue的响应式系统、使用计算属性和使用Vue的watcher,需要的朋友可以参考下2023-06-06
vue3中echarts的tooltip组件不显示问题及解决
这篇文章主要介绍了vue3中echarts的tooltip组件不显示问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue父子组件传值问题，文章中有详细的示例代码，感兴趣的同学可以参考阅读2023-04-04
Vue项目中下载返回的文件流操作包括：使用Axios请求文件流数据、设置响应类型为'blob'、创建下载链接并触发下载,关键步骤是使用Blob对象和URL.createObjectURL生成下载链接2025-12-12
最新评论