From 4378ff7add666a36a5762b2220e9fbe9b9f9e599 Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Mon, 15 Feb 2021 19:02:13 +0000
Subject: [PATCH] Implement night mode toggle in top navbar

---
 app/js/custom.js       | 11 +++++++++++
 includes/functions.php | 10 ++++++++++
 index.php              |  7 ++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/js/custom.js b/app/js/custom.js
index dcb05797..28609abe 100644
--- a/app/js/custom.js
+++ b/app/js/custom.js
@@ -397,6 +397,17 @@ function set_theme(theme) {
     setCookie('theme',theme,90);
 }
 
+$(function() {
+    $('#night-mode').change(function() {
+        var state = $(this).is(':checked');
+        if (state == true && getCookie('theme') != 'lightsout.css') {
+            set_theme('lightsout.css');
+        } else {
+            set_theme('custom.php');
+        }
+   });
+});
+
 function setCookie(cname, cvalue, exdays) {
     var d = new Date();
     d.setTime(d.getTime() + (exdays*24*60*60*1000));
diff --git a/includes/functions.php b/includes/functions.php
index 7593df18..1ca27d7d 100755
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -720,3 +720,13 @@ function validate_host($host) {
   return preg_match('/^([a-z\d](-*[a-z\d])*)(\.([a-z\d](-*[a-z\d])*))*$/i', $host);
 }
 
+// Gets night mode toggle value
+// @return boolean
+function getNightmode(){
+    if ($_COOKIE['theme'] == 'lightsout.css') {
+        return true;
+    } else {
+        return false;
+    }
+}
+
diff --git a/index.php b/index.php
index 805ef863..b7552c14 100755
--- a/index.php
+++ b/index.php
@@ -214,8 +214,13 @@ $bridgedEnabled = getBridgedState();
           <i class="fa fa-bars"></i>
         </button>
         <!-- Topbar Navbar -->
-        <p class="text-left brand-title mt-3 ml-2"><?php //echo _("WiFi Configuration Portal"); ?></p>
+        <p class="text-left brand-title mt-3 ml-2"></p>
         <ul class="navbar-nav ml-auto">
+          <!-- Nav Item - Night mode -->
+          <div class="custom-control custom-switch mt-4">
+          <input type="checkbox" class="custom-control-input" id="night-mode" <?php echo getNightmode() ? 'checked' : null ; ?> >
+            <label class="custom-control-label" for="night-mode"></label>
+          </div>
           <div class="topbar-divider d-none d-sm-block"></div>
           <!-- Nav Item - User -->
           <li class="nav-item dropdown no-arrow">