迅睿CMS:使用Layui暗黑模式主题

  • 模板:public/header.html
  • 作用:默认访问网站时,优先确认是否暗黑模式
    <!--dark-->
    <link id="layui_theme_css" rel="stylesheet" href="">
    <script>
        // 换皮肤-Start
        function GetSkin() { //获取当前主题模式
            var SkinName = window.localStorage.getItem('customStyle');
            return SkinName;
        }
        var SkinName = GetSkin();
        if (SkinName) { //如果皮肤值存在
            ChangeSkin(SkinName); //对皮肤进行操作
        }

        function ChangeSkin(Str) {
            if (Str == 'LightSkin') { //阳光模式
                $('#layui_theme_css').attr('href','');
            } else if (Str == 'DarkSkin') { //黑暗模式
                $('#layui_theme_css').attr('href','/static/assets/layui-v2.9.9/css/layui-theme-dark.css');
                $('.SkinBtn').attr('style','background:#fff; color:#999;');
            } else if (Str == 'AutoSkin') { //自动模式
                    var currentTime = new Date();
                    var hours = currentTime.getHours();
                    if (hours > 8 && hours <= 18) { // 早上8点之后,晚上20点以前
                        $('#layui_theme_css').attr('href','');
                    } else {
                        $('#layui_theme_css').attr('href','/static/assets/layui-v2.9.9/css/layui-theme-dark.css');
                    }
            }
        }
        // 换皮肤-End
    </script>
  • 模板:public/footer.html
  • 作用:侧加栏控制高亮
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                // layer.msg('展开左侧菜单的操作', {icon: 0});
                if ($('.layui-side').hasClass('layui-hide-xs')) {
                    $('.layui-side').removeClass('layui-hide-xs');
                } else {
                    // 如果元素没有'myClass'这个class,执行这里的代码
                    $('.layui-side').addClass('layui-hide-xs');
                }
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '自定义设置',
                    content:
                        '<div class="r_kuai"><h4>查看模式(开发中)</h4>' +
                        '<div class="flex">' +
                        '<a href="javascript:;">默认</a>' +
                        '<a href="javascript:;">简洁</a>' +
                        '</div></div>' +
                        '<div class="r_kuai"><h4>主题(测试中)</h4>' +
                        '<div class="flex">' +
                        '<button class="SkinBtn" id="LightSkin">阳光</button>' +
                        '<button class="SkinBtn" id="DarkSkin" >黑夜</button>' +
                        '<button class="SkinBtn" id="AutoSkin">自动</button>' +
                        '</div></div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false,
                    success: function(){
                        // 在弹层中进行操作
                        $(document).ready(function () {
                            $("#LightSkin").on("click", function () {
                                if(GetSkin == 'LightSkin') return;
                                $('.SkinBtn').attr('style','');
                                $('#layui_theme_css').attr('href', '');
                                ChangeSkin('LightSkin');
                                window.localStorage.setItem('customStyle', 'LightSkin');
                            });
                            $("#DarkSkin").on('click', function () {
                                if(GetSkin == 'DarkSkin') return;
                                $('.SkinBtn').attr('style','background:#fff; color:#999;');
                                $('#layui_theme_css').attr('href','/static/assets/layui-v2.9.9/css/layui-theme-dark.css');
                                ChangeSkin('DarkSkin');
                                window.localStorage.setItem('customStyle', 'DarkSkin');
                            });
                            $("#AutoSkin").on('click', function () {
                                if(GetSkin == 'AutoSkin') return;
                                ChangeSkin('AutoSkin');
                                window.localStorage.setItem('customStyle', 'AutoSkin');
                            });
                        });
                    }
                });
            }
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值