2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

layui设置主题色

已完成
创建于  
2023-05-12 21:18

说明

  • 版本: 2.8.2
  • 描述: 怎么设置主题色

代码

输入图片说明

官网的主题色都是绿色,要改成其他色怎么改,

评论 (1)

WUhoney 创建了任务

更新了示例代码
https://codepen.io/Sight-wcg/pen/yLREmeM
输入图片说明

  1. 使用正则表达式动态替换颜色制作主题,可以根据需求扩展,将其封装成模块来使用
    https://codepen.io/Sight-wcg/pen/ExdRoaE
      var VERSION='2.8.2';
      var url=`https://unpkg.com/layui@${VERSION}/dist/css/layui.css`;

      var predefine=['#16baaa'];
      var newColors=['#1e9fff'];
      var style='';

      // 事件
      util.on('lay-on',{
        'change': function() {
          $.get(url).done(function(res) {
            style=res.replace(/@font-face{[^}]+}/,'');
            layer.msg('ok')
            var newStyle = '';
             predefine.forEach((color,index) => {
               newStyle=style.replace(new RegExp(color,'ig'),newColors[index])
             })
             addStyle('customTheme',newStyle);
          })
        }
      );

      function addStyle(id,cssStr) {
        var el=document.getElementById(id)||document.createElement('style');
        if(!el.isConnected) {
          el.type='text/css';
          el.id=id;
          document.head.appendChild(el);
        }
        el.textContent=cssStr;
      }

输入图片说明

  1. 参考 pear admin layui 中的 theme 模块
    https://gitee.com/pear-admin/Pear-Admin-Layui/blob/main/component/pear/module/theme.js

推荐第一个方法,虽然实现比较粗暴,但很有效且容易维护。第二种好处是容易控制主色的替换范围。

贤心 添加了
 
精华
标签
贤心 添加了
 
常见
标签
贤心 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
7407590 starsatdawn 1700900251
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891