root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

联动更改iframe内部主题色

develop
yang,yong 2021-01-16 22:48:49 +08:00
parent dd79c05ca5
commit f61e8f1d82
5 changed files with 123 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
component/pear/modules/admin.js
View File

@ -1,4 +1,4 @@
layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame'],
layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame', 'theme'],
function(exports) {
"use strict";
@ -8,7 +8,8 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
yaml = layui.yaml,
pearTab = layui.tab,
pearMenu = layui.menu,
pearFrame = layui.frame;
pearFrame = layui.frame,
pearTheme = layui.theme;
let bodyFrame;
let sideMenu;
@ -167,8 +168,16 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
$(".setting").remove();
}
const colorId = localStorage.getItem("theme-color");
const currentColor = getColorById(colorId);
localStorage.setItem("theme-color", currentColor.id);
localStorage.setItem("theme-color-context", currentColor.color);
var themeConfig = {
allowCustom: option.theme.allowCustom,
defaultColor: option.theme.defaultColor,
autoHead: option.other.autoHead,
}
pearTheme.changeTheme(window, themeConfig);
let menu = localStorage.getItem("theme-menu");
const color = getColorById(colorId);
if (menu === "null") {
menu = option.theme.defaultMenu;
} else {
@ -176,10 +185,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
menu = option.theme.defaultMenu;
}
}
localStorage.setItem("theme-color", color.id);
localStorage.setItem("theme-menu", menu);
localStorage.setItem("theme-color-context",color.color);
this.colorSet(color.color);
this.menuSkin(menu);
}
@ -189,56 +195,6 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
pearAdmin.removeClass("dark-theme");
pearAdmin.addClass(theme);
}
this.colorSet = function(color) {
let style = '';
// 自 定 义 菜 单 配 色
style +=
'.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +
color + '!important;}';
// 自定义 Logo 标题演示
style +=
'.pear-admin .layui-logo .title{color:' +
color + '!important;}';
// 自 定 义 标 签 配 色
style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +
'!important;}';
// 自 定 义 快 捷 菜 单
style += '.bottom-nav li a:hover{background-color:' +
color + '!important;}';
// 自 定 义 顶 部 配 色
style += '.pear-admin .layui-header .layui-nav .layui-nav-bar{background-color: ' + color + '!important;}'
// 自 定 义 加 载 配 色
style += '.ball-loader>span,.signal-loader>span {background-color: ' + color + '!important;}';
// 自 定 义 顶 部 配 色
style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color +
'!important;color:white!important;}';
// 自 定 义 加 载 配 色
style += '#preloader{background-color:' + color + '!important;}';
// 自 定 义 样 式 选 择 边 框 配 色
style +=
'.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +
color + ' 3px solid!important;}';
style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color +
'!important}';
style += '.pear-social-entrance {background-color:' + color + '!important}';
style += '.pear-admin .pe-collaspe {background-color:' + color + '!important}';
if(config.other.autoHead){
style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}';
}
$("#pearadmin-bg-color").html(style);
}
};
function collaspe() {
@ -378,9 +334,10 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
$(this).addClass("layui-icon").addClass("layui-icon-ok");
const colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
localStorage.setItem("theme-color", colorId);
const color = getColorById(colorId);
pearAdmin.colorSet(color.color);
const currentColor = getColorById(colorId);
localStorage.setItem("theme-color", currentColor.id);
localStorage.setItem("theme-color-context", currentColor.color);
pearTheme.changeTheme(window);
});
function applyConfig(param) {

96
component/pear/modules/theme.js Normal file
View File

@ -0,0 +1,96 @@
layui.define(["jquery","layer"], function (exports) {
var MOD_NAME = 'theme',
$ = layui.jquery;
var theme = {};
theme.config = {
allowCustom : false,
defaultColor : {},
autoHead : false
};
theme.changeTheme = function (target,themeConfig) {
if(themeConfig == undefined){
themeConfig = this.config;
}
this.themeRender(themeConfig);
if (target.frames.length == 0) return;
for (var i = 0; i < target.frames.length; i++) {
try {
if(target.frames[i].layui == undefined) continue;
target.frames[i].layui.theme.changeTheme(target.frames[i], themeConfig);
}
catch (error) {
console.log(error);
}
}
}
theme.themeRender = function (themeConfig) {
this.config = themeConfig;
const color = localStorage.getItem("theme-color-context");
this.colorSet(color);
}
theme.colorSet = function(color) {
let style = '';
// 自 定 义 菜 单 配 色
style +=
'.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +
color + '!important;}';
// 自定义 Logo 标题演示
style +=
'.pear-admin .layui-logo .title{color:' +
color + '!important;}';
// 自 定 义 标 签 配 色
style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +
'!important;}';
// 自 定 义 快 捷 菜 单
style += '.bottom-nav li a:hover{background-color:' +
color + '!important;}';
// 自 定 义 顶 部 配 色
style += '.pear-admin .layui-header .layui-nav .layui-nav-bar{background-color: ' + color + '!important;}'
// 自 定 义 加 载 配 色
style += '.ball-loader>span,.signal-loader>span {background-color: ' + color + '!important;}';
// 自 定 义 顶 部 配 色
style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color +
'!important;color:white!important;}';
// 自 定 义 加 载 配 色
style += '#preloader{background-color:' + color + '!important;}';
// 自 定 义 样 式 选 择 边 框 配 色
style +=
'.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +
color + ' 3px solid!important;}';
style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color +
'!important}';
style += '.pear-social-entrance {background-color:' + color + '!important}';
style += '.pear-admin .pe-collaspe {background-color:' + color + '!important}';
if(this.config.autoHead){
style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}';
}
style += '.layui-fixbar li {background-color:' + color + '!important}';
$("#pearadmin-bg-color").html(style);
}
theme.changeAll = function () {
console.log("change theme123");
}
exports(MOD_NAME, theme);
});

5
component/pear/pear.all.js
View File

@ -42,5 +42,8 @@ layui.config({
convert:"convert", // 数据转换
yaml:"yaml", // yaml 解析组件
context: "context", // 上下文组件
http: "http" // ajax请求组件
http: "http", // ajax请求组件
theme: "theme" // 主题转换
}).use(['layer', 'theme'], function () {
var pearTheme = layui.theme;
});

6
component/pear/pear.js
View File

@ -42,5 +42,9 @@ layui.config({
convert:"convert", // 数据转换
yaml:"yaml", // yaml 解析组件
context: "context", // 上下文组件
http: "http" // ajax请求组件
http: "http", // ajax请求组件
theme: "theme" // 主题转换
}).use(['layer', 'theme'], function () {
var pearTheme = layui.theme;
pearTheme.changeAll();
});

2
view/console/console1.html
View File

@ -8,6 +8,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/console1.css" />
<!-- 主 题 更 换 -->
<style id="pearadmin-bg-color"></style>
</head>
<body class="pear-container">
<div>