Layui：v2.9.9 暗夜模式

最新推荐文章于 2025-06-01 09:01:02 发布

Dy大叔

最新推荐文章于 2025-06-01 09:01:02 发布

阅读量407

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端开发记录文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/xiediy/article/details/147816875

前端开发记录专栏收录该内容

38 篇文章

订阅专栏

第一步：下载

Github： https://github.com/Sight-wcg/layui-theme-dark

第二步：安装

将layui-theme-dark-master/dsit/layui-theme-dark.css存放在Layui使用程序对应的样式目录下

第三步：搭建

从https://layui.dev/docs/2/layout/获得框代码
在这里插入图片描述

第四步：顺序

在这里插入图片描述

第一行：Layui标准样式
第二行：自定义样式
第三行：暗黑样式

第五步：配置Class

在这里插入图片描述
导航自带浅色模式先配置上

自定义样式中加入无法用Layui控制的样式

	/*暗黑模式_S#Layui默认是黑白设成白色*/
	
	.layui-layout-admin.layui-header{
		background:#ffffff;
		box-shadow:01px2px0rgb(000/15%);
	}
	
	.layui-layout-admin.layui-logo{
		box-shadow:none;
	}
	
	.layui-layout-admin.layui-side{
		background-color:#fafafa!important
	}
	/*暗黑模式_E*/

暗黑样式中加入无法用Layui控制的样式

	/*diy@xdy_20240517*/
	.layui-layout-admin.layui-side{background-color:var(--lay-color-bg-2);}
○