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

⛰️个人主页: 蒾酒

🔥系列专栏：《vue3实战》

内容概要

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

点击跳转到学习网站

内容概要

本文介绍一种基于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设置默认样式。如图设置的是深色主题

代码如下：


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 属性的值，页面的样式会自动更新为对应主题下的样式。

相关阅读:
100道JVM面试题大全最新版2023版
企业新闻稿怎么写？教你撰写企业新闻稿
第十九章Java绘图
C语言日记 37 类的友元（1）（全局函数做友元）
图神经网络图像处理,神经网络图像修复
【性能测试】Jmeter+InfluxDB+Grafana 搭建性能监控平台
盘点Sui生态20个值得关注的项目，其中8个已进入测试阶段
【NSArray数组的持久化 Objective-C语言】
Cadence导入IBIS模型用于仿真
FFmpeg入门详解之53：Qt Qss FFplay SDL播放器实战项目

原文地址：https://blog.csdn.net/qq_62262918/article/details/139372223