属于门户网站的有南京最大网站建设公司
⛰️个人主页: 蒾酒
🔥系列专栏：《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>效果：
点击切换即可。
总结
这种实现主题切换的原理就是通过 HTML 的 data 属性和 CSS 变量来动态改变页面的样式，从而实现不同主题下的样式切换。当用户切换主题时，只需改变 HTML 标签上的 data 属性的值，页面的样式会自动更新为对应主题下的样式。