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

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

news 2026/4/3 6:57:24

⛰️个人主页:     蒾酒

🔥系列专栏：《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

手把手教你用Simulink复现EKF电池SOC估算模型（附完整模型文件）

从理论到实践&#xff1a;Simulink实现EKF电池SOC估算全流程解析 锂离子电池作为现代储能系统的核心组件&#xff0c;其荷电状态&#xff08;SOC&#xff09;的精确估算直接关系到电池管理系统的可靠性和安全性。扩展卡尔曼滤波&#xff08;EKF&#xff09;算法因其优秀的非线性…...

编程新知 2026/4/3 6:41:46

人脸分析系统快速上手教程：一键部署智能人脸检测工具

人脸分析系统快速上手教程&#xff1a;一键部署智能人脸检测工具 1. 系统介绍与核心功能 1.1 什么是人脸分析系统 人脸分析系统&#xff08;Face Analysis WebUI&#xff09;是一个基于InsightFace框架的智能人脸检测与分析工具。它能够自动识别图片中的人脸&#xff0c;并提…...

编程新知 2026/4/3 6:23:35

RCS 核心系统架构：AGV 调度“大脑”的底层逻辑

在现代智能物流与制造系统中&#xff0c;RCS&#xff08;Robot Control System&#xff09;作为 AGV 集群的核心调度中枢&#xff0c;扮演着"智慧大脑"的关键角色。不同于单台 AGV 的自主导航&#xff0c;RCS 需要解决多车协同、任务分配、路径规划与冲突避免等复杂问…...

编程新知 2026/4/3 6:13:09

OpenClaw技能组合：用Qwen2.5-VL-7B+OCR实现全自动发票报销

OpenClaw技能组合&#xff1a;用Qwen2.5-VL-7BOCR实现全自动发票报销 1. 为什么需要自动化发票报销 每次月底整理发票都让我头疼——需要手动截图、识别金额、填写报销单、发送邮件。直到我发现OpenClaw可以通过组合多个技能模块&#xff0c;实现从截图识别到财务审核的全流程…...

编程新知 2026/4/3 5:44:50

万象视界灵坛代码实例：批量处理百张图像并导出CSV格式语义匹配报告

万象视界灵坛代码实例&#xff1a;批量处理百张图像并导出CSV格式语义匹配报告 1. 项目概述与核心价值 万象视界灵坛是一款基于OpenAI CLIP模型的高级多模态智能感知平台&#xff0c;它将复杂的图像语义分析转化为直观的交互体验。不同于传统视觉识别工具&#xff0c;该平台采…...

编程新知 2026/4/3 5:08:08

掰开揉碎魔改claudecode后，我盯着 Claude Code 跑了一圈，终于看懂顶级 AI Agent是如何炼成的

开头先来一句狠的很多人以为&#xff0c;Claude Code 之所以强&#xff0c;是因为模型更聪明。但我把它运行时真正生效的 Payload 抓出来之后&#xff0c;结论反而更明确了&#xff1a;顶级 AI Agent 的差距&#xff0c;很多时候不在模型本身&#xff0c;而在它背后那套“怎么约…...

编程新知 2026/4/3 4:39:46

Qwen3.5-9B企业应用：法务合同关键条款提取+风险点标注案例

Qwen3.5-9B企业应用&#xff1a;法务合同关键条款提取风险点标注案例 1. 项目背景与价值 在法务工作中&#xff0c;合同审查是一项耗时且容易出错的任务。传统的人工审查方式需要律师逐条阅读合同文本&#xff0c;识别关键条款并标注潜在风险点&#xff0c;这个过程通常需要数…...

编程新知 2026/4/3 4:23:28

PyTorch实战：如何用潜在扩散模型生成高清图像（附DDPM/DDIM/PLMS对比）

PyTorch实战&#xff1a;潜在扩散模型采样方法全面评测与优化指南 1. 潜在扩散模型核心架构解析 潜在扩散模型&#xff08;Latent Diffusion Models, LDM&#xff09;已成为当前生成式AI领域最具突破性的技术之一。与直接在像素空间操作的扩散模型不同&#xff0c;LDM通过变分自…...

编程新知 2026/4/3 4:19:27

OpenClaw压力测试：千问3.5-9B持续运行24小时稳定性

OpenClaw压力测试&#xff1a;千问3.5-9B持续运行24小时稳定性 1. 为什么需要压力测试&#xff1f; 上周我在本地部署了OpenClaw千问3.5-9B组合&#xff0c;想用它自动处理一些日常文档整理工作。最初几小时运行很顺畅&#xff0c;但第二天早上发现系统卡死了——这让我意识到…...

编程新知 2026/4/3 3:14:42

如何基于OpenAI进行Function Calling调用

基于LLM进行工具调用或技能执行&#xff0c;是近期最热门的话题之一。 目前已经有很多LLM工具调用框架&#xff0c;比如langchain、openclaw、owl等。 然而&#xff0c;工具调用过程一般被封装在框架内&#xff0c;用户一般只能接触到各种配置&#xff0c;窥探不到调用细节。…...

编程新知 2026/4/3 3:14:42