# layui-theme-dark
**Repository Path**: wangwentaonuli_admin/layui-theme-dark
## Basic Information
- **Project Name**: layui-theme-dark
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-04
- **Last Updated**: 2024-06-04
## 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.css` 添加到 layui 样式之后，通过切换 href 属性改变主题
```html
```
```js
/** JavaScript */
// 设置为深色主题
document.getElementById('#layui_theme_css').setAttribute('href','./layui-theme-dark.css')
// 恢复浅色主题
document.getElementById('#layui_theme_css').removeAttribute('href')
```
也可以通过[演示](https://sight-wcg.github.io/layui-theme-dark/)中的主题面板，自定义使用方式，例如自定义主题类选择器 `.dark`，通过改变 HTML 标签的类名切换主题
```css
/** CSS 生成 */
:root{ :root.dark{
--color-bg: #000; --color-bg: #000;
} ==> }
.lay-card{ .dark .lay-card{
color: #FFF; color: #FFF;
} }
```
```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+
*IE 9+
# 常见问题
IE 下如何使用？
- 方案一：使用 `dist/layui-theme-dark-legacy.css` 文件
该文件将 CSS 变量转换为实际颜色，并针对 IE 做了一些兼容性转换，测试支持 IE9+。 二次定制后如果需要支持 IE，可以通过 PostCSS 插件将 CSS 变量转换为实际颜色，这里有一个 [PostCSS-CSS-Variables Playground](https://madlittlemods.github.io/postcss-css-variables/playground/) 支持在线转换
- 方案二：使用 [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill)
使用方法请参考该项目的[官方文档](https://jhildenbiddle.github.io/css-vars-ponyfill)，测试支持 IE10+
iframe 版 Admin，打开新页面会有闪烁?
- 方案一：创建 iframe 时，使用 `display:none` 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 `display:block`
```html