登录页增加黑暗主题切换

This commit is contained in:
thinkgem
2022-05-31 16:18:06 +08:00
parent 1e21b15201
commit 9dc50ca0d9
7 changed files with 20 additions and 8 deletions

View File

@@ -241,6 +241,7 @@ a, a:hover, a:active, a:focus, .form-unit, th[aria-selected=true] .ui-jqgrid-sor
.main-header .navbar .dropdown-menu li a {color:#ddd!important;}
.main-header .navbar .dropdown-menu li a:hover {background: #4c4c4c!important;}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a {border-color:#414141!important;}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>h4 {color:#ddd!important;}
.navbar-nav>.messages-menu>.dropdown-menu>li.header,.main-header .navbar .dropdown-menu li a,
.navbar-nav>.notifications-menu>.dropdown-menu>li.footer>a, .navbar-nav>.messages-menu>.dropdown-menu>li.footer>a,
.navbar-nav>.tasks-menu>.dropdown-menu>li.footer>a {background-color:#1a1a1a!important;border-color:#414141!important;color:#c6c6c6!important;}

View File

@@ -374,12 +374,11 @@ public class LoginController extends BaseController{
/**
* 切换主题风格
*/
@RequiresPermissions("user")
//@RequiresPermissions("user")
@RequestMapping(value = "switchSkin/{skinName}")
public String switchSkin(@PathVariable String skinName, HttpServletRequest request, HttpServletResponse response) {
LoginInfo loginInfo = UserUtils.getLoginInfo();
if (StringUtils.isNotBlank(skinName) && !"select".equals(skinName)){
CookieUtils.setCookie(response, "skinName_" + loginInfo.getId(), skinName);
CookieUtils.setCookie(response, "skinName", skinName);
return REDIRECT + adminPath + "/index";
}
return "modules/sys/switchSkin";

View File

@@ -441,6 +441,7 @@ shiro:
${adminPath}/login = authc
${adminPath}/logout = logout
${adminPath}/file/** = user
${adminPath}/switchSkin/* = anon
${adminPath}/sys/corpAdmin/treeData = anon
${adminPath}/cms/* = perms[cms:view]
${adminPath}/cms/site/select = user

View File

@@ -11,7 +11,7 @@
<ul class="nav navbar-nav">
<% include('/include/sysIndex/topMenuCorp.html'){} %>
<li><a href="javascript:" id="fullScreen" title="${text('全屏')}" data-placement="bottom" data-container="body"><i class="fa fa-arrows-alt"></i></a></li>
<li><a href="javascript:" id="switchSkin" title="${text('切换主题')}" style="margin-top:-1px;" data-placement="bottom" data-container="body" data-layer-width="600" data-layer-height="300"><i class="fa fa-dashboard"></i></a></li>
<li><a href="javascript:" id="switchSkin" title="${text('切换主题')}" style="margin-top:-1px;" data-placement="bottom" data-container="body" data-layer-width="680" data-layer-height="300"><i class="fa fa-dashboard"></i></a></li>
<% include('/include/sysIndex/topMenuLang.html'){} %>
<% include('/include/sysIndex/topMenuOnline.html'){} %>
<% include('/include/sysIndex/topMenuMsg.html'){} %>

View File

@@ -9,7 +9,7 @@
var themeName = @Global.getConfig('web.view.themeName', 'default');
// 获取当前皮肤样式名称详见jeesite-common项目下的static/adminlte/css/skins目录
var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light3');
var skinName = cookie('skinName_'+session.userCode, false, defaultSkinName);
var skinName = cookie('skinName', false, defaultSkinName);
print('<'+'!DOC'+'TYPE html'+'><'+'html class="'+skinName+'"><'+'head'+'>');
include('/include/head.html', {title: text(title!)}){}
include('/themes/'+themeName+'/include/header.html', {libs: libs!, skinName: skinName}){} %>

View File

@@ -174,7 +174,13 @@
<#form:checkbox name="tabPageModel" label="${text('取消页签模式')}" class="form-control"/>
</li>
<li style="float:left;width:100%;" id="skinDark">
<button class="full-opacity-hover mt10 form-control" data-skin="skin-dark">${text('黑暗模式')}</button>
<% var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light3');
var skinName = cookie('skinName', false, defaultSkinName);
if (skinName == 'skin-dark') { %>
<button class="full-opacity-hover mt10 form-control" data-skin="${defaultSkinName}">${text('浅色模式')}</button>
<% }else{ %>
<button class="full-opacity-hover mt10 form-control" data-skin="skin-dark">${text('黑暗模式')}</button>
<% } %>
</li>
</ul>
<% } %>
@@ -183,8 +189,6 @@ $('.full-opacity-hover').click(function(){
js.window.location = '${ctx}/switchSkin/' + $(this).data('skin');
});
$('#skinDark').toggle(!$('html').hasClass('skin-dark'));
$('#formLayerModel')
.iCheck(js.cookie('formLayerModel') == 'true' ? 'check' : 'uncheck')
.on('ifChecked', function(){

View File

@@ -11,6 +11,13 @@
</a>
</div>
<div class="login-box-body">
<% var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light3');
var skinName = cookie('skinName', false, defaultSkinName);
if (skinName == 'skin-dark') { %>
<a class="switchSkin" href="${ctxAdmin}/switchSkin/${defaultSkinName}" title="${text('浅色模式')}"><i class="fa fa-toggle-off"></i></a>
<% }else{ %>
<a class="switchSkin" href="${ctxAdmin}/switchSkin/skin-dark" title="${text('黑暗模式')}"><i class="fa fa-toggle-on"></i></a>
<% } %>
<% var isLoginByValidCode = @Global.getConfigToBoolean('user.loginByValidCode', 'true'); %>
<% if(isLoginByValidCode){ %>
<ul id="loginTab" class="nav nav-tabs">