vue3简单快速实现主题切换功能

⛰️个人主页: 蒾酒

🔥系列专栏：《vue3实战》

内容概要

实现步骤

1.定义不同主题的css样式变量

2.入口main.ts中引入这个样式文件

3.主题样式css变量引用

4.设置默认主题样式

5.实现点击按钮主题切换

总结

最近发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

点击跳转到学习网站

内容概要

本文介绍一种基于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">
    <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="#">
                   
                    <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>

效果：

点击切换即可。