Add customize functionality in layouts

AramManukyan · AramManukyan · commit 1134e9f8c01d · 2015-12-27T13:43:57.000+04:00
diff --git a/src/app/app-blank-layout.hbs b/src/app/app-blank-layout.hbs
@@ -13,7 +13,19 @@
 		<!-- Place favicon.ico in the root directory -->
 
 		<link rel="stylesheet" href="css/vendor.css">
-		<link rel="stylesheet" href="css/app.css">
+		
+		<!-- Theme initialization -->
+		<script>
+			var themeSettings =  (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) : {};
+			var themeName = themeSettings.themeName || '';
+
+			if (themeName) {
+				document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
+			}
+			else {
+				document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
+			}
+		</script>
 	</head>
 	<body>
 		<div class="app blank sidebar-opened">
@@ -24,6 +36,10 @@
 				{{/block}}
 			</article>
 		</div>
+		<!-- Reference block for JS -->
+		<div class="ref" id="ref">
+			<div class="color-primary"></div>
+		</div>
 		<script src="js/vendor.js"></script>
 		<script src="js/app.js"></script>
 	</body>
diff --git a/src/auth/auth-layout.hbs b/src/auth/auth-layout.hbs
@@ -13,7 +13,19 @@
 		<!-- Place favicon.ico in the root directory -->
 
 		<link rel="stylesheet" href="css/vendor.css">
-		<link rel="stylesheet" href="css/app.css">
+		
+		<!-- Theme initialization -->
+		<script>
+			var themeSettings =  (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) : {};
+			var themeName = themeSettings.themeName || '';
+
+			if (themeName) {
+				document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
+			}
+			else {
+				document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
+			}
+		</script>
 	</head>
 	<body>
 		<div class="main-wrapper">
@@ -27,6 +39,10 @@
 				</article>
 			</div>
 		</div>
+		<!-- Reference block for JS -->
+		<div class="ref" id="ref">
+			<div class="color-primary"></div>
+		</div>
 		<script src="js/vendor.js"></script>
 		<script src="js/app.js"></script>
 	</body>
