主题配置

admin/css/admin.css

@@ -207,13 +207,27 @@
 }
 
 
-/** 主 题 选 择 界 面 样 式 */
+/** 亮色侧边风格 */
-
+.light-theme .layui-logo {
-.pearone-color .color-title {
+	background-color: white !important;
-	padding: 15px 0 0px 20px;
+	color: black !important;
-	margin-bottom: 4px;
 }
 
+.light-theme .layui-side-scroll {
+	background-color: white !important;
+	color: black !important;
+}
+.light-theme .layui-side{
+	box-shadow: none;
+	border-right: 1px whitesmoke solid;
+}
+
+
+
+
+/** 主 题 选 择 界 面 样 式 */
+
+.pearone-color .color-title {padding: 15px 0 0px 20px;margin-bottom: 4px;}
 .pearone-color .color-content {
 	padding: 15px 10px 0 20px;
 
@@ -228,10 +242,10 @@
 	position: relative;
 	display: inline-block;
 	vertical-align: top;
-	width: 80px;
+	width: 70px;
 	height: 50px;
-	margin: 0 15px 15px 0;
+	margin: 0 20px 20px 0;
-	padding: 2px 2px 4px 2px;
+	padding: 2px 2px 2px 2px;
 	background-color: #f2f2f2;
 	cursor: pointer;
 	font-size: 12px;
@@ -292,59 +306,15 @@
 	line-height: 30px;
 }
 
-.more-setting {
+/** 友情链接 */
-
+.more-setting {margin-top: 45px;}
-	margin-top: 45px;
+.more-setting form {margin-top: 30px;}
-}
+.more-setting-title {padding: 15px 0 0px 20px;margin-bottom: 4px;}
-
+.more-setting .layui-form-label {width: 60px;}
-.more-setting form {
+.more-menu-list {width: 100%;margin-top: 80px;}
-	margin-top: 30px;
+.more-menu-item:first-child {border-top: 1px solid #e8e8e8;}
-}
+.more-menu-item .layui-icon {font-size: 18px;padding-right: 10px;}
-
+.more-menu-item {color: #595959;height: 50px;line-height: 50px;font-size: 16px;padding: 0 25px;border-bottom: 1px solid #e8e8e8;font-style: normal;display: block;}
-.more-setting-title {
+.more-menu-item:hover {background-color: whitesmoke;}
-	padding: 15px 0 0px 20px;
+.more-menu-item:after {color: #8c8c8c;right: 16px;content: "\e602";position: absolute;font-family: layui-icon !important;}
-	margin-bottom: 4px;
-}
-
-.more-setting .layui-form-label {
-	width: 60px;
-}
-
-.more-menu-list {
-	width: 100%;
-	margin-top: 80px;
-}
-
-
-.more-menu-item:first-child {
-	border-top: 1px solid #e8e8e8;
-}
-
-.more-menu-item .layui-icon {
-	font-size: 18px;
-	padding-right: 10px;
-}
-
-.more-menu-item {
-	color: #595959;
-	height: 50px;
-	line-height: 50px;
-	font-size: 16px;
-	padding: 0 25px;
-	border-bottom: 1px solid #e8e8e8;
-	font-style: normal;
-	display: block;
-}
-
-.more-menu-item:hover {
-	background-color: whitesmoke;
-}
-
-.more-menu-item:after {
-	color: #8c8c8c;
-	right: 16px;
-	content: "\e602";
-	position: absolute;
-	font-family: layui-icon !important;
-}
 

component/pear/css/pear-module/menu.css

@@ -135,10 +135,54 @@
 }
 /** 亮 样 式*/
 
+/** 亮 样 式*/
+
 .dark-theme .layui-nav-tree{
 	background-color: #28333E!important; 
 }
 
+.light-theme{
+	background-color: white!important;
+}
+
+.light-theme .pear-nav-tree,
+.light-theme .pear-nav-tree .layui-nav-child{
+	background-color: white!important;
+}
+
+.light-theme .pear-nav-tree a,
+.light-theme .pear-nav-tree .layui-nav-more{
+	color: dimgray!important;
+	border-top-color: dimgray;
+}
+
+.light-theme .pear-nav-tree .layui-nav-itemed>a>.layui-nav-more{
+	border-top-color: white!important;
+	border-bottom-color: dimgray!important;
+}
+
+.light-theme .pear-nav-tree .layui-nav-child{
+	padding-top: 0px;
+	padding-bottom: 0px;
+}
+
+.light-theme .pear-nav-tree .layui-this a,
+.light-theme .pear-nav-tree .layui-this{
+	color: white!important;
+	background-color: #5FB878!important;
+	
+}
+
+.light-theme .pear-nav-tree .layui-this a:hover{
+	background-color: #5FB878!important;
+	
+}
+ 
+.light-theme .pear-nav-tree .layui-nav-bar{
+	display: none;
+	
+}
+
 /** 下 拉 图 标 */
 .pear-nav-tree.arrow .layui-nav-more {
 	font-family: layui-icon !important;

component/pear/module/admin.js

@@ -23,6 +23,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 				this.bodyRender(option);
 				this.keepLoad(option);
 				this.logoRender(option);
+				this.themeRender(option);
 			}
 
 			this.logoRender = function(option) {
@@ -139,11 +140,86 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 			this.keepLoad = function(option) {
 
 				compatible()
-
 				setTimeout(function() {
+
 					$(".loader-main").fadeOut(option.done);
 				}, option.keepLoad)
 			}
+
+			this.themeRender = function(option) {
+				var colorId = localStorage.getItem("theme-color");
+				var menu = localStorage.getItem("theme-menu");
+
+				this.colorSet(getColorById(colorId).color);
+				this.menuSkin(menu);
+			}
+
+			this.menuSkin = function(theme) {
+				$(".pear-admin").removeClass("light-theme");
+				$(".pear-admin").removeClass("dark-theme");
+				$(".pear-admin").removeClass("night-theme");
+				$(".pear-admin").addClass(theme);
+			}
+
+			this.colorSet = function(color) {
+
+				var 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 + ' 2px 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 ($("iframe").contents().find("#customTheme").length > 0) {
+
+					$("iframe").contents().find("#customTheme").remove();
+				}
+
+				var theme = "<style>";
+				theme += '</style>';
+
+				$("iframe").contents().find("head").append(theme);
+				$("#pearadmin-bg-color").html(style);
+			}
 		};
 
 		$("body").on("click", ".collaspe,.pear-cover", function() {
@@ -224,14 +300,37 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 
 		$("body").on("click", ".setting", function() {
 
-			openRight();
+			var bgColorHtml =
+				'<li class="layui-this" data-select-bgcolor="dark-theme" >' +
+				'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
+				'<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
+				'<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
+				'</a>' +
+				'</li>';
 
-		})
+			bgColorHtml +=
+				'<li  data-select-bgcolor="light-theme" >' +
+				'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
+				'<div><span style="display:block; width: 20%; float: left; height: 12px; background: white;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
+				'<div><span style="display:block; width: 20%; float: left; height: 40px; background: white;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
+				'</a>' +
+				'</li>';
             
-		function openRight() {
+			bgColorHtml +=
-		    var themeHtml =	buildThemeHtml();
+				'<li  data-select-bgcolor="night-theme" >' +
+				'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
+				'<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: #28333E;"></span></div>' +
+				'<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #28333E;"></span></div>' +
+				'</a>' +
+				'</li>';
 
-			var linkHtml = buildLinkHtml();
+			var html =
+				'<div class="pearone-color">\n' +
+				'<div class="color-title">整体风格</div>\n' +
+				'<div class="color-content">\n' +
+				'<ul>\n' + bgColorHtml + '</ul>\n' +
+				'</div>\n' +
+				'</div>';
 
 			layer.open({
 				type: 1,
@@ -244,11 +343,28 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 				anim: -1,
 				skin: 'layer-anim-right',
 				move: false,
-				content: themeHtml + linkHtml,
+				content: html + buildColorHtml() + buildLinkHtml(),
 				success: function(layero, index) {
 
 					form.render();
 
+					var color = localStorage.getItem("theme-color");
+					var menu = localStorage.getItem("theme-menu");
+					
+					if (color != "null") {
+						$(".select-color-item").removeClass("layui-icon")
+							.removeClass("layui-icon-ok");
+
+						$("*[color-id='" + color + "']").addClass("layui-icon")
+							.addClass("layui-icon-ok");
+					}
+					
+					if (menu!="null"){
+						$("*[data-select-bgcolor]").removeClass("layui-this");
+						
+						$("[data-select-bgcolor='"+menu+"']").addClass("layui-this");
+					}
+					
 					$('#layui-layer-shade' + index).click(function() {
 						var $layero = $('#layui-layer' + index);
 						$layero.animate({
@@ -259,9 +375,9 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 					})
 				}
 			});
-		}
+		})
+
 
-		/** 同 步 请 求 获 取 数 据 */
 		function getData() {
 
 			$.ajaxSettings.async = false;
@@ -276,12 +392,26 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 		}
 
 		$('body').on('click', '[data-select-bgcolor]', function() {
+
 			var theme = $(this).attr('data-select-bgcolor');
 			$('[data-select-bgcolor]').removeClass("layui-this");
 			$(this).addClass("layui-this");
-			setColor(getThemeById(theme));
+			localStorage.setItem("theme-menu", theme);
+			pearAdmin.menuSkin(theme);
+
 		});
 
+		$('body').on('click', '.select-color-item', function() {
+
+			$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
+			$(this).addClass("layui-icon").addClass("layui-icon-ok");
+			var colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
+			localStorage.setItem("theme-color", colorId);
+			var color = getColorById(colorId);
+			pearAdmin.colorSet(color.color);
+		});
+
+
 		function getThemeById(id) {
 			var theme;
 			$.each(getData().theme, function(i, value) {
@@ -292,41 +422,15 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 			return theme;
 		}
 
-        function setColor(theme){
+		function getColorById(id) {
-			  
+			var color;
-			   console.log("传过来的主题"+JSON.stringify(theme));
+			$.each(getData().colors, function(i, value) {
-		
-				var theme = "<style>";
-			
-				theme += '</style>';
-			
-				$("#pearadmin-bg-color").html(style);
 
+				if (value.id == id) {
+					color = value;
 				}
-
-		function buildThemeHtml() {
-
-			var bgColorHtml = "";
-
-			$.each(getData().theme, function(i, value) {
-
-				bgColorHtml += '<li  data-select-bgcolor="'+value.id+'">' +
-					'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
-					'<div><span style="display:block; width: 20%; float: left; height: 12px; background: '+value.logoBgColor+';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: '+value.headerBgColor+';"></span></div>' +
-					'<div><span style="display:block; width: 20%; float: left; height: 40px; background: '+value.menuBgColor+';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
-					'</a>' +
-					'</li>';
 			})
-
+			return color;
-			var html =
-				'<div class="pearone-color">\n' +
-				'<div class="color-title">整体风格</div>\n' +
-				'<div class="color-content">\n' +
-				'<ul>\n' + bgColorHtml + '</ul>\n' +
-				'</div>\n' +
-				'</div>';
-
-			return html;
 		}
 
 		function buildLinkHtml() {
@@ -343,5 +447,20 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 			return '<div class="more-menu-list">' + links + '</div>';
 		}
 
+		function buildColorHtml() {
+
+			var colors = "";
+
+			$.each(getData().colors, function(i, value) {
+
+				colors += "<span class='select-color-item' color-id='" + value.id + "' style='background-color:" + value.color +
+					";'></span>";
+			})
+
+			return "<div class='select-color'><div class='select-color-title'>主题色</div><div class='select-color-content'>" +
+				colors + "</div></div>"
+
+		}
+
 		exports('admin', pearAdmin);
 	})

setting.json

@@ -9,92 +9,40 @@
 	"select": "0",
 	"logoTitle": "Pear Admin",
 	"logoImage": "admin/images/logo.png",
-	"theme": [{
+	"themeColor": "1",
-			"id": 1,
+	"colors": [{
-			"menuBgColor": "black",
+			"id": "1",
-			"menuActiveBgColor": "",
+			"color": "#FF5722"
-			"menuTextColor": "",
-			"logoColor": "",
-			"logoBgColor": "black",
-			"headerColor": "",
-			"headerActiveColor": "black",
-			"headerBgColor": "white",
-			"headerTextColor": ""
 		},
 		{
-			"id": 2,
+			"id": "2",
-			"menuBgColor": "black",
+			"color": "#5FB878"
-			"menuActiveBgColor": "black",
-			"menuTextColor": "",
-			"logoColor": "red",
-			"logoBgColor": "black",
-			"headerColor": "",
-			"headerActiveColor": "red",
-			"headerBgColor": "white",
-			"headerTextColor": ""
 		},
 		{
-			"id": 3,
+			"id": "3",
-			"menuBgColor": "black",
+			"color": "#1E9FFF"
-			"menuActiveBgColor": "black",
+		}, {
-			"menuTextColor": "",
+			"id": "4",
-			"logoColor": "red",
+			"color": "#FFB800"
-			"logoBgColor": "black",
+		}, {
-			"headerColor": "",
+			"id": "5",
-			"headerActiveColor": "red",
+			"color": "darkgray"
-			"headerBgColor": "white",
-			"headerTextColor": ""
-		},
-		{
-			"id": 4,
-			"menuBgColor": "black",
-			"menuActiveBgColor": "black",
-			"menuTextColor": "",
-			"logoColor": "red",
-			"logoBgColor": "black",
-			"headerColor": "",
-			"headerActiveColor": "red",
-			"headerBgColor": "white",
-			"headerTextColor": ""
-		},
-		{
-			"id": 5,
-			"menuBgColor": "black",
-			"menuActiveBgColor": "black",
-			"menuTextColor": "",
-			"logoColor": "red",
-			"logoBgColor": "black",
-			"headerColor": "",
-			"headerActiveColor": "red",
-			"headerBgColor": "white",
-			"headerTextColor": ""
-		},
-		{
-			"id": 6,
-			"menuBgColor": "black",
-			"menuActiveBgColor": "black",
-			"menuTextColor": "",
-			"logoColor": "red",
-			"logoBgColor": "black",
-			"headerColor": "",
-			"headerActiveColor": "red",
-			"headerBgColor": "white",
-			"headerTextColor": ""
 		}
 	],
 	"links": [{
-		"icon":"layui-icon layui-icon-home",
+			"icon": "layui-icon layui-icon-auz",
 			"title": "官方网站",
 			"href": "http://www.pearadmin.com"
 		},
 		{
-		"icon":"layui-icon layui-icon-read",
+			"icon": "layui-icon layui-icon-auz",
 			"title": "开发文档",
 			"href": "http://www.pearadmin.com"
 		},
 		{
-		"icon":"layui-icon layui-icon-note",
+			"icon": "layui-icon layui-icon-auz",
 			"title": "开源地址",
 			"href": "https://gitee.com/Jmysy/Pear-Admin-Layui"
-	}]
+		}
+	]
 }

view/console/console2.html

@@ -135,50 +135,50 @@
 								<h3>就眠仪式</h3>
 								<p>闭上眼睛进入秘密的宇宙，与最思念的那张脸打一场照面。</p>
 								<span>4月30日 22:43</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							<li>
 								<h3>Raccoon Core</h3>
 								<p>夏天真的来了，尽管它还有些犹豫。</p>
 								<span>4月30日 22:43</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							<li>
 								<h3>Min Box</h3>
 								<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
 								<span>4月30日 22:43</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							<li>
 								<h3>Pear Admin</h3>
 								<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
 								<span>4月30日 22:43</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							<li>
 								<h3>Ant Design</h3>
 								<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
 								<span>5月12日 01:25</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							</li>
 							<li>
 								<h3>Angular</h3>
 								<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
 								<span>6月11日 15:33</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							<li>
 								<h3>Bootstrap</h3>
 								<p>一切都在不可避免的走向庸俗。</p>
 								<span>2月09日 13:40</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 							<li>
 								<h3>Element UI</h3>
 								<p>路上没有灯火的时候，就点亮自己的头颅。</p>
 								<span>3月11日 12:30</span>
-								<a href="javascript:;" data-id="1" class="layui-btn layui-btn-xs pear-reply">回复</a>
+								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-success pear-reply">回复</a>
 							</li>
 						</ul>
 					</div>