- 模板:public/header.html
- 作用:默认访问网站时,优先确认是否暗黑模式
<link id="layui_theme_css" rel="stylesheet" href="">
<script>
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) {
$('#layui_theme_css').attr('href','');
} else {
$('#layui_theme_css').attr('href','/static/assets/layui-v2.9.9/css/layui-theme-dark.css');
}
}
}
</script>
- 模板:public/footer.html
- 作用:侧加栏控制高亮
util.event('lay-header-event', {
menuLeft: function (othis) {
if ($('.layui-side').hasClass('layui-hide-xs')) {
$('.layui-side').removeClass('layui-hide-xs');
} else {
$('.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');
});
});
}
});
}
});