当前位置：网站首页>【若依(ruoyi)】设置主题样式

【若依(ruoyi)】设置主题样式

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

前言

ruoyi 4.6.0

若依(ruoyi) 的主题样式

在若依(ruoyi)中，可以设置skin和theme。
在这里插入图片描述

sys.index.skinName ：主框架页-默认皮肤样式名称，可取值为：蓝色 skin-blue、绿色 skin-green、紫色 skin-purple、红色 skin-red、黄色 skin-yellow
sys.index.sideTheme ：主框架页-侧边栏主题，可取值为：深黑主题theme-dark，浅色主题theme-light，深蓝主题theme-blue

默认主题样式

默认主题样式，与skin-blue一致。

解决设置主题样式后的主题样式闪动问题

在templates/index.html中的body中添加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')}" >
...

另，找到JavaScript

// 本地主题优先，未设置取系统配置
if($.common.isNotEmpty(skin)){
    
	$("body").addClass(skin.split('|')[0]);
	$("body").addClass(skin.split('|')[1]);
} else {
    
	$("body").addClass([[${
    sideTheme}]]);
	$("body").addClass([[${
    skinName}]]);
}

修改为：

// 本地主题优先，未设置取系统配置
if($.common.isNotEmpty(skin)){
    
	$("body").removeClass([[${
    sideTheme}]]);
	$("body").removeClass([[${
    skinName}]]);
	$("body").addClass(skin.split('|')[0]);
	$("body").addClass(skin.split('|')[1]);
}