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>

效果:

点击切换即可。

总结

这种实现主题切换的原理就是通过 HTML 的 data 属性和 CSS 变量来动态改变页面的样式,从而实现不同主题下的样式切换。当用户切换主题时,只需改变 HTML 标签上的 data 属性的值,页面的样式会自动更新为对应主题下的样式。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux-buildroot,】

Linux-buildroot, ■ buildroot■ 1、简介■ 2、下载■ 2、编译■ 问题一&#xff1a;buildroot 编译的时候会先从网上下载所需的软件源码&#xff0c;下载cmake-3.8.2.tar.gz或下载很慢的情况 ■ buildroot-构建根文件系统■ 1、配置 buildroot■ 2、■ 3、 ■ buildroot-构建…

TK防关联引流系统:全球TikTok多账号运营的神器

在TikTok的生态中&#xff0c;高效运营多个账号已成为品牌全球推广的必经之路。为此&#xff0c;TK防关联引流系统应运而生&#xff0c;它是一款专为TikTok设计的效率神器&#xff0c;助您迅速搭建并管理全球多账号矩阵。该系统由先进的“防关联智能终端”硬件和智能的“TK防关…

AI生成微信职业头像

加油&#xff0c;新时代打工人&#xff01; 真别说&#xff0c;还挺好看的 https://chatglm.cn/main/alltoolsdetail

GPT-4o:免费且更快的模型

OpenAI GPT-4o 公告 OpenAI 推出了增强版 GPT-4 模型——OpenAI GPT-4o&#xff0c;用于支持 ChatGPT。首席技术官 Mira Murati 表示&#xff0c;更新后的模型速度更快&#xff0c;并在文本、视觉和音频处理方面有了显著提升。GPT-4o 将免费向所有用户开放&#xff0c;付费用户…

C++中类的访问权限及友元函数

目录 摘要 访问权限&#xff08;Access Specifiers&#xff09; 1. private 2. protected 3. public 友元函数&#xff08;Friend Functions&#xff09; 关键点 总结 摘要 C中的访问权限&#xff08;Access Specifiers -- private、protected、public&#xff09;和友…

shell脚本不用nohup如何在后台执行?

supervisord进程管理(go版本) 主要是托管自已的脚本 进程管理工具。 可以监听、启动、停止、重启一个或多个进程 用supervisord管理的进程,当一个进程意外被杀死,supervisord监听到进程死后,会自动将它重启,很方便的做到进程的自动恢复的功能,不在需要自己写脚本来控制 启动文…

乐高小人分类项目

数据来源 LEGO Minifigures | Kaggle 建立文件目录 BASE_DIR lego/star-wars-images/ names [YODA, LUKE SKYWALKER, R2-D2, MACE WINDU, GENERAL GRIEVOUS ] tf.random.set_seed(1)# Read information about dataset if not os.path.isdir(BASE_DIR train/):for name in …

plc scl编程语言:深度解析与应用探索

plc scl编程语言&#xff1a;深度解析与应用探索 在工业自动化领域&#xff0c;PLC&#xff08;可编程逻辑控制器&#xff09;扮演着至关重要的角色。而SCL&#xff08;结构化控制语言&#xff09;作为PLC的一种编程语言&#xff0c;因其强大的功能和灵活性备受青睐。本文将从…

利用 Docker 简化Redis部署:快速搭建Redis服务

利用 Docker 简化Redis部署&#xff1a;快速搭建Redis服务 目录 利用 Docker 简化Redis部署&#xff1a;快速搭建Redis服务为什么选择 Docker准备工作拉取Redis镜像快速运行Redis容器验证Redis服务总结 在现代软件开发中&#xff0c;Redis作为一种高性能的键值数据库&#xff0…

52 https

HTTPS是什么 https也是一个应用层协议&#xff0c;是在http协议的基础上引入了一个加密层 http协议内容都是按照文本的方式明文传输的&#xff0c;这就导致在传输过程中出现一些被篡改的情况 http和https是可以同时存在的&#xff0c;数据时从应用层自上往下发的&#xff0c…

简述浏览器和 Node.js 中的事件循环 ?

浏览器和Node.js中的事件循环都是用于处理异步任务和回调函数的机制&#xff0c;但它们在某些实现细节和用途上有所不同。下面分别对它们进行简述&#xff1a; 浏览器中的事件循环 目的&#xff1a; 浏览器事件循环是浏览器用于处理用户输入、网络请求、渲染和其他异步事件的机…

OVP、TVS、ESD二极管、稳压二极管的区别

本文介绍OVP、TVS、ESD二极管、稳压二极管简介及TVS与ESD的区别。 文章目录 一、简介1、过压保护&#xff08;OVP, Over-Voltage Protection&#xff09;3、稳压二极管&#xff08;Zener Diode 或齐纳二极管&#xff09;小结&#xff1a; 二、TVS&ESD的区别1、设计目标2、…

C++的PDF库

PDF&#xff08;Portable Document Format&#xff0c;可移植文档格式&#xff09;是一种由 Adobe Systems 开发并推出的文件格式。PDF 主要用于在不同平台和设备之间精确呈现文档&#xff0c;无论是在 Windows、macOS、Linux 还是其他操作系统上打开&#xff0c;文档的外观都保…

springboot 集成minio 实现文件上传

引入依赖 <dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.2.0</version> </dependency>因为我是后端开发需要使用knife4j <?xml version"1.0" encoding"UTF-8"…

数仓建模—ChatETL

数仓建模—ChatETL 前面我们介绍过ChatBI ,就是让用户通过自然语言对话的方式可以获取到自己想要的数据,然后通过合适的报表展示出来,其实我们可以将其理解为应用层面的技术创新,但是这个实现的前提就是我们底层已经有加工好的大量的数据模型数据表,并且有完善的元数据建…

vue3使用antdv 组件处理左边菜单栏,刷新菜单栏保持选中状态

//方法1 <a-menuv-model:selectedKeys"selectedKeys"theme"dark"mode"inline"click"activeMenu selectedKeys">const selectedKeys ref([sessionStorage.getItem("activeMenu") || "/home"]); const acti…

【Python】解决Python报错:AttributeError: ‘str‘ object has no attribute ‘xxx‘

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

每日刷题——相遇、宝石(模拟+数学)、相助(模拟+数组)、相依(dp的优化)

相遇 原题链接登录—专业IT笔试面试备考平台_牛客网 题目描述 运行代码 #include<iostream> using namespace std; int main(){ int a,b; cin>>a>>b; if(ab) { cout<<"p"; } else if(a - b 1 || (a 1 && b 3)){cout <<…

Kong网关命令详解

Kong网关的所有命令行指令都在 /usr/local/share/lua/5.1/kong/cmd 目录内。 cd /usr/local/share/lua/5.1/kong/cmdcheck.lua debug.lua hybrid.lua migrations.lua quit.lua restart.lua runner.lua stop.lua vault.lua config.lua health.lua init.lua prepare.…

系统架构设计师【第10章】: 软件架构的演化和维护 (核心总结)

文章目录 10.1 软件架构演化和定义的关系10.1.1 演化的重要性10.1.2 演化和定义的关系 10.2 面向对象软件架构演化过程10.2.1 对象演化10.2.2 消息演化10.2.3 复合片段演化10.2.4 约束演化 10.3 软件架构演化方式的分类10.3.1 软件架构演化时期10.3.2 软件架构静态演…