Awesome
layui-theme-dark
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>-
方案一:使用
dist/layui-theme-dark-legacy.css
文件该文件将 CSS 变量转换为实际颜色,并针对 IE 做了一些兼容性转换,测试支持 IE9+。 二次定制后如果需要支持 IE,可以通过 PostCSS 插件将 CSS 变量转换为实际颜色,这里有一个 PostCSS-CSS-Variables Playground 支持在线转换
-
方案二:使用 css-vars-ponyfill
使用方法请参考该项目的官方文档,测试支持 IE10+
-
方案一:将切换主题的代码放在
<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;" >
-
方案三:在服务端实现主题切换,以便在加载 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); }
根据使用后的效果、适配成本和难度酌情使用
</details>一些可能有用的链接