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.rhkb.cn/news/337704.html

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

相关文章

JS-Lodash工具库

文档&#xff1a;Lodash Documentation orderBy函数&#xff1a;根据条件进行排序 注&#xff1a;第一个是要排序的数组&#xff0c;第二个是根据什么字段进行排序&#xff0c;第三个是排序的方式&#xff08;desc倒序&#xff09; 安装方式&#xff1a;Lodash npm i lodash…

python判断文件是否存在

import os test_path "/Users/yxk/Desktop/test/GrayScale.tif" if(os.path.exists(test_path)):print(文件存在&#xff01;&#xff01;&#xff01;&#xff01;) else:print("文件不存在&#xff01;&#xff01;&#xff01;&#xff01;")结果如下 …

ABAP 借助公司封装的钉钉URL,封装的RFC给钉钉发送消息

FUNCTION ZRFC_BC_SMSSEND_DINGTALK. *"---------------------------------------------------------------------- *"*"本地接口&#xff1a; *" IMPORTING *" VALUE(DESTUSRID) TYPE CHAR255 *" VALUE(CONTENT) TYPE CHAR255 *&quo…

Linux 的权限

目录 Linux 的用户 root 用户 和 普通用户 如何新建普通用户&#xff1f; 如何切换用户&#xff1f; 一开始是以 root 用户登录&#xff1a; 一开始以普通用户登录&#xff1a; 如何删除用户&#xff1f; Linux文件权限 什么是读权限&#xff08; r &#xff09;&#…

自然语言处理学习路线

学习目标 NLP 系统知识&#xff08;从入门到入土&#xff09; 学习内容 NLP的基本流程&#xff1a;&#xff08;待更&#xff09;文本预处理&#xff08;标点符号处理、繁体转简体、分词Tokenizer&#xff09;&#xff1a;&#xff08;待更&#xff09;词袋模型&#xff08;TF…

校园志愿者|基于SprinBoot+vue的校园志愿者管理系统(源码+数据库+文档)

校园志愿者管理系统 目录 基于SprinBootvue的校园志愿者管理系统 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2管理员功能 3志愿者功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&a…

关于FPGA 使用SPI FLASH固化时如何配置固化参数

关于FPGA 使用SPI FLASH固化时如何配置固化参数 EDA工具&#xff1a;Vivado 关于FPGA 使用SPI FLASH固化时如何配置固化参数一、引言二、如何设置固化参数&#xff1a;使用50M的速度 &#xff0c;SPI为X4 &#xff0c;以及bit压缩第一&#xff1a;点open implenment design第二…

万字长文,小白新手怎么开始做YOLO实验,从零开始教!整体思路在这里,科研指南针!

最近专栏来了很多的新手小白&#xff0c;对科研实验的过程感到困惑和无从下手&#xff0c;这篇文章就来讲解一下整体的科研流程&#xff0c;从选择数据集到发表论文的各个步骤&#xff0c;并针对大家在实验中常犯的错误进行解答。并且为大家提供通向我其他相关博客的指引&#…

14.微信小程序之地理定位功能

目录 1.地理定位介绍 1.1 申请开通 1.2 使用方法 2.拒绝授权后的解决方案 3.开通腾讯位置服务 4.LBS 逆地址解析 1.地理定位介绍 小程序地理定位是指通过小程序开发平台提供的 API&#xff0c;来获取用户的地理位置信息。用户在使用小程序时&#xff0c;可以授权小程序获…

【儿童节特辑】用AI创造音乐,变身小小音乐家!

在儿童节这个充满欢笑的日子里&#xff0c;让我们一起探索如何用AI技术为孩子们准备一份特别的礼物——一张由AI生成的音乐专辑。&#x1f3b5;✨ &#x1f3bc; 文字变旋律&#xff1a;开启音乐创作之旅 想象一下&#xff0c;只需一段文字&#xff0c;就能编织出一曲悠扬悦耳…

年中汇报季?——一文教会你如何进行数据分析

一、常见的数据分析报告类型 数据分析报告通常可以分为三类&#xff1a;日常分析报告、专题型分析报告和综合性分析报告。前两者是以数据结论建议的格式去撰写&#xff0c;综合性分析报告则是&#xff1a;行业环境调研&#xff08;竞品类产品数据分析&#xff09;自身产品数据…

【计算机软考_初级篇】每日十题2

各位老师大家好&#xff0c;软考对于日常的知识储备和企业中的考试&#xff0c;或者说在校大学生来说&#xff0c;那用处是非常大的&#xff01;&#xff01;那么下面我们进入正题&#xff0c;软考呢是分两种语言&#xff0c;java和C&#xff0c;对于其他语言目前还没&#xff…

轻松记录收支明细,智能筛选并统计买菜历史记录:一键掌握家庭财务

在繁忙的生活中&#xff0c;你是否曾为家庭财务的琐碎而烦恼&#xff1f;买菜、购物、日常开销……每一笔支出都似乎难以捉摸&#xff0c;让你在月底对账时头疼不已。现在&#xff0c;我们为你带来了一款全新的财务记录工具&#xff0c;让你轻松记录收支明细&#xff0c;智能筛…

【验证码识别】Yolov8入门到实战点选验证码数据集分类训练,孪生训练,导出onnx,搭建部署接口

【验证码识别】Yolov8入门到实战点选验证码数据集分类训练&#xff0c;孪生训练&#xff0c;导出onnx&#xff0c;搭建部署接口 文章目录 【验证码识别】Yolov8入门到实战点选验证码数据集分类训练&#xff0c;孪生训练&#xff0c;导出onnx&#xff0c;搭建部署接口声明一、标…

Python使用动态代理的多元应用

Python作为一种功能强大且易于学习的编程语言&#xff0c;在网络编程领域具有广泛的应用。当Python与动态代理技术结合时&#xff0c;便开启了一扇通往更多可能性的大门。以下将深入探讨Python使用动态代理可以实现的多种应用。 首先&#xff0c;Python结合动态代理在网络爬虫…

【活动】GPT-4O:AI语言生成技术的新里程碑

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 GPT-4O&#xff1a;AI语言生成技术的新里程碑引言GPT系列简史回顾GPT-1: 初露锋…

创刊即王炸?首个IF近7分,稳坐中科院1区!同领域全球第一!

【欧亚科睿学术】 01 期刊基本概况 【期刊类型】经济类SSCI 【出版社】SPRINGER出版社 【期刊概况】IF&#xff1a;8.0-9.0&#xff0c;JCR1区&#xff0c;中科院1区 【版面类型】正刊&#xff0c;仅少量版面 【预警情况】2020-2024年无预警记录 【收录年份】2016年被WO…

I.MX6ULL主频和时钟配置实验

系列文章目录 I.MX6ULL主频和时钟配置实验 I.MX6ULL主频和时钟配置实验 系列文章目录一、前言二、I.MX6U 时钟系统详解三、硬件原理四、 7 路 PLL 时钟源五、时钟树简介六、内核时钟设置七、PFD 时钟设置八、AHB、IPG 和 PERCLK 根时钟设置九、实验程序编写十、编译下载10.1编写…

华为telnet的两种认证方式

华为telnet的两种认证方式 实验拓扑&#xff1a; 实验要求&#xff1a; 1.采用普通密码认证实现telnet 远程登录机房设备R3 2.采用AAA认证服务方式实现telnet 远程登录机房设备R3 实验步骤&#xff1a; 1.完成基本配置&#xff08;设备接口配置IP&#xff0c;此步骤略过&#…

戴尔向“数”而行,以“质”致远,做新质生产力的躬耕者

【全球存储观察 &#xff5c; 热点关注】 自1984年戴尔成立&#xff0c;一路走来&#xff0c;戴尔科技集团40年长期持续的技术创新&#xff0c;一直引领全球科技行业的技术趋势。 到如今&#xff0c;AIGC风行一时&#xff0c;在重塑千行百业的同时&#xff0c;也加速了科技行业…