Implement night mode toggle in top navbar

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));

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;
+    }
+}
+

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">