book
鼠子Blog
「MDUI实现黑白主题切换」
search
brightness_6
MDUI实现黑白主题切换
鼠子
apps
Web前端
local_offer
暂无标签
timer
2024-07-25
分享本文
· MDUI实现黑白主题切换
QQ好友
QQ空间
新浪微博
Twitter(X)
Facebook
highlight_off
关闭
在写MioMoeV2的时候想实现一个点击按钮黑白主题切换的功能,直接上代码: 我已经在body标签引入了 ```html mdui-theme-layout-auto ``` 的class类名 ![QQ_1721867030410.png](https://blog.miomoe.cn/uploads/2024/07/2374514189.png) 新建一个按钮,id为 ```html toggleTheme ``` ![QQ_1721867387421.png](https://blog.miomoe.cn/uploads/2024/07/3293401914.png) ### 以下是MioMoe主题的JavaScript代码: ```javascript // 主题样式 // 切换主题并保存 document.getElementById('toggleTheme').addEventListener('click', function() { var body = document.body; var currentTheme = body.classList.contains('mdui-theme-layout-light') ? 'mdui-theme-layout-light' : body.classList.contains('mdui-theme-layout-dark') ? 'mdui-theme-layout-dark' : 'mdui-theme-layout-auto'; // 根据当前主题切换到下一个主题 switch (currentTheme) { case 'mdui-theme-layout-auto': body.classList.remove('mdui-theme-layout-auto'); body.classList.add('mdui-theme-layout-light'); localStorage.setItem('theme', 'mdui-theme-layout-light'); mdui.snackbar({ message: '当前为:浅色模式', position: 'right-bottom', }); break; case 'mdui-theme-layout-light': body.classList.remove('mdui-theme-layout-light'); body.classList.add('mdui-theme-layout-dark'); localStorage.setItem('theme', 'mdui-theme-layout-dark'); mdui.snackbar({ message: '当前为:深色模式', position: 'right-bottom', }); break; case 'mdui-theme-layout-dark': body.classList.remove('mdui-theme-layout-dark'); body.classList.add('mdui-theme-layout-auto'); localStorage.setItem('theme', 'mdui-theme-layout-auto'); mdui.snackbar({ message: '当前为:自动模式', position: 'right-bottom', }); break; } }); // 加载主题设置 document.addEventListener('DOMContentLoaded', function() { var body = document.body; var savedTheme = localStorage.getItem('theme'); if (savedTheme) { // 移除所有可能的主题类 body.classList.remove('mdui-theme-layout-auto', 'mdui-theme-layout-light', 'mdui-theme-layout-dark'); // 添加保存的主题类 body.classList.add(savedTheme); } }); ``` ![QQ_1721867503328.png](https://blog.miomoe.cn/uploads/2024/07/344745594.png)
本文链接:
https://blog.miomoe.cn/front-end/mdui-theme-layout.html
版权声明:
本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!
comment
暂无评论
所有评论
发表评论
万水千山总是情,评论一句行不行~
取消回复
account_circle
名称·Name
email
邮箱·E-Mail
link
主页链接·Link
提交评论
鼠子
ShuShuicu
鼠子的互联网笔记,记录一些有用的知识和
废话
。
search
分类归档
随机文章
home
首页
rss_feed
Reed
apps
文章分类
keyboard_arrow_up
随写
35
开发笔记
6
Web前端
5
WordPress
12
Typecho
11
服务器
0
网站导航
1
教程文档
2
软件工具
1
Games
1
GTA
3
MuseDash
0
年度总结
0
library_books
独立页面
keyboard_arrow_up
友情链接
关于博主
access_time
每月归档
keyboard_arrow_up
2024年9月
5
2024年8月
14
2024年7月
38
2024年6月
18
2024年5月
2
GTA三部曲MOD下载站
MioMoe主题上线!轻量化Typecho主题模板
Panda子主题专用 白山静态资源加速托管
MioMoe主题同款文章分类标题弹窗
MioMoe主题同款文章分类标题弹窗
add
cancel
code
keyboard_arrow_up
keyboard_arrow_down
search
brightness_medium