如何用付费音乐做视频网站,名片网页设计代码,seo诊断工具网站,做量化投资网站⛰️个人主页: 蒾酒
#x1f525;系列专栏#xff1a;《vue3实战》 目录
内容概要
实现步骤
1.定义不同主题的css样式变量
2.入口main.ts中引入这个样式文件
3.主题样式css变量引用
4.设置默认主题样式
5.实现点击按钮主题切换
总结 最近发现了一个巨牛的人工智…
⛰️个人主页: 蒾酒
系列专栏《vue3实战》 目录
内容概要
实现步骤
1.定义不同主题的css样式变量
2.入口main.ts中引入这个样式文件
3.主题样式css变量引用
4.设置默认主题样式
5.实现点击按钮主题切换
总结 最近发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。 点击跳转到学习网站 内容概要
本文介绍一种基于css变量的主题切换实现方式这种是最简单最直接最容易理解的方式。 实现的原理就是定义不同的HTML根标签元素的样式通过data属性来区分不同主题css变量样式通过修改根元素的data属性值来加载不同的css变量实现主题切换。 实现步骤
1.定义不同主题的css样式变量
一般把该css文件放在styles目录下的theme.css里面 代码如下
/* 浅色色主题 */
html[data-themelight]{--page-bg: #ecf4fd;--bg1: #ffffff;--bg2: #ffffff;--txt-color: #000000;--prominent-txt-color :#ffffff;--prominent-color :#000000;
}
/* 暗色主题 */
html[data-themedark]{--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 langen data-themedarkheadmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0title我的工具箱/title/headbodydiv idapp/divscript typemodule src/src/main.ts/script/body
/html此时你的页面就变成深色主题了。
5.实现点击按钮主题切换
准备一个主题切换按钮 js部分代码
//当前主题
const themeref(dark)
//切换主题
const toggleTheme(){
//获取根元素并设置属性
document.documentElement.setAttribute(data-theme,theme.valuedark?light:dark)
theme.valuetheme.valuedark?light:dark
}
html部分 div classtheme clicktoggleTheme()div classtheme-imga href#div v-ifthemelightimg src../../assets/月亮 .png alt/divdiv v-ifthemedarkimg src../../assets/太阳.png alt/div/a/div/div
效果
点击切换即可。 总结 这种实现主题切换的原理就是通过 HTML 的 data 属性和 CSS 变量来动态改变页面的样式从而实现不同主题下的样式切换。当用户切换主题时只需改变 HTML 标签上的 data 属性的值页面的样式会自动更新为对应主题下的样式。
