layui 深色主题
npm install layui-theme-darklayui 深色主题
将 dist 文件夹中的 layui-theme-dark-selector.css 添加到 layui 样式之后,通过改变 HTML 标签的类名切换主题
``js`
/* JavaScript /
// 设置为深色主题
document.documentElement.classList.add('dark')
// 恢复浅色主题
document.documentElement.classList.remove('dark')
// 切换深/浅色主题
document.documentElement.classList.toggle('dark')
`html
...
...
`
CDN
`html`
跟随系统主题自动切换
`js
var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkThemeMediaQuery.addEventListener(function(e){
if(e.matches) {
document.documentElement.classList.add('dark')
}else{
document.documentElement.classList.remove('dark')
}
});
`
持久化
`js
var APPERANCE_KEY = 'layui-theme-mode-prefer-dark'
var savedPreferDark = localStorage.getItem(APPERANCE_KEY)
if(
savedPreferDark === 'true' ||
(!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
){
document.documentElement.classList.add('dark')
}
document.querySelector('#toggle-dark').addEventListener('click', function(){
var cls = document.documentElement.classList;
cls.toggle('dark');
localStorage.setItem(APPERANCE_KEY, String(cls.contains('dark')))
})
`
对一些使用广泛的第三方模块行了支持,存放在 ext 目录,默认未集成
- 拉取代码
`bash`
git clone https://github.com/Sight-wcg/layui-theme-dark.git
- 安装依赖
`bash
cd layui-theme-dark
npm install
`
- 运行
`bash`
npm run dev
- 构建
`bash`
npm run build
Chrome 43+
Edge 16+
Firefox 31+
Safari 10+
iframe 版 Admin,打开新页面会有闪烁?
- 方案一:将切换主题的代码放在
标签中(推荐)
`js
`
- 方案二:创建 iframe 时,使用 display:none 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 display:block
`html
`
> iframe 类型的 Admin 模板中的子页面,通过切换 href 属性动态引入样式文件会更方便,参考以下代码:layui-theme-dark/commit/8b36a8如何处理图片?
- 方案一:增加透明度,适用于简单图片和纯色背景
`css
.dark body img {
opacity: 0.8;
}
` - 方案二:叠加一个灰色半透明的层,适用于背景图,非纯色背景等
`css
.dark body .dark-mode-image-overlay {
position: relative;
} .daek body .dark-mode-image-overlay::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(50, 50, 50, 0.5);
}
``我的项目对 layui 的样式二次定制过,可以使用吗?
根据使用后的效果、适配成本和难度酌情使用
一些可能有用的链接
- 使用 CSS 自定义属性(变量)
- 使用编程方法测试媒体查询
- prefers-color-scheme