Home

Awesome

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.querySelector('#layui_theme_css').setAttribute('href','./layui-theme-dark.css')
// 恢复浅色主题
document.querySelector('#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">
<details><summary>跟随系统主题自动切换</summary>
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')
  }
});

</details> <details> <summary>持久化</summary>
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')))
})
</details>

第三方模块

对一些使用广泛的第三方模块行了支持,存放在 ext 目录,默认未集成

构建

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

npm install
npm run dev
npm run build

浏览器支持

<img src="https://api.iconify.design/devicon:chrome.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Chrome 43+ <br> <img src="https://api.iconify.design/logos:microsoft-edge.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Edge 16+ <br> <img src="https://api.iconify.design/logos:firefox.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Firefox 31+ <br> <img src="https://api.iconify.design/devicon:safari.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Safari 10+ <br> <img src="https://api.iconify.design/logos:internetexplorer.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> *IE 9+

常见问题

<details><summary>IE 下如何使用?</summary> </details> <details><summary>iframe 版 Admin,打开新页面会有闪烁?</summary> </details> <details><summary>如何处理图片?</summary> </details> <details><summary>我的项目对 layui 的样式二次定制过,可以使用吗?</summary><br>

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

</details>

一些可能有用的链接

许可证

MIT © 2023-present morning-star