联动更改iframe内部主题色

component/pear/modules/admin.js

@@ -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 currentColor = getColorById(colorId);
-			const color = getColorById(colorId);
+			localStorage.setItem("theme-color", currentColor.id);
-			pearAdmin.colorSet(color.color);
+			localStorage.setItem("theme-color-context", currentColor.color);
+			pearTheme.changeTheme(window);
 		});
 
 		function applyConfig(param) {

component/pear/modules/theme.js

@@ -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);
+});

component/pear/pear.all.js

@@ -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;
 });

component/pear/pear.js

@@ -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();
 });

view/console/console1.html

@@ -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>