Add in light mode (#1013)

tsadpbb · web-flow · commit 77f1e08fbe56 · 2024-12-16T17:24:56.000-06:00
* Add light mode
diff --git a/Changelog b/Changelog
@@ -5,6 +5,7 @@ Nagios Core 4 Change Log
 4.5.9 - 2024-XX-XX
 ------------------
 * Fix unreachable notifications (Dylan Anderson)
+* Add light option in new exfoliation theme (Dylan Anderson)
 * Fix authentication in trends.cgi (Dylan Anderson)
 
 4.5.8 - 2024-11-19
diff --git a/contrib/exfoliation/stylesheets/common.css b/contrib/exfoliation/stylesheets/common.css
@@ -91,6 +91,7 @@ not important:  blue             aaccff  777777
   --background: #000000;
   --foreground: #FFFFFF;
   --primary: #4D89F9;
+  --primary-foreground: #FAFAFA;
   --secondary-foreground: #D3DAE5;
   --muted-foreground: #8A92A1;
   --border: #28303E;
@@ -114,6 +115,32 @@ not important:  blue             aaccff  777777
   --error-msg-bg: #1C0202;
 }
 
+.light {
+  --background: #FFFFFF;
+  --foreground: #000000;
+  --primary: #4D89F9;
+  --secondary-foreground: #1A1A1A;
+  --muted-foreground: #3D3D3D;
+  --border: #D6D6D6;
+  --input: #FCFCFC;
+
+  --info-msg-text: #033281;
+  --info-msg-border: #0860F7;
+  --info-msg-bg: #DCE8FE;
+
+  --success-msg-text: #005C2E;
+  --success-msg-border: #47B880;
+  --success-msg-bg: #DBFFED;
+
+  --warning-msg-text: #5C5900;
+  --warning-msg-border: #E0D900;
+  --warning-msg-bg: #FFFEE5;
+
+  --error-msg-text: #710B09;
+  --error-msg-border: #DB2424;
+  --error-msg-bg: #FCD9D9;
+}
+
 #side {
   border: none;
   height: 100vh;
@@ -183,6 +210,21 @@ a:hover {
   margin-bottom: 10px;
 }
 
+.nagioslogo {
+  background-color: var(--foreground);
+}
+
+.nlogo {
+  mask: url(../images/logos/nagios-n-logo.svg) no-repeat center / contain;
+  height: 32px;
+}
+
+.fulllogo {
+  mask: url(../images/logos/horizontal-nagios-full-logo.svg) no-repeat center / contain;
+  height: 39px;
+  width: 140px;
+}
+
 div.navsection {
   display: flex;
   flex-direction: column;
@@ -401,7 +443,7 @@ ul.navsectionlinks li ul li a:hover {
 
 #splashlearnmore {
   background-color: var(--primary);
-  color: var(--foreground);
+  color: var(--primary-foreground);
   padding: 16px;
   border-radius: var(--radius);
 }
diff --git a/html/config.inc.php.in b/html/config.inc.php.in
@@ -6,6 +6,7 @@ $cfg['cgi_config_file']='@sysconfdir@/cgi.cfg';  // location of the CGI config f
 
 $cfg['cgi_base_url']='@cgiurl@';
 
+$cfg['theme']='dark'; // Valid themes are "dark" or "light". Defaults to dark if something else or not set
 
 // FILE LOCATION DEFAULTS
 $cfg['main_config_file']='@sysconfdir@/nagios.cfg';  // default location of the main Nagios config file
diff --git a/html/index.php.in b/html/index.php.in
@@ -1,4 +1,6 @@
 <?php
+require_once(dirname(__FILE__).'/config.inc.php');
+
 // Allow specifying main window URL for permalinks, etc.
 $url = 'main.php';
 
@@ -27,10 +29,14 @@ if ("@COREWINDOW@" == "yes" && isset($_GET['corewindow'])) {
 }
 
 $this_year = '2024';
+$theme = $cfg['theme'] ?? 'dark';
+if ($theme != 'dark' && $theme != 'light') {
+	$theme = 'dark';
+}
 ?>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 
-<html>
+<html class="<?= $theme ?>">
 <head>
 	<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
 	<title>Nagios: <?php echo $_SERVER['SERVER_NAME']; ?></title>
@@ -47,12 +53,19 @@ $this_year = '2024';
 			margin:0;
 		}
 
+		:root {
+			--border: #28303E
+		}
+
+		.light {
+			--border: #D6D6D6
+		}
+
 		iframe[name="side"] {
 			height: 100vh;
 			width: 200px;
 			border: none;
-			/* I don't like doing this but not sure of a better way */
-			border-right: 1px solid #28303E;
+			border-right: 1px solid var(--border);
 		}
 
 		iframe[name="main"] {
diff --git a/html/main.php b/html/main.php
@@ -3,10 +3,14 @@
 
 $this_version = '4.5.8';
 $this_year = '2024';
+$theme = $cfg['theme'] ?? 'dark';
+if ($theme != 'dark' && $theme != 'light') {
+	$theme = 'dark';
+}
 ?>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
-<html id="main">
+<html id="main" class="<?= $theme ?>">
 
 <head>
 
@@ -116,7 +120,7 @@ function setCoreStatusHTML(image, text) {
 		Nagios Core is licensed under the GNU General Public License and is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE WARRANTY OF DESIGN, MERCHANTABILITY, AND FITNESS FOR A PARTICULAR PURPOSE.  Nagios, Nagios Core and the Nagios logo are trademarks, servicemarks, registered trademarks or registered servicemarks owned by Nagios Enterprises, LLC.  Use of the Nagios marks is governed by the <A href="https://www.nagios.com/legal/trademarks/">trademark use restrictions</a>.
 	</div>
 	<div class="logos">
-		<a href="https://www.nagios.org/" target="_blank"><img src="images/logos/nagios-n-logo.svg" title="Nagios.org" /></a>
+		<a href="https://www.nagios.org/" target="_blank"><div class="nlogo nagioslogo"></div></a>
 	</div>
 </div>
 
diff --git a/html/side.php b/html/side.php
@@ -3,10 +3,14 @@
 
 $this_version = '4.5.8';
 $link_target = 'main';
+$theme = $cfg['theme'] ?? 'dark';
+if ($theme != 'dark' && $theme != 'light') {
+	$theme = 'dark';
+}
 ?>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
-<html id="side">
+<html id="side" class="<?= $theme ?>">
 
 <head>
 <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
@@ -18,7 +22,7 @@
 <body class='navbar'>
 
 <div class="navbarlogo">
-	<a href="https://www.nagios.org" target="_blank"><img src="images/logos/horizontal-nagios-full-logo.svg" height="39" width="140" border="0" alt="Nagios" /></a>
+	<a href="https://www.nagios.org" target="_blank"><div class="fulllogo nagioslogo"></div></a>
 </div>
 
 <div class="navsection">
diff --git a/html/stylesheets/common.css b/html/stylesheets/common.css
@@ -73,6 +73,19 @@ body.navbar a:hover,a:active {
 	margin: 0 0 10px 0;
 	}
 
+.nlogo {
+  mask: url(../images/logos/nagios-n-logo.svg) no-repeat center / contain;
+  height: 32px;
+  background-color: #000;
+}
+
+.fulllogo {
+  mask: url(../images/logos/horizontal-nagios-full-logo.svg) no-repeat center / contain;
+  height: 39px;
+  width: 140px;
+  background-color: #FFF;
+}
+
 .navsection {
 	margin: 5px 0 10px 0;
 	/*color: #AAA; */
