layui-theme-dark

v2.10.0

Published

10 months ago

layui 深色主题

0High
0Medium
0Low

morning-star

layui-theme-dark

Github | Demo

layui 深色主题

使用

将 dist 文件夹中的 layui-theme-dark-selector.css 添加到 layui 样式之后，通过改变 HTML 标签的类名切换主题

/** JavaScript */
// 设置为深色主题
document.documentElement.classList.add('dark')
// 恢复浅色主题
document.documentElement.classList.remove('dark')
// 切换深/浅色主题
document.documentElement.classList.toggle('dark')

<!-- HTML -->
<!--light-->
<html> ... </html>

<!--dark-->
<html class="dark"> ... </html>

CDN

<link rel="stylesheet" href="https://unpkg.com/layui-theme-dark/dist/layui-theme-dark-selector.css">

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')
  }
});

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 目录，默认未集成

构建

拉取代码

git clone https://github.com/Sight-wcg/layui-theme-dark.git

安装依赖

cd layui-theme-dark

npm install

运行

npm run dev

构建

npm run build

浏览器支持

Chrome 43+ Edge 16+ Firefox 31+ Safari 10+

常见问题

方案一：将切换主题的代码放在 <head> 标签中(推荐)

<script>
(function(){
  window.APPERANCE_KEY = 'theme-mode'
  var headTagEl = document.getElementsByTagName('head')
  var linkTagEl = document.createElement('link')
  var savedPreferTheme= localStorage.getItem(APPERANCE_KEY)

  if(savedPreferTheme === 'dark'){
    linkTagEl.href = '' // 这里写文件链接
    linkTagEl.rel='stylesheet'
    linkTagEl.id='layui_theme_css'
    headTagEl[0].appendChild(linkTagEl)
    document.documentElement.className += ' dark'
  }
})();
</script>

方案二：创建 iframe 时，使用 display:none 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 display:block
```
<iframe onload="this.style.display='block';" style="display:none;" >
```
iframe 类型的 Admin 模板中的子页面，通过切换 href 属性动态引入样式文件会更方便，参考以下代码：layui-theme-dark/commit/8b36a8

方案一：增加透明度，适用于简单图片和纯色背景
```
.dark body img {
   opacity: 0.8;
}
```

方案二：叠加一个灰色半透明的层，适用于背景图，非纯色背景等

.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);
}

根据使用后的效果、适配成本和难度酌情使用

一些可能有用的链接

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

layui-theme-dark

使用

第三方模块

构建

浏览器支持

常见问题

许可证