light or dark hmmm

api/config/default.php

@@ -13,6 +13,7 @@ return array(
     'headerTextColor' => '',
     'lockScreen' => false,
     'theme'=>'Organizr',
+    'style'=>'dark',
     'plexURL' => '',
     'plexToken' => '',
     'plexID' => '',

api/functions/organizr-functions.php

@@ -351,6 +351,23 @@ function getCustomizeAppearance(){
 					'class' => 'themeChanger',
 					'value' => $GLOBALS['theme'],
 					'options' => getThemes()
+				),
+                array(
+					'type' => 'select',
+					'name' => 'style',
+					'label' => 'Style',
+					'class' => 'styleChanger',
+					'value' => $GLOBALS['style'],
+					'options' => array(
+                        array(
+                            'name' => 'Light',
+                            'value' => 'light'
+                        ),
+                        array(
+                            'name' => 'Dark',
+                            'value' => 'dark'
+                        )
+                    )
 				)
             ),
             'database' => array(

api/index.php

@@ -671,7 +671,8 @@ switch ($function) {
                 $status['tabs'] = loadTabs()['tabs'];
                 $result['data'] = $status;
                 $result['branch'] = $GLOBALS['branch'];
-                $result['theme'] = $GLOBALS['theme'];
+				$result['theme'] = $GLOBALS['theme'];
+                $result['style'] = $GLOBALS['style'];
                 $result['version'] = $GLOBALS['installedVersion'];
 				$result['sso'] = array(
                     'myPlexAccessToken' => isset($_COOKIE['mpt']) ? $_COOKIE['mpt'] : false,

api/pages/settings-customize-appearance.php

@@ -4,14 +4,14 @@ $pageSettingsCustomizeAppearance = '
 <script>
 	buildCustomizeAppearance();
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">Customize Appearance</span>
 		<button type="button" id="customize-appearance-reload" class="btn btn-primary btn-circle pull-right reload hidden m-r-5"><i class="fa fa-spin fa-refresh"></i> </button>
 		<button id="customize-appearance-reload" class="btn btn-sm btn-primary btn-rounded waves-effect waves-light pull-right reload hidden" type="button"><span class="btn-label"><i class="fa fa-spin fa-refresh"></i></span><span lang="en">Reload</span></button>
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark">
+        <div class="panel-body bg-org">
             <form id="customize-appearance-form" class="form-horizontal" onsbumit="return false;"></form>
         </div>
     </div>

api/pages/settings-image-manager.php

@@ -13,13 +13,13 @@ $pageSettingsImageManager = '
       }
     });
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">View Images</span>
         <button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-image-form" data-effect="mfp-3d-unfold"><i class="fa fa-upload"></i> </button>
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark" >
+        <div class="panel-body bg-org" >
         <div class="row el-element-overlay m-b-40" id="settings-image-manager-list"></div>
         </div>
     </div>

api/pages/settings-settings-logs.php

@@ -11,10 +11,10 @@ $(document).on("click", ".swapLog", function(e) {
 });
 </script>
 <div class="btn-group m-b-20">
-    <button type="button" class="btn btn-default btn-outline waves-effect bg-theme-dark swapLog active" data-name="loginLog" lang="en">Login Log</button>
-    <button type="button" class="btn btn-default btn-outline waves-effect bg-theme-dark swapLog" data-name="orgLog" lang="en">Organizr Log</button>
+    <button type="button" class="btn btn-default btn-outline waves-effect bg-org swapLog active" data-name="loginLog" lang="en">Login Log</button>
+    <button type="button" class="btn btn-default btn-outline waves-effect bg-org swapLog" data-name="orgLog" lang="en">Organizr Log</button>
 </div>
-<div class="white-box bg-theme-dark logTable loginLogDiv">
+<div class="white-box bg-org logTable loginLogDiv">
     <h3 class="box-title m-b-0" lang="en">Login Logs</h3>
     <div class="table-responsive">
         <table id="loginLogTable" class="table table-striped">
@@ -38,7 +38,7 @@ $(document).on("click", ".swapLog", function(e) {
         </table>
     </div>
 </div>
-<div class="white-box bg-theme-dark logTable orgLogDiv hidden">
+<div class="white-box bg-org logTable orgLogDiv hidden">
     <h3 class="box-title m-b-0" lang="en">Organizr Logs</h3>
     <div class="table-responsive">
         <table id="organizrLogTable" class="table table-striped">

api/pages/settings-settings-main.php

@@ -4,12 +4,12 @@ $pageSettingsSettingsMain = '
 <script>
 	buildSettingsMain();
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">Organizr Settings</span>
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark">
+        <div class="panel-body bg-org">
             <form id="settings-main-form" class="form-horizontal" onsbumit="return false;"></form>
         </div>
     </div>

api/pages/settings-settings-sso.php

@@ -4,12 +4,12 @@ $pageSettingsSettingsSSO = '
 <script>
 	buildSSO();
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">Single Sign-On</span>
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark">
+        <div class="panel-body bg-org">
             <form id="sso-form" class="form-horizontal" onsbumit="return false;"></form>
         </div>
     </div>

api/pages/settings-tab-editor-categories.php

@@ -14,7 +14,7 @@ $( \'#categoryEditorTable\' ).sortable({
     }
 });
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
         <span lang="en">Category Editor</span>
         <button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-category-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>

api/pages/settings-tab-editor-tabs.php

@@ -14,7 +14,7 @@ $( \'#tabEditorTable\' ).sortable({
     }
 });
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
         <span lang="en">Tab Editor</span>
         <button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-tab-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>

api/pages/settings-template.php

@@ -4,12 +4,12 @@ $pageSettingsTemplate = '
 <script>
 	//buildCustomizeAppearance();
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">Template</span>
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark">
+        <div class="panel-body bg-org">
         </div>
     </div>
 </div>

api/pages/settings-user-manage-groups.php

@@ -4,7 +4,7 @@ $pageSettingsUserManageGroups = '
 <script>
     buildGroupManagement();
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
         <span lang="en">MANAGE GROUPS</span>
         <button type="button" class="btn btn-info btn-circle pull-right popup-with-form" href="#new-group-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>

api/pages/settings-user-manage-users.php

@@ -4,7 +4,7 @@ $pageSettingsUserManageUsers = '
 <script>
     buildUserManagement();
 </script>
-<div class="panel bg-theme-dark panel-info">
+<div class="panel bg-org panel-info">
     <div class="panel-heading">
         <span lang="en">MANAGE USERS</span>
         <button type="button" class="btn btn-info btn-circle pull-right popup-with-form" href="#new-user-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>

api/pages/settings.php

@@ -139,7 +139,7 @@ $pageSettings = '
                             <div role="tabpanel" class="tab-pane fade active in" id="settings-settings-about">
     							<div class="row">
     								<div class="col-lg-6 col-sm-12 col-md-6">
-    									<div class="panel bg-theme-dark">
+    									<div class="panel bg-org">
     										<div class="p-30">
     											<div class="row">
     												<div class="col-xs-12"><img src="plugins/images/organizr/logo-wide.png" alt="organizr" class="img-responsive"></div>
@@ -159,7 +159,7 @@ $pageSettings = '
     									</div>
     								</div>
                                     <div class="col-lg-6 col-sm-12 col-md-6">
-                                        <div class="white-box bg-theme-dark">
+                                        <div class="white-box bg-org">
                                             <h3 class="box-title" lang="en">Information</h3>
                                             <ul class="feeds">
                                                 <li><div class="bg-info"><i class="mdi mdi-webpack mdi-24px text-white"></i></div><span class="text-muted hidden-xs" lang="en">Organizr Version</span> '.$GLOBALS['installedVersion'].'</li>
@@ -175,7 +175,7 @@ $pageSettings = '
                                         </div>
                                     </div>
                                     <div class="col-lg-6 col-sm-12 col-md-6">
-                                        <div class="well bg-theme-dark">
+                                        <div class="well bg-org">
                                             <h4 lang="en">Want to help translate?</h4>
                                             <p lang="en">Head on over to POEditor and help us translate Organizr into your language</p>
                                             <button class="fcbtn btn btn-primary btn-outline btn-1b"><a href="https://poeditor.com/join/project/T6l68hksTE" target="_blank" lang="en">I Want to Help</a></button>
@@ -187,7 +187,7 @@ $pageSettings = '
                             <div role="tabpanel" class="tab-pane fade" id="settings-settings-donate">
                                 <div class="row">
                                     <div class="col-md-3 col-sm-6 col-xs-12">
-                                        <div class="white-box bg-theme-dark">
+                                        <div class="white-box bg-org">
                                             <h1 class="m-t-0"><i class="fa fa-cc-visa text-info"></i></h1>
                                             <h2>**** **** **** 2150</h2> <span class="pull-right">Expiry date: 10/16</span> <span class="font-500">Johnathan Doe</span> </div>
                                     </div>

css/themes/Organizr.css

@@ -86,7 +86,7 @@ body {
 .bg-theme {
   background-color: #707cd2 !important;
 }
-.bg-theme-dark {
+.bg-org {
   background-color: #1f1f1f !important;
 }
 /*Button*/

index.php

@@ -21,10 +21,10 @@
 	<link href="plugins/bower_components/switchery/dist/switchery.min.css" rel="stylesheet" />
 	<link href="plugins/bower_components/jquery-asColorPicker-master/css/asColorPicker.css" rel="stylesheet">
 	<link href="plugins/bower_components/dropzone-master/dist/dropzone.css" rel="stylesheet" type="text/css" />
-	<link href="css/style.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
+	<link id="style" href="css/dark.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
 	<link href="css/organizr.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
 	<?php echo pluginFiles('css'); ?>
-	<link id="theme" rel="stylesheet">
+	<link id="theme" href="css/themes/organizr.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
 	<style type="text/css" id="user-appearance"></style>
 	<!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -86,7 +86,7 @@
 		<!-- ============================================================== -->
 		<!-- Page Content -->
 		<!-- ============================================================== -->
-		<div class="error-page bg-theme-dark"></div>
+		<div class="error-page bg-org"></div>
 		<div class="login-area hidden"></div>
 		<div class="p-0" id="page-wrapper">
 			<div class="organizr-area"></div>

js/custom.js

@@ -999,6 +999,9 @@ $(document).on('change asColorPicker::close', '#customize-appearance-form :input
     if($(this).hasClass('themeChanger')){
         changeTheme(value);
     }
+	if($(this).hasClass('styleChanger')){
+        changeStyle(value);
+    }
 
 });
 //DELETE IMAGE

js/functions.js

@@ -596,12 +596,12 @@ function buildPluginsItem(array){
 	<!-- Tab panes -->
 	<div class="tab-content">
 		<div role="tabpanel" class="tab-pane fade in active" id="settings-plugins-active">
-			<div class="panel bg-theme-dark panel-info">
+			<div class="panel bg-org panel-info">
 				<div class="panel-heading">
 					<span lang="en">Active Plugins</span>
 				</div>
 				<div class="panel-wrapper collapse in" aria-expanded="true">
-					<div class="panel-body bg-theme-dark">
+					<div class="panel-body bg-org">
 						<div class="row el-element-overlay m-b-40">`+activePlugins+`</div>
 					</div>
 				</div>
@@ -609,12 +609,12 @@ function buildPluginsItem(array){
 			<div class="clearfix"></div>
 		</div>
 		<div role="tabpanel" class="tab-pane fade" id="settings-plugins-inactive">
-			<div class="panel bg-theme-dark panel-info">
+			<div class="panel bg-org panel-info">
 				<div class="panel-heading">
 					<span lang="en">Inactive Plugins</span>
 				</div>
 				<div class="panel-wrapper collapse in" aria-expanded="true">
-					<div class="panel-body bg-theme-dark">
+					<div class="panel-body bg-org">
 						<div class="row el-element-overlay m-b-40">`+inactivePlugins+`</div>
 					</div>
 				</div>
@@ -736,7 +736,7 @@ function buildImageManagerViewItem(array){
 			var name = filepath[3].split(".");
 			imageListing += `
 			<div class="col-lg-1 col-md-1 col-sm-2 col-xs-4">
-				<div class="white-box bg-theme-dark m-0">
+				<div class="white-box bg-org m-0">
 					<div class="el-card-item p-0">
 						<div class="el-card-avatar el-overlay-1"> <img class="lazyload tabImages" data-src="`+v+`" width="22" height="22">
 							<div class="el-overlay">
@@ -1206,7 +1206,7 @@ function buildCategoryEditorItem(array){
 				<div class="el-card-item p-0">
 					<div class="el-card-avatar el-overlay-1 m-0">
 						<div class="tabEditorIcon">`+iconPrefix(v.image)+`</div>
-						<div class="el-overlay bg-theme-dark">
+						<div class="el-overlay bg-org">
 							<ul class="el-info">
 								<i class="fa fa-bars"></i>
 							</ul>
@@ -1241,7 +1241,7 @@ function buildTabEditorItem(array){
 				<div class="el-card-item p-0">
 					<div class="el-card-avatar el-overlay-1 m-0">
 						<div class="tabEditorIcon">`+iconPrefix(v.image)+`</div>
-						<div class="el-overlay bg-theme-dark">
+						<div class="el-overlay bg-org">
 							<ul class="el-info">
 								<i class="fa fa-bars"></i>
 							</ul>
@@ -1323,7 +1323,7 @@ function buildVersion(array){
 			button = '<button class="btn btn-sm btn-info btn-rounded waves-effect waves-light pull-right row b-none" type="button" onclick="updateNow();"><span class="btn-label"><i class="fa fa-download"></i></span><span lang="en">Install Update</span></button>';
 		}
 		versions += `
-		<div class="white-box bg-theme-dark">
+		<div class="white-box bg-org">
 			<div class="col-md-3 col-sm-4 col-xs-6 pull-right">`+button+`</div>
 			<h3 class="box-title">`+i+`</h3>
 			<div class="row sales-report">
@@ -1795,6 +1795,14 @@ function changeTheme(theme){
 	//$("#preloader").fadeOut();
 	console.log('Theme: '+theme);
 }
+function changeStyle(style){
+	//$("#preloader").fadeIn();
+	$('#style').attr({
+        href: 'css/' + style + '.css?v='+activeInfo.version
+    });
+	//$("#preloader").fadeOut();
+	console.log('Style: '+style);
+}
 function setSSO(){
 	$.each(activeInfo.sso, function(i,v) {
 		if(v !== false){
@@ -1831,6 +1839,7 @@ function launch(){
 			branch:json.branch,
 			sso:json.sso,
 			theme:json.theme,
+			style:json.style,
 			version:json.version
 		};
 		console.log("%cOrganizr","color: #66D9EF; font-size: 24px; font-family: Monospace;");
@@ -1838,6 +1847,7 @@ function launch(){
 		console.log("%cStarting Up...","color: #F92671; font-size: 12px; font-family: Monospace;");
 		checkMessage();
 		errorPage();
+		changeStyle(activeInfo.style);
 		changeTheme(activeInfo.theme);
 		setSSO();
 		switch (json.data.status.status) {