Skip to content

layui/layui-theme-dark

 
 

Repository files navigation

layui-theme-dark

Github | Demo

layui 深色主题

使用

dist 文件夹中的 layui-theme-dark.css 添加到 layui 样式之后,通过切换 href 属性改变主题

<!-- HTML -->
<!--light-->
<link id="layui_theme_css" rel="stylesheet">
<!--dark-->
<link id="layui_theme_css" rel="stylesheet" href="./layui-theme-dark.css">
/** JavaScript */
// 设置为深色主题
document.getElementById('#layui_theme_css').setAttribute('href','./layui-theme-dark.css')
// 恢复浅色主题
document.getElementById('#layui_theme_css').removeAttribute('href')

也可以通过演示中的主题面板,自定义使用方式,例如自定义主题类选择器 .dark,通过改变 HTML 标签的类名切换主题

/** CSS 生成 */
:root{                      :root.dark{
  --color-bg: #000;           --color-bg: #000;
}                     ==>   }
.lay-card{                  .dark .lay-card{
  color: #FFF;                color: #FFF;
}                           }
/** 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.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+
*IE 9+

常见问题

IE 下如何使用?
  • 方案一:使用 dist/layui-theme-dark-legacy.css 文件

    该文件将 CSS 变量转换为实际颜色,并针对 IE 做了一些兼容性转换,测试支持 IE9+。 二次定制后如果需要支持 IE,可以通过 PostCSS 插件将 CSS 变量转换为实际颜色,这里有一个 PostCSS-CSS-Variables Playground 支持在线转换

  • 方案二:使用 css-vars-ponyfill

    使用方法请参考该项目的官方文档,测试支持 IE10+

iframe 版 Admin,打开新页面会有闪烁?
  • 方案一:创建 iframe 时,使用 display:none 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 display:block

    <iframe onload="this.style.display='block';" style="display:none;" >
  • 方案二:将切换主题的代码放在 <head> 中,缺点是会阻塞页面加载

  • 方案三:在服务端实现主题切换,以便在加载 HTML 时直接加载所选主题

如何处理图片?
  • 方案一:增加透明度,适用于简单图片和纯色背景

    .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);
    }
我的项目对 layui 的样式二次定制过,可以使用吗?

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

一些可能有用的链接

许可证

MIT © 2023-present morning-star

Releases

No releases published

Packages

No packages published

Languages

  • CSS 75.6%
  • JavaScript 16.1%
  • HTML 8.3%