# layui-theme-dark
**Repository Path**: cqmk/layui-theme-dark
## Basic Information
- **Project Name**: layui-theme-dark
- **Description**: https://github.com/Sight-wcg/layui-theme-dark
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://github.com/Sight-wcg/layui-theme-dark
- **GVP Project**: No
## Statistics
- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-07-12
- **Last Updated**: 2026-03-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# layui-theme-dark
[Github](https://github.com/Sight-wcg/layui-theme-dark/) | [Demo](https://sight-wcg.github.io/layui-theme-dark/)
layui 深色主题
# 使用
将 [dist](./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](./ext) 目录，默认未集成
- [layui-soul-table](https://github.com/yelog/layui-soul-table)
- [xm-select](https://gitee.com/maplemei/xm-select)
# 构建
- 拉取代码
```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
```
# [浏览器支持](https://caniuse.com/?search=css%20vars)
Chrome 43+
Edge 16+
Firefox 31+
Safari 10+
# 常见问题
iframe 版 Admin，打开新页面会有闪烁?
- 方案一：将切换主题的代码放在 `` 标签中(推荐)
```js
```
- 方案二：创建 iframe 时，使用 `display:none` 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 `display:block`
```html