当前位置：网站首页>[ruoyi] set theme style

[ruoyi] set theme style

2022-07-06 02:46:00 【sayyy】

Preface

ruoyi 4.6.0

Ruoyi (ruoyi) The theme style of

In ruoyi (ruoyi) in , You can set skin and theme.
Insert picture description here

sys.index.skinName ： Main frame - Default skin style name , It can be taken as ： Blue skin-blue、 green skin-green、 violet skin-purple、 Red skin-red、 yellow skin-yellow
sys.index.sideTheme ： Main frame - Sidebar theme , It can be taken as ： Dark theme theme-dark, Light color theme theme-light, Dark blue theme theme-blue

Default theme style

Default theme style , And skin-blue Agreement .

Solve the problem of theme style flashing after setting theme style

stay templates/index.html Medium body Add class：

...
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden" th:classappend="${@config.getKey('sys.index.skinName') + ' ' + @config.getKey('sys.index.sideTheme')}" >
...

another , find JavaScript

//  Local theme first , System configuration is not set 
if($.common.isNotEmpty(skin)){
    
	$("body").addClass(skin.split('|')[0]);
	$("body").addClass(skin.split('|')[1]);
} else {
    
	$("body").addClass([[${
    sideTheme}]]);
	$("body").addClass([[${
    skinName}]]);
}

It is amended as follows ：

//  Local theme first , System configuration is not set 
if($.common.isNotEmpty(skin)){
    
	$("body").removeClass([[${
    sideTheme}]]);
	$("body").removeClass([[${
    skinName}]]);
	$("body").addClass(skin.split('|')[0]);
	$("body").addClass(skin.split('|')[1]);
}