global theme

admin/data/menu.json

@@ -25,6 +25,13 @@
 			"type": 1,
 			"openType": "_iframe",
 			"href": "http://www.baidu.com"
+		}, {
+			"id": 15,
+			"title": "主题预览",
+			"icon": "layui-icon layui-icon-console",
+			"type": 1,
+			"openType": "_iframe",
+			"href": "view/system/theme.html"
 		}]
 	},
 	{

component/pear/modules/admin.js

@@ -171,7 +171,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
 				const currentColor = getColorById(colorId);
 				localStorage.setItem("theme-color", currentColor.id);
 				localStorage.setItem("theme-color-context", currentColor.color);
-				pearTheme.changeTheme(window, option.theme.autoHead);
+				pearTheme.changeTheme(window, option.other.autoHead);
 				let menu = localStorage.getItem("theme-menu");
 				if (menu === "null") {
 					menu = option.theme.defaultMenu;
@@ -332,7 +332,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
 			const currentColor = getColorById(colorId);
 			localStorage.setItem("theme-color", currentColor.id);
 			localStorage.setItem("theme-color-context", currentColor.color);
-			pearTheme.changeTheme(window, config.theme.autoHead);
+			pearTheme.changeTheme(window, config.other.autoHead);
 		});
 
 		function applyConfig(param) {

component/pear/modules/theme.js

@@ -7,12 +7,9 @@ layui.define(["jquery","layer"], function (exports) {
 
 	theme.changeTheme = function (target, autoHead) {
 		this.autoHead = autoHead;
-		
 		const color = localStorage.getItem("theme-color-context");
 		this.colorSet(color);
-
 		if (target.frames.length == 0) return;
-
 		for (var i = 0; i < target.frames.length; i++) {
 			try {
 				if(target.frames[i].layui == undefined) continue;
@@ -27,54 +24,33 @@ layui.define(["jquery","layer"], function (exports) {
 	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;}';
-		style +=
+		style += '.pear-admin .layui-logo .title{color:' + color + '!important;}';
-			'.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: ' +
+		style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +'!important;}';
-			color + '!important;}';
+		style += '.bottom-nav li a:hover{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 += '.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 +=
-			'.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}';
+		style += '.layui-fixbar li {background-color:' + color + '!important}';
 		if(this.autoHead){
 			style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}';
 		}
-
+		style += '.pear-btn.pear-btn-primary {background-color:' + color + '!important}';
-		style += '.layui-fixbar li {background-color:' + color + '!important}';
+		style += '.layui-input:focus,.layui-textarea:focus {border-color: '+ color +'!important;box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2)!important;}'
-
+		style += '.layui-form-checked[lay-skin=primary] i {border-color: '+ color +'!important;background-color: ' + color + ';}'
-		$("#pearadmin-bg-color").html(style);
+		style += '.layui-form-onswitch { border-color: ' + color + '; background-color: '+color+';}'
+		style += '.layui-form-radio>i:hover, .layui-form-radioed>i {color: ' + color + ';}'
+		var colorPane = $("#pear-admin-color");
+		if(colorPane.length>0){
+			colorPane.html(style);
+		}else{
+			$("head").append("<style id='pear-admin-color'>"+style+"</style>")
+		}
 	}
 
 	exports(MOD_NAME, theme);

component/pear/modules/yaml.js

@@ -6,11 +6,9 @@ layui.define(['jquery', 'element'], function(exports) {
 		element = layui.element;
 
 	var yaml = new function() {
-		
 		this.parse = function(str){
 			return YAML.parse(yamlString);
 		}
-
 		this.load = function(path){
 			return YAML.load(path);
 		}

component/pear/pear.all.js

@@ -11,7 +11,7 @@ window.rootPath = (function(src) {
  * */
 layui.config({
 	base: rootPath + "modules/",
-	version: "3.4.1.Release"
+	version: "3.4.2.Release"
 }).extend({
 	admin: "admin", 	// 框架布局组件
 	menu: "menu",		// 数据菜单组件
@@ -45,6 +45,6 @@ layui.config({
 	http: "http",			// ajax请求组件
 	theme: "theme"			// 主题转换
 }).use(['layer', 'theme'], function () {
-	var pearTheme = layui.theme;
+	
-	pearTheme.changeTheme(window, false);
+	layui.theme.changeTheme(window, false);
 });

component/pear/pear.js

@@ -11,7 +11,7 @@ window.rootPath = (function(src) {
  * */
 layui.config({
 	base: rootPath + "modules/",
-	version: "3.4.1.Release"
+	version: "3.4.2.Release"
 }).extend({
 	admin: "admin", 	// 框架布局组件
 	menu: "menu",		// 数据菜单组件
@@ -45,6 +45,6 @@ layui.config({
 	http: "http",			// ajax请求组件
 	theme: "theme"			// 主题转换
 }).use(['layer', 'theme'], function () {
-	var pearTheme = layui.theme;
+	
-	pearTheme.changeTheme(window, false);
+	layui.theme.changeTheme(window, false);
 });

index.html

@@ -10,9 +10,6 @@
 		<link rel="stylesheet" href="admin/css/load.css" />
 		<!-- 布 局 样 式 -->
 		<link rel="stylesheet" href="admin/css/admin.css" />
-		<!-- 主 题 更 换 -->
-		<style id="pearadmin-bg-color"></style>
-		<!-- 头 部 结 束 -->
 	</head>
 	<!-- 结 构 代 码 -->
 	<body class="layui-layout-body pear-admin">
@@ -86,8 +83,9 @@
 				var image = new Image();
 				image.src = "admin/images/avatar.jpg";
 				image.onload = function(){
-						$(".layui-nav-img").attr("src", convert.imageToBase64(image));
+					$(".layui-nav-img").attr("src", convert.imageToBase64(image));
 				}
+				
 				// 框架初始化时会读取 根目录下 pear.config.yml 文件作为初始化配置
 				// 你可以通过 admin.setConfigPath 方法修改配置文件位置
 				// 你可以通过 admin.setConfigType 方法修改配置文件类型

view/system/theme.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-header"></div>
+			<div class="layui-card-body">
+				<button class="pear-btn pear-btn-primary">Button</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header"></div>
+			<div class="layui-card-body">
+				<div class="layui-row layui-col-space10">
+					<div class="layui-col-md12">
+						<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
+					</div>
+					<div class="layui-col-md6">
+						<input type="text" name="title" hover placeholder="用户名" autocomplete="off" class="layui-input">
+					</div>
+					<div class="layui-col-md6">
+						<input type="text" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="layui-card layui-form" lay-filter="component-form-element">
+			<div class="layui-card-header">复选框</div>
+			<div class="layui-card-body layui-row layui-col-space10">
+				<div class="layui-col-md12">
+					<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
+					<input type="checkbox" name="" title="发呆" lay-skin="primary">
+					<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
+					<input type="checkbox" name="" lay-skin="primary">
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use('form',function(){
+			
+		})
+	</script>
+</html>

view/system/user.html

@@ -4,9 +4,6 @@
 		<meta charset="utf-8">
 		<title>用户管理</title>
 		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
-		<style>
-
-		</style>
 	</head>
 	<body class="pear-container">
 		<div class="layui-card">