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项目如何引入bootstrap、elementUI、echarts
这篇文章主要介绍了Vue项目如何引入bootstrap、elementUI、echarts,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
Vue2异步更新及nextTick原理详解
Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理，对于理解Vue2的渲染机制和优化性能有很大的帮助。
2023-04-04
如何在vite初始化项目中安装scss以及scss的使用
今天想要给vite项目,添加全局的scss变量文件引用,这样我们在使用scss变量和函数的时候就不需要每个组件都取引用了,下面这篇文章主要给大家介绍了关于如何在vite初始化项目中安装scss以及scss使用的相关资料,需要的朋友可以参考下
2022-10-10
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
本篇文章主要介绍了详解使用vue-router进行页面切换时滚动条位置与滚动监听事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
vue addRoutes路由动态加载操作
这篇文章主要介绍了vue addRoutes路由动态加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
基于vue-router的matched实现面包屑功能
本文主要介绍了基于vue-router的matched实现面包屑功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
VUE引入腾讯地图并实现轨迹动画的详细步骤
这篇文章主要介绍了VUE引入腾讯地图并实现轨迹动画,引入步骤大概是在 html 中通过引入 script 标签加载API服务，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
手把手教你如何创建一个VUE项目(超简单)
这篇文章主要给大家介绍了关于如何创建一个VUE项目的相关资料,创建vue项目有很多种方式,这里给大家介绍一种非常简单的方法,需要的朋友可以参考下
2023-08-08
Vue+webpack实现懒加载过程解析
这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
Vue + element 实现多选框组并保存已选id集合的示例代码
这篇文章主要介绍了Vue + element 实现多选框组并保存已选id集合,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06