三种方式实现主题切换方案
发布时间：2023-11-10 00:11:37 254 相关标签：
前端主题切换
有些时候我们在网站上会进行夜间/白天模式的切换。
这里我们介绍一种流行的切换模式 css变量 + 动态类名来进行切换
非常的简单。废话不多说。我们直接上代码。
第1种是通过 类名和变量来实现的
第2种是通过 属性和变量还实现的
最后1种 给body加 filter: invert(1);
设置两种模式的颜色
//白天模式
body {
--site-config-color-bar: #fff; //
--site-config-color-text: #555; //
--site-config-color-border: rgba(0, 0, 0, 0.12); //
--site-config-color-shadow: #eee; //
--site-config-color-introduce-border: #2196f3; //
--site-config-color-primary: #2196f3; //
--site-config-color-side-bar: #3a7afe; //
--site-config-color-side-bar-active-background: #3a7afe1a; //
}
//夜间模式
body.dark {
--site-config-color-bar: #1e1e1e; //
--site-config-color-text: #fff; //
--site-config-color-border: #333; //
--site-config-color-shadow: #121212; //
--site-config-color-introduce-border: #555; //
--site-config-color-primary: #96cbfe; //
--site-config-color-side-bar: #4a7afe; //
--site-config-color-side-bar-active-background: #4a7afe1a; //
}
ps:将这两种模式的代码放置在全局中。比如app.vue文件中。
反正要在项目的全局中可以使用就行了。
通过给body设置dark类名和移除类名来显示夜间和白天
v-for="(item,index) in leftData" :key="index">
{{item.name}}
我是标题
这些网站有夜间模式
https://varlet.gitee.io/varlet-ui/#/zh-CN/home
第2种-变量+属性
全局的颜色样式-app.vue中
在页面中的使用
还有没有更加简单的切换模式 --有的
给body加 filter: invert(1);
但是这一种只能够临时解决问题。
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
文章来源： https://blog.51cto.com/u_12553473/5871196
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
