🌗 Layui 官网增加深色主题切换

今天 Layui 文档官网 layui.dev 新增了「深色模式」的功能开关，该模式采用的是晨星@morning-star 贡献的 layui-theme-dark ，这套主题对 Layui 深色模式进行了很好的支持。考虑到开发者们长期对着电脑，加之新官网默认的色系太亮，因此率先添加了深色主题的模式切换，并进行了一些简单的适配。

深色主题模式可减少屏幕高亮度对眼睛的刺激，也推荐大家用起来，助力该主题更加完善。
Layui 深色主题项目地址：https://github.com/Sight-wcg/layui-theme-dark

截图来自：https://layui.dev

其他相关资源：

#I7KVPB:分享按照layui官网写的layuiadmin深色模式，有需要自取

感谢大佬分享

非常感谢您的支持！

哈感觉舒服多了

赞一个！

66666

深色主题能否简单说明下如何使用

参考 readme
https://github.com/Sight-wcg/layui-theme-dark#readme

demo有个bug,用layui自带白天|黑夜开关，如果给定了初始值，刷新页面后，开关上的白天黑夜的图标会消失。输入图片说明

这个是复选框标题模板的问题，2.8.4 已经修复，发版后就会正常。

好的

https://layui.dev 访问慢怎么办，有时候还打不开

我在后台用TAB组件来实现后台的多页签的功能，并用增加了切换深色主题的模式。发现有一个问题：
用tabAdd增加页面时，在刚打开时会先白屏，接着才会变为深色。没有找到在哪可以改这个。
输入图片说明

如果是 iframe 模式，在添加 tab 时，使用 display:none 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 display:block。

<iframe onload="this.style.display='block';" style="display:none;" >

以下是简单的伪代码，请根据你的实现做适当的调整。

 // 加载动画
layer.load(1)
// 如果是 iframe 模式
if (options.type === 'iframe') {
  containerDom.html(`<iframe src=${url}>`);
  // 找到 tab 中对应的 iframe 元素
  var currentIframe = containerDom.find('iframe')
  // 隐藏 iframe
  currentIframe.css({display:'none'})
  currentIframe.on('load',function(){
    // 显示 iframe, 关闭加载动画
    this.style.display = 'block'
    layer.closeAll('loading');
  })
}

如果是 SPA 模式，通常不会有闪烁，只需使用加载动画

THANKS，果然有效。

可以加强下自定义颜色吗，现在只能整体改一点？能不能出个精简版，把 green,red,blue那些都去掉？

可以加强下自定义颜色吗，现在只能整体改一点？

目前整理 token 意义不大，因为无法完全对齐原版主题。

能不能出个精简版，把 green,red,blue那些都去掉？

完全去掉是不可能的，会破坏样式优先级。现在新增了一个精简版，适配现有基于 layui 的项目应该会更容易，但这个在细节处理上不如原来的。https://github.com/Sight-wcg/layui-theme-dark/tree/master/dist

下次记得在对应仓库提问，以获得更快的回复和解决方案。

谢谢，可是“精简版”又不支持css变量,还有很多没用的类都能去掉呀,就不能一步到位吗？🤡

能不能获得layuiadmin授权啊，以前一直用layui，后来以为不更新了，结果又发现找到原作者了。。。

GVP Layui / layui

内容风险标识

其他相关资源：

评论 (18)

GVPLayui / layui

内容风险标识