当前位置： 首页 > news >正文

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

news 2026/2/9 21:27:37

⛰️个人主页:     蒾酒

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

相关文章：

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

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《vue3实战》 目录 内容概要 实现步骤 1.定义不同主题的css样式变量 2.入口main.ts中引入这个样式文件 3.主题样式css变量引用 4.设置默认主题样式 5.实现点击按钮主题切换 总结 最近发现了一个巨牛的人工智…...

编程日记 2024/6/4 19:44:13

国联易安:网络反不正当竞争，要防患于未然

据市场监管总局官网消息&#xff0c;为预防和制止网络不正当竞争&#xff0c;维护公平竞争的市场秩序&#xff0c;鼓励创新&#xff0c;保护经营者和消费者的合法权益&#xff0c;促进数字经济规范健康持续发展&#xff0c;市场监管总局近日发布《网络反不正当竞争暂行规定》&a…...

编程日记 2024/6/4 19:43:12

Linux 网络配置 01

基本命令 1、查看网络接口信息ifconfig ifconfig&#xff1a;当前设备正在工作的网卡&#xff0c;启动的设备 ifconfig -a &#xff1a;所网络设备 ifconfig信息解析&#xff1a; ens33: flags4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500inet 192.168.10.10 n…...

编程日记 2024/6/4 19:42:11

快速入门C++正则表达式

正则表达式&#xff08;Regular Expression&#xff0c;简称 Regex&#xff09;是一种强大的文本处理工具&#xff0c;广泛用于字符串的搜索、替换、分析等操作。它基于一种表达式语言&#xff0c;使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式不仅在…...

编程日记 2024/6/4 19:40:09

java —— 缓冲字符输入流/缓冲字符输出流

缓冲字符输入流/缓冲字符输出流是对字符输入流/字符输出流的加强&#xff0c;在使用中仍旧要借助于字符输入流/字符输出流才能完成实现。与字符输入流/字符输出流按照字符为单位进行输入/输出不同的是&#xff0c;缓冲字符输入流/缓冲字符输出流能够以行为单位进行读取和写入。…...

编程日记 2024/6/4 19:38:08

blender从视频中动作捕捉，绑定到人物模型

总共分为3个步骤&#xff1a; 1、从视频中捕捉动作模型 小K动画网-AIGC视频动捕平台 地址&#xff1a;https://xk.yunbovtb.com/ 需要注册 生成的FBX文件&#xff0c;不能直接导入到blender中&#xff0c; 方法有2种&#xff1a; 第一种&#xff1a;需要转换一下&#x…...

编程日记 2024/6/4 19:37:06

掘金滑块验证码安全升级，继续破解

去年发过一篇文章&#xff0c;《使用前端技术破解掘金滑块验证码》&#xff0c;我很佩服掘金官方的气度&#xff0c;不但允许我发布这篇文章&#xff0c;还同步发到了官方公众号。最近发现掘金的滑块验证码升级了&#xff0c;也许是我那篇文章起到了一些作用&#xff0c;逼迫官…...

编程日记 2024/6/4 19:36:05

数据结构练习题——Java实现

20240531-时间复杂度 1、消失的数字 方法一&#xff1a;位运算 两个数字一样的数组&#xff0c;其中一个数组中少了一个数字&#xff0c;定义一个变量分别异或两个数组&#xff0c;结果即为缺少的数字 class Solution {public int missingNumber(int[] nums) {int xor 0;int…...

编程日记 2024/6/4 19:34:02

行为设计模式之状态模式

文章目录 概述定义结构图 2.代码示例小结 概述 定义 状态模式(state pattern)的定义: 允许一个对象在其内部状态改变时改变它的行为。 对象看起来似乎修改了它的类。 状态模式就是用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.。状态模式将一个对象的状态…...

编程日记 2024/6/4 19:33:01

找回以前的视频：技术与实践3个指南

你们有没有发现现在视频已经成为我们生活中不可或缺的一部分了&#xff1f;不管是在工作场合做演示、在学习时看教学视频&#xff0c;还是在休闲娱乐时追剧看电影&#xff0c;视频都扮演着超级重要的角色。 然而误删或手机故障的发生很可能将以前的视频清除。本文将深入探讨手…...

编程日记 2024/6/4 19:31:59

GCN 代码解析(一) for pytorch

Graph Convolutional Networks 代码详解 前言一、数据集介绍二、文件整体架构三、GCN代码详解3.1 utils 模块3.2 layers 模块3.3 models 模块3.4 模型的训练代码 总结 前言 在前文中&#xff0c;已经对图卷积神经网络&#xff08;Graph Convolutional Neural Networks, GCN&am…...

编程日记 2024/6/4 19:28:56

2024年云计算、信号处理与网络技术国际学术会议（ICCCSPNT 2024）

2024年云计算、信号处理与网络技术国际学术会议&#xff08;ICCCSPNT 2024&#xff09; 2024 International Academic Conference on Cloud Computing, Signal Processing, and Network Technology&#xff08;ICCCSPNT 2024&#xff09; 会议简介&#xff1a; 2024年云计算、…...

编程日记 2024/6/4 19:27:55

希尔排序法

希尔排序为插入排序的优化&#xff0c;即将数组分组&#xff0c;将每一组进行插入排序&#xff0c;每一组排成有序后&#xff0c;最后整体就变有序了。 上面gap2&#xff0c;即5&#xff0c;14&#xff0c;18&#xff0c;27&#xff0c;68为一组&#xff1b;13&#xff0c;20&a…...

编程日记 2024/6/4 19:25:53

thinkphp6.0版本下子查询sql处理

目录 一&#xff1a;背景 二&#xff1a;查询实例 三&#xff1a;总结 一&#xff1a;背景 我们在实际业务的开发过程中&#xff0c;经常会碰到这样的场景&#xff0c;查询某些部门的客户信息&#xff0c;查询下过订单的客户信息。这里查询客户信息实际上就用到了子查询&…...

编程日记 2024/6/4 19:21:49

flowable工作流 完成任务代码 及扩展节点审核人（实现多级部门主管 审核等）详解【JAVA+springboot】

低代码项目 使用flowable 工作流 完成任务代码 详解 可以看到 complete()方法 传递了流程变量参数var 前端传递此参数就可以实现 流程中 审批 更新流程变量参数var 也可以进行更多扩展 实现流程中更新表单内容功能 启动流程实例代码 实现对于流程自定义 动态节点审核人 功…...

编程日记 2024/6/4 19:20:47

【电源专题】一体成型电感为什么需要注意耐压问题

对于电感，我们在电路上使用的很多，如升压、降压、滤波等电路中基本上使用到了电感。电感的种类有很多，电感从不同的角度会有不同的分类。如可以根据否屏蔽、工艺类型、磁性材料类型等可分为多类，这在文章：【分立元件】电感器（inductor）——简介中有做了一些简单的介绍。…...

编程日记 2024/6/4 19:18:44

如何看待时间序列与机器学习？

GPT-4o 时间序列与机器学习的关联在于&#xff0c;时间序列数据是一种重要的结构化数据形式&#xff0c;而机器学习则是一种强大的工具&#xff0c;用于从数据中提取有用的模式和信息。在很多实际应用中&#xff0c;时间序列与机器学习可以结合起来&#xff0c;发挥重要作用。…...

编程日记 2024/6/4 19:16:43

vue图标不显示

静态:有可能路径错误 <img src"../../assets/images/index1.png"> <img src"/assets/images/index2.png"> 动态&#xff1a;需要解析 <div v-for"item in userList" :key"item.id"> <img :src"getUrl(i…...

编程日记 2024/6/4 19:14:40

文件夹如何加密码全攻略，5个文件夹加密方法新手也能学

文件夹如何加密码&#xff1f;在这个互联网时代&#xff0c;隐私保护越来越受到大家的重视。我们在日常工作中&#xff0c;有时候会接触一些比较重要的文件&#xff0c;为了不让这些文件信息被泄露&#xff0c;所以我们可以给文件夹设置密码保护。那要怎么给文件夹设置密码呢&a…...

编程日记 2024/6/4 19:12:33

useState和store的区别

useState 和 useStore 是 React 应用中用于管理数据状态的两种不同的 Hook。它们在功能和用途上有一些区别&#xff1a; useState useState 是 React 提供的一个 Hook&#xff0c;用于在函数组件中添加局部状态。每个 useState 调用都会返回一个数组&#xff0c;包含两个元素…...

编程日记 2024/6/4 19:11:32

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/8 4:37:41

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/2/7 9:27:22

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2026/2/4 16:29:27

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2026/2/7 7:52:41

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37