From a77168c745877a797741749000afc63b5ec073a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Sun, 6 Aug 2023 18:31:38 +0200
Subject: [PATCH 01/24] Create materialdark.php

---
 app/css/materialdark.php | 469 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 469 insertions(+)
 create mode 100644 app/css/materialdark.php

diff --git a/app/css/materialdark.php b/app/css/materialdark.php
new file mode 100644
index 00000000..15c7d88d
--- /dev/null
+++ b/app/css/materialdark.php
@@ -0,0 +1,469 @@
+<?php header("Content-Type: text/css; charset=utf-8"); ?>
+<?php
+require_once '../../includes/functions.php';
+$color = getColorOpt();
+?>
+
+/*
+Theme Name: Material Dark
+Author: @marek-guran
+Author URI: https://github.com/marek-guran
+Description: Inspired by Google's Material Design
+License: GNU General Public License v3.0
+*/
+
+@import url('all.css');
+
+body {
+  background-color: #202020;
+}
+
+html * {
+  font-family: Helvetica,Arial,sans-serif;
+  color: #afafaf;
+}
+
+h2 {
+  font-size: 2rem !important;
+}
+
+h4 {
+  font-size: 1.3rem;
+}
+
+h5.card-title {
+  font-size: 1.2rem;
+}
+
+.page-header {
+  border-left: .01rem solid #d2d2d2;
+  border-bottom: .01rem solid #d2d2d2;
+}
+
+.sidebar-light .nav-item.active .nav-link i {
+  color: #d2d2d2;
+}
+
+.sidebar .nav-item.active .nav-link {
+  font-weight: 400;
+}
+
+#wrapper #content-wrapper #content {
+  background-color: #202020;
+}
+
+.topbar {
+  background-color: #202020;
+}
+
+.col {
+  color: white;
+}
+
+.card-header .col i.fa-tachometer-alt {
+  color: white!important;
+}
+
+.card-header .col i.fa-dot-circle {
+  color: white!important;
+}
+
+.card-header .col i.fa-wifi {
+  color: white!important;
+}
+
+.card-header .col i.fa-exchange-alt {
+  color: white!important;
+}
+
+.card-header .col i.fa-hand-paper {
+  color: white!important;
+}
+
+.card-header .col i.fa-network-wired {
+  color: white!important;
+}
+
+.card-header .col i.fa-key {
+  color: white!important;
+}
+
+.card-header .ra-wireguard {
+  color: white!important;
+}
+
+.card-header .ra-wireguard:before {
+  color: white!important;
+}
+
+.card-header .col i.fa-user-lock {
+  color: white!important;
+}
+
+.card-header .col i.fa-chart-bar {
+  color: white!important;
+}
+
+.card-header .col i.fa-cube {
+  color: white!important;
+}
+
+.card-header .col i.fa-info-circle {
+  color: white!important;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #404040;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link {
+  font-size: 1.0rem;
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+}
+
+.nav-tabs .nav-link:hover {
+  border-color: transparent;
+}
+
+.navbar-default .navbar-brand:hover {
+  color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle {
+  border-color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+  background-color: #202020;
+}
+
+#content, .navbar, .sidebar, .footer, .sticky-footer {
+  background-attachment: scroll;
+  background-repeat: repeat;
+  background-size: auto;
+  background-position: 0 0;
+  background-origin: padding-box;
+  background-clip: border-box;
+}
+
+.sticky-footer {
+  background-position: 30px 0;
+}
+
+.sidebar {
+  background-position: 0 20px;
+}
+
+.nav-tabs .nav-link.active {
+  color: #d2d2d2;
+  background-color: #141414;
+  border-color: #404040 #404040 #141414;
+}
+
+a:focus, a:hover {
+  color: #d2d2d2;
+}
+
+.card>.card-header, .modal-content, .modal-header {
+  border-color: <?php echo $color; ?>;
+  background-color: <?php echo $color; ?>;
+  color: #afafaf;
+  border-radius: 18px;
+  font-size: 1.0rem;
+  font-weight: 400;
+}
+
+.modal-body {
+  background-color: #141414;
+}
+
+.card-header {
+  border-bottom-left-radius: 0px!important;
+  border-bottom-right-radius: 0px!important;
+}
+
+.card>.card-header .fa {
+  color: #202020;
+}
+
+.card-header [class^="fa"] {
+  color: #afafaf;
+  font-size: 1.0rem;
+}
+
+.card, .card-body {
+  border-color: #343434;
+  border-radius: 18px;
+  background-color: #141414;
+}
+
+hr { 
+  border-top: .01rem solid #d2d2d2;
+}
+
+.sidebar-brand-text {
+  color: <?php echo $color; ?>;
+}
+
+.ra-raspap:before {
+  color: #ac1b3d !important;
+}
+
+.sidebar-light #sidebarToggle {
+  background-color: #202020;
+  border: 1px solid #afafaf !important
+}
+
+.sidebar-light #sidebarToggle::after {
+  color: #afafaf;
+}
+
+.sidebar-light .nav-item .nav-link:hover i {
+  color: #d2d2d2;
+}
+
+.sidebar-light #sidebarToggle:hover {
+  background-color: #202020;
+}
+
+.sidebar.toggled .nav-item .nav-link span {
+  display: none;
+}
+
+.sidebar.toggled .nav-item .nav-link {
+  text-align: center;
+  padding: .6rem 1rem;
+  width: 6.5rem;
+}
+
+.card-footer, .modal-footer {
+  background-color: #202020;
+  border-top: 0px;
+  border-bottom-right-radius: 18px!important;
+  border-bottom-left-radius: 18px!important;
+}
+
+.modal-footer {
+  border-radius: 18px;
+}
+
+.card>.card-header::before, .navbar-default::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}
+
+.sidebar-light, .sticky-footer {
+  background-color: #202020;
+}
+
+.sidebar-light .nav-item .nav-link i {
+  color: rgba(230, 230, 230, .3);
+}
+
+.sidebar .nav-item .nav-link {
+  padding: 0.6rem;
+  padding-left: 1.2rem;
+}
+
+.sidebar-light hr.sidebar-divider {
+  border-top: 1px solid #404040;
+  padding-top: 0.5rem;
+}
+
+.sidebar .nav-item .nav-link span {
+  font-size: 1.0rem;
+}
+
+.topbar .topbar-divider {
+  border-right: 1px solid #404040;
+}
+
+.label-warning {
+  background-color: #d2d2d2;
+}
+
+span.label.label-warning {
+  color: #202020;
+}
+
+.table>tbody>tr>td,
+.table>tbody>tr>th,
+.table>tfoot>tr>td,
+.table>tfoot>tr>th,
+.table>thead>tr>td,
+.table>thead>tr>th {
+  background-color: #202020;
+  border-top: .01rem solid #202020;
+}
+
+.table{
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+.table>thead>tr>th {
+  vertical-align: bottom;
+  border-bottom: 0 solid #d2d2d2;
+}
+
+[class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
+  background-color: #202020;
+  border-color: #404040;
+  border-radius: 18px;
+  color: #d2d2d2;
+}
+
+[class*="btn"]:hover {
+  border-radius: 18px;
+  color: #d2d2d2;
+  background-color: #202020;
+  border-color: #afafaf;
+}
+
+[class*="btn"]:hover .disabled {
+  background-color:red;
+}
+
+[class*="alert"] {
+  border-radius: 18px;
+  color: #d2d2d2;
+  background-color: #202020;
+  border: 1px solid #404040;
+}
+
+.close {
+  font-size: 1.2em;
+  font-weight: 400;
+  text-shadow: none;
+  color: #d2d2d2;
+}
+
+.form-control,
+.form-control:focus,
+.custom-select {
+  color: #d2d2d2;
+  background-color: #202020;
+  border: 1px solid #404040;
+  border-radius: 18px;
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+  background-color: #202020;
+  opacity: 0.5;
+}
+
+.form-control::-webkit-input-placeholder { color: #d2d2d2; } 
+.form-control:-moz-placeholder { color: #d2d2d2; }  
+.form-control::-moz-placeholder { color: #d2d2d2; }  
+.form-control:-ms-input-placeholder { color: #d2d2d2; }  
+.form-control::-ms-input-placeholder { color: #d2d2d2; }
+
+.form-control option {
+  font-size: 1em;
+}
+
+input[type="text"]{
+color: #d2d2d2 !important
+}
+
+.progress {
+  background-color: #202020;
+  border-radius: 18px;
+}
+
+.progress-bar {
+  color: #202020;
+}
+
+.progress .progress-bar {
+  padding-left: 5px;
+}
+
+.progress-bar.progress-bar-info.progress-bar-striped.active {
+  background-color: #d2d2d2;
+}
+
+.figure-img {
+  filter: opacity(0.7);
+}
+
+.ra-wireguard:before {
+  color: #404040 !important;
+}
+
+.ra-wireguard:hover:before {
+  color: #d1d3e2 !important;
+}
+
+.sidebar .nav-item.active .nav-link span.ra-wireguard:before {
+    color: #d2d2d2 !important;
+}
+
+.logoutput {
+  background-color: #202020;
+  border-color: #404040;
+}
+
+.text-muted {
+  font-size: 0.8rem;
+}
+
+.fas.fa-circle {
+  font-size: 0.7rem;
+}
+
+pre {
+  background-color: #202020;
+  border: #202020;
+}
+
+button.btn.btn-light.js-toggle-password {
+  border: 1px solid #343434;
+}
+
+.btn-primary {
+  color: <?php echo $color; ?>;
+  border-color: <?php echo $color; ?>;
+  background-color: #fff;
+}
+
+.btn-primary:hover {
+  background-color: <?php echo $color; ?>;
+  border-color: <?php echo $color; ?>;
+}
+
+.signal-icon .signal-bar {
+  background: #2b8080;
+}
+
+.figure-img {
+  border-radius: 18px;
+}
+
+.logoutput {
+  border-radius: 18px!important;
+}
+
+.btn-sm {
+  border-top-right-radius: 18px!important;
+  border-bottom-right-radius: 18px!important;
+}
+
+.signal-icon .signal-bar {
+  background: <?php echo $color; ?>;
+}

From 5234e0bb8eef4457d1fed49cf6f047bc41374744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 09:35:55 +0200
Subject: [PATCH 02/24] Added dynamic theming

---
 app/css/materialdark.php | 231 ++++++++++++++++++++++++++++-----------
 1 file changed, 166 insertions(+), 65 deletions(-)

diff --git a/app/css/materialdark.php b/app/css/materialdark.php
index 15c7d88d..922987ee 100644
--- a/app/css/materialdark.php
+++ b/app/css/materialdark.php
@@ -4,6 +4,59 @@ require_once '../../includes/functions.php';
 $color = getColorOpt();
 ?>
 
+<?php
+// Base color
+$baseColor = $color; // Replace this with your desired color value
+
+// Function to darken a color by a percentage
+function darkenColor($color, $percent)
+{
+    $percent /= 100;
+    $r = hexdec(substr($color, 1, 2));
+    $g = hexdec(substr($color, 3, 2));
+    $b = hexdec(substr($color, 5, 2));
+
+    $r = round($r * (1 - $percent));
+    $g = round($g * (1 - $percent));
+    $b = round($b * (1 - $percent));
+
+    return sprintf("#%02x%02x%02x", $r, $g, $b);
+}
+
+// Function to lighten a color by a percentage
+function lightenColor($color, $percent)
+{
+    $percent /= 100;
+    $r = hexdec(substr($color, 1, 2));
+    $g = hexdec(substr($color, 3, 2));
+    $b = hexdec(substr($color, 5, 2));
+
+    $r = round($r + (255 - $r) * $percent);
+    $g = round($g + (255 - $g) * $percent);
+    $b = round($b + (255 - $b) * $percent);
+
+    return sprintf("#%02x%02x%02x", $r, $g, $b);
+}
+
+// Function to calculate luminance
+function calculateLuminance($color) {
+  $rgb = sscanf($color, "#%02x%02x%02x");
+  list($r, $g, $b) = $rgb;
+  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
+}
+
+$luminance = calculateLuminance($backgroundColor);
+$textColor = $luminance > 0.5 ? 'black' : 'white';
+
+// Create other color variables
+$cardsColor = darkenColor($baseColor, 60);
+$secondaryColor = lightenColor($baseColor, 30);
+$primaryColor = $baseColor;
+$backgroundColor = darkenColor($baseColor, 90);
+
+// Now you can use these color variables in your CSS or any other parts of your PHP code.
+?>
+
 /*
 Theme Name: Material Dark
 Author: @marek-guran
@@ -15,12 +68,12 @@ License: GNU General Public License v3.0
 @import url('all.css');
 
 body {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
 }
 
 html * {
   font-family: Helvetica,Arial,sans-serif;
-  color: #afafaf;
+  color: <?php echo $textColor; ?>;
 }
 
 h2 {
@@ -36,12 +89,12 @@ h5.card-title {
 }
 
 .page-header {
-  border-left: .01rem solid #d2d2d2;
-  border-bottom: .01rem solid #d2d2d2;
+  border-left: .01rem solid <?php echo $secondaryColor; ?>;
+  border-bottom: .01rem solid <?php echo $secondaryColor; ?>;
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: #d2d2d2;
+  color: <?php echo $primaryColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -49,11 +102,11 @@ h5.card-title {
 }
 
 #wrapper #content-wrapper #content {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
 }
 
 .topbar {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
 }
 
 .col {
@@ -113,7 +166,7 @@ h5.card-title {
 }
 
 .nav-tabs {
-  border-bottom: 1px solid #404040;
+  border-bottom: 1px solid <?php echo $secondaryColor; ?>;
 }
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-link {
@@ -131,7 +184,7 @@ h5.card-title {
 }
 
 .navbar-default .navbar-toggle {
-  border-color: #d2d2d2;
+  border-color: transparent;
 }
 
 .navbar-default .navbar-toggle .icon-bar {
@@ -140,7 +193,7 @@ h5.card-title {
 
 .navbar-default .navbar-toggle:focus,
 .navbar-default .navbar-toggle:hover {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
 }
 
 #content, .navbar, .sidebar, .footer, .sticky-footer {
@@ -161,9 +214,9 @@ h5.card-title {
 }
 
 .nav-tabs .nav-link.active {
-  color: #d2d2d2;
-  background-color: #141414;
-  border-color: #404040 #404040 #141414;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-color: transparent;
 }
 
 a:focus, a:hover {
@@ -171,16 +224,16 @@ a:focus, a:hover {
 }
 
 .card>.card-header, .modal-content, .modal-header {
-  border-color: <?php echo $color; ?>;
-  background-color: <?php echo $color; ?>;
-  color: #afafaf;
+  border-color: transparent;
+  background-color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
   border-radius: 18px;
   font-size: 1.0rem;
   font-weight: 400;
 }
 
 .modal-body {
-  background-color: #141414;
+  background-color: <?php echo $backgroundColor; ?>;
 }
 
 .card-header {
@@ -189,26 +242,28 @@ a:focus, a:hover {
 }
 
 .card>.card-header .fa {
-  color: #202020;
+  color: <?php echo $backgroundColor; ?>;
 }
 
 .card-header [class^="fa"] {
-  color: #afafaf;
+  color: <?php echo $textColor; ?>;
   font-size: 1.0rem;
 }
 
 .card, .card-body {
-  border-color: #343434;
+  border-color: transparent;
   border-radius: 18px;
-  background-color: #141414;
+  background-color: <?php echo $cardsColor; ?>;
+  box-shadow: 0px -20px 20px rgba(0, 0, 0, 0.1),
+              0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 hr { 
-  border-top: .01rem solid #d2d2d2;
+  border-top: .01rem solid <?php echo $secondaryColor; ?>;
 }
 
 .sidebar-brand-text {
-  color: <?php echo $color; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .ra-raspap:before {
@@ -216,20 +271,20 @@ hr {
 }
 
 .sidebar-light #sidebarToggle {
-  background-color: #202020;
-  border: 1px solid #afafaf !important
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>; !important
 }
 
 .sidebar-light #sidebarToggle::after {
-  color: #afafaf;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar-light .nav-item .nav-link:hover i {
-  color: #d2d2d2;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar-light #sidebarToggle:hover {
-  background-color: #202020;
+  background-color: <?php echo $secondaryColor; ?>;
 }
 
 .sidebar.toggled .nav-item .nav-link span {
@@ -243,7 +298,8 @@ hr {
 }
 
 .card-footer, .modal-footer {
-  background-color: #202020;
+  background-color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
@@ -267,7 +323,7 @@ hr {
 }
 
 .sidebar-light, .sticky-footer {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
 }
 
 .sidebar-light .nav-item .nav-link i {
@@ -280,7 +336,7 @@ hr {
 }
 
 .sidebar-light hr.sidebar-divider {
-  border-top: 1px solid #404040;
+  border-top: 1px solid <?php echo $secondaryColor; ?>;
   padding-top: 0.5rem;
 }
 
@@ -289,7 +345,7 @@ hr {
 }
 
 .topbar .topbar-divider {
-  border-right: 1px solid #404040;
+  border-right: 1px solid <?php echo $secondaryColor; ?>;
 }
 
 .label-warning {
@@ -297,7 +353,7 @@ hr {
 }
 
 span.label.label-warning {
-  color: #202020;
+  color: <?php echo $backgroundColor; ?>;
 }
 
 .table>tbody>tr>td,
@@ -306,8 +362,8 @@ span.label.label-warning {
 .table>tfoot>tr>th,
 .table>thead>tr>td,
 .table>thead>tr>th {
-  background-color: #202020;
-  border-top: .01rem solid #202020;
+  background-color: <?php echo $primaryColor; ?>;
+  border-top: .01rem solid <?php echo $backgroundColor; ?>;
 }
 
 .table{
@@ -317,21 +373,21 @@ span.label.label-warning {
 
 .table>thead>tr>th {
   vertical-align: bottom;
-  border-bottom: 0 solid #d2d2d2;
+  border-bottom: 0 solid <?php echo $secondaryColor; ?>;
 }
 
 [class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
-  background-color: #202020;
-  border-color: #404040;
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
   border-radius: 18px;
-  color: #d2d2d2;
+  color: <?php echo $textColor; ?>;
 }
 
 [class*="btn"]:hover {
   border-radius: 18px;
-  color: #d2d2d2;
-  background-color: #202020;
-  border-color: #afafaf;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
 }
 
 [class*="btn"]:hover .disabled {
@@ -340,8 +396,8 @@ span.label.label-warning {
 
 [class*="alert"] {
   border-radius: 18px;
-  color: #d2d2d2;
-  background-color: #202020;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
   border: 1px solid #404040;
 }
 
@@ -349,21 +405,21 @@ span.label.label-warning {
   font-size: 1.2em;
   font-weight: 400;
   text-shadow: none;
-  color: #d2d2d2;
+  color: <?php echo $textColor; ?>;
 }
 
 .form-control,
 .form-control:focus,
 .custom-select {
-  color: #d2d2d2;
-  background-color: #202020;
-  border: 1px solid #404040;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
   border-radius: 18px;
 }
 
 .form-control:disabled,
 .form-control[readonly] {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
   opacity: 0.5;
 }
 
@@ -378,16 +434,16 @@ span.label.label-warning {
 }
 
 input[type="text"]{
-color: #d2d2d2 !important
+color: <?php echo $textColor; ?>; !important
 }
 
 .progress {
-  background-color: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
   border-radius: 18px;
 }
 
 .progress-bar {
-  color: #202020;
+  color: <?php echo $backgroundColor; ?>;
 }
 
 .progress .progress-bar {
@@ -395,7 +451,7 @@ color: #d2d2d2 !important
 }
 
 .progress-bar.progress-bar-info.progress-bar-striped.active {
-  background-color: #d2d2d2;
+  background-color: <?php echo $secondaryColor; ?>;
 }
 
 .figure-img {
@@ -415,10 +471,27 @@ color: #d2d2d2 !important
 }
 
 .logoutput {
-  background-color: #202020;
-  border-color: #404040;
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
 }
 
+.custom-control-input:checked ~ .custom-control-label::before {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  background-color: <?php echo $primaryColor; ?>;
+  border-color: <?php echo $primaryColor; ?>;
+}
+
+.wg-keygen {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid yellow <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+
 .text-muted {
   font-size: 0.8rem;
 }
@@ -428,27 +501,39 @@ color: #d2d2d2 !important
 }
 
 pre {
-  background-color: #202020;
-  border: #202020;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: <?php echo $backgroundColor; ?>;
 }
 
 button.btn.btn-light.js-toggle-password {
-  border: 1px solid #343434;
+  border: 1px solid <?php echo $secondaryColor; ?>;
 }
 
 .btn-primary {
-  color: <?php echo $color; ?>;
-  border-color: <?php echo $color; ?>;
-  background-color: #fff;
+  border-color: transparent;
+  background-color: <?php echo $primaryColor; ?>;
 }
 
 .btn-primary:hover {
-  background-color: <?php echo $color; ?>;
-  border-color: <?php echo $color; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-color: transparent;
+}
+
+.btn.service-status {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+input.btn.btn-success {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-success:hover {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
 }
 
 .signal-icon .signal-bar {
-  background: #2b8080;
+  background: <?php echo $secondaryColor; ?>;
 }
 
 .figure-img {
@@ -465,5 +550,21 @@ button.btn.btn-light.js-toggle-password {
 }
 
 .signal-icon .signal-bar {
-  background: <?php echo $color; ?>;
+  background: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-warning {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-warning:hover {
+  background-color: <?php echo $backgroundColor; ?>;!important
+}
+
+button.btn.btn-danger {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+button.btn.btn-danger:hover {
+  background-color: <?php echo $backgroundColor; ?>;!important
 }

From b0ef54a6e09c940f876a31e7d98493696e04772d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 09:51:55 +0200
Subject: [PATCH 03/24] Small styling fix for static leases

---
 app/css/materialdark.php | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/app/css/materialdark.php b/app/css/materialdark.php
index 922987ee..9f466c6b 100644
--- a/app/css/materialdark.php
+++ b/app/css/materialdark.php
@@ -491,6 +491,20 @@ color: <?php echo $textColor; ?>; !important
   border-bottom-right-radius: 18px !important;
 }
 
+.btn.btn-outline-secondary.js-add-dhcp-upstream-server {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+.btn.btn-outline-success.js-add-dhcp-static-lease {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.btn.btn-outline-success.js-add-dhcp-static-lease:hover {
+  background-color: <?php echo $primaryColor; ?>;
+}
 
 .text-muted {
   font-size: 0.8rem;
@@ -568,3 +582,17 @@ button.btn.btn-danger {
 button.btn.btn-danger:hover {
   background-color: <?php echo $backgroundColor; ?>;!important
 }
+
+.btn-group label.active {
+        background-color: <?php echo $primaryColor; ?>!important;
+        border-color:transparent!important;
+        color: <?php echo $textColor; ?>;!important
+}
+
+.btn-group {
+  background-color: <?php echo $cardsColor; ?>;!important
+}
+
+.btn-group:hover {
+  background-color: <?php echo $cardsColor; ?>;!important
+}

From e137bb67e94231b8d7be51c48e8efb1787d0a0cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 10:02:25 +0200
Subject: [PATCH 04/24] Final Dark Version

Fixed few issues and restyled back to top button
---
 app/css/materialdark.php | 83 ++++++++++++++++------------------------
 1 file changed, 33 insertions(+), 50 deletions(-)

diff --git a/app/css/materialdark.php b/app/css/materialdark.php
index 9f466c6b..46617dc4 100644
--- a/app/css/materialdark.php
+++ b/app/css/materialdark.php
@@ -113,56 +113,22 @@ h5.card-title {
   color: white;
 }
 
-.card-header .col i.fa-tachometer-alt {
-  color: white!important;
-}
-
-.card-header .col i.fa-dot-circle {
-  color: white!important;
-}
-
-.card-header .col i.fa-wifi {
-  color: white!important;
-}
-
-.card-header .col i.fa-exchange-alt {
-  color: white!important;
-}
-
-.card-header .col i.fa-hand-paper {
-  color: white!important;
-}
-
-.card-header .col i.fa-network-wired {
-  color: white!important;
-}
-
-.card-header .col i.fa-key {
-  color: white!important;
-}
-
-.card-header .ra-wireguard {
-  color: white!important;
-}
-
-.card-header .ra-wireguard:before {
-  color: white!important;
-}
-
-.card-header .col i.fa-user-lock {
-  color: white!important;
-}
-
-.card-header .col i.fa-chart-bar {
-  color: white!important;
-}
-
-.card-header .col i.fa-cube {
-  color: white!important;
-}
-
-.card-header .col i.fa-info-circle {
-  color: white!important;
+.card-header .col i.fa-tachometer-alt,
+.card-header .col i.fa-dot-circle,
+.card-header .col i.fa-wifi,
+.card-header .col i.fa-exchange-alt,
+.card-header .col i.fa-hand-paper,
+.card-header .col i.fa-network-wired,
+.card-header .col i.fa-key,
+.card-header .ra-wireguard,
+.card-header .ra-wireguard:before,
+.card-header .col i.fa-user-lock,
+.card-header .col i.fa-chart-bar,
+.card-header .col i.fa-cube,
+.card-header .col i.fa-info-circle,
+.card-header .col i.fa-globe,
+.card-header .col i.fa-shield-alt {
+  color: white <?php echo $textColor; ?>;
 }
 
 .nav-tabs {
@@ -596,3 +562,20 @@ button.btn.btn-danger:hover {
 .btn-group:hover {
   background-color: <?php echo $cardsColor; ?>;!important
 }
+
+.btn.btn-outline-secondary#gen_wpa_passphrase {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+a.scroll-to-top.rounded {
+  display: inline;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-radius: 18px!important;
+}
+
+a.scroll-to-top.rounded i.fas.fa-angle-up {
+  color: <?php echo $textColor; ?>;
+}

From ac019d6effd4764977570a42b6b1571a39422245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 10:17:25 +0200
Subject: [PATCH 05/24] Updated missing stuff

---
 app/css/materialdark.php | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/css/materialdark.php b/app/css/materialdark.php
index 46617dc4..61087a41 100644
--- a/app/css/materialdark.php
+++ b/app/css/materialdark.php
@@ -229,7 +229,7 @@ hr {
 }
 
 .sidebar-brand-text {
-  color: <?php echo $textColor; ?>;
+  color: <?php echo $primaryColor; ?>;
 }
 
 .ra-raspap:before {
@@ -412,6 +412,10 @@ color: <?php echo $textColor; ?>; !important
   color: <?php echo $backgroundColor; ?>;
 }
 
+.progress-bar.bg-success {
+  background-color: <?php echo $primaryColor; ?>!important;
+}
+
 .progress .progress-bar {
   padding-left: 5px;
 }
@@ -436,11 +440,6 @@ color: <?php echo $textColor; ?>; !important
     color: #d2d2d2 !important;
 }
 
-.logoutput {
-  background-color: <?php echo $backgroundColor; ?>;
-  border-color: transparent;
-}
-
 .custom-control-input:checked ~ .custom-control-label::before {
   background-color: <?php echo $secondaryColor; ?>;
 }
@@ -522,6 +521,8 @@ input.btn.btn-success:hover {
 
 .logoutput {
   border-radius: 18px!important;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid <?php echo $primaryColor; ?>!important;
 }
 
 .btn-sm {
@@ -579,3 +580,8 @@ a.scroll-to-top.rounded {
 a.scroll-to-top.rounded i.fas.fa-angle-up {
   color: <?php echo $textColor; ?>;
 }
+
+.btn.btn-sm.btn-outline-secondary.rounded-right {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  background-color: <?php echo $primaryColor; ?>;
+}

From d8ef9943d9b5250cb83f9dc67a20c0e9f934a1f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 11:16:44 +0200
Subject: [PATCH 06/24] Last touch to dark theme

---
 app/css/materialdark.php | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/css/materialdark.php b/app/css/materialdark.php
index 61087a41..13bf8915 100644
--- a/app/css/materialdark.php
+++ b/app/css/materialdark.php
@@ -128,7 +128,11 @@ h5.card-title {
 .card-header .col i.fa-info-circle,
 .card-header .col i.fa-globe,
 .card-header .col i.fa-shield-alt {
-  color: white <?php echo $textColor; ?>;
+  color: <?php echo $textColor; ?>;
+}
+
+i.fa-bars {
+  color: <?php echo $primaryColor; ?>;
 }
 
 .nav-tabs {
@@ -224,6 +228,11 @@ a:focus, a:hover {
               0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+.unstyled {
+  background-color: <?php echo $cardsColor; ?>;
+  color: <?php echo $textColor; ?>;
+}
+
 hr { 
   border-top: .01rem solid <?php echo $secondaryColor; ?>;
 }
@@ -412,8 +421,13 @@ color: <?php echo $textColor; ?>; !important
   color: <?php echo $backgroundColor; ?>;
 }
 
+#progressBar {
+  background-color: <?php echo $secondaryColor; ?>!important;
+}
+
 .progress-bar.bg-success {
   background-color: <?php echo $primaryColor; ?>!important;
+  color: <?php echo $textColor; ?>!important;
 }
 
 .progress .progress-bar {
@@ -585,3 +599,7 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
   border: 1px solid <?php echo $secondaryColor; ?>;
   background-color: <?php echo $primaryColor; ?>;
 }
+
+.info-item.col-xs-3 {
+  color: <?php echo $textColor; ?>;
+}

From 6b11b3593f44e9d0b6ccbbcab7b11b703f6bf02e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 12:03:08 +0200
Subject: [PATCH 07/24] Create material-light.php

---
 app/css/material-light.php | 615 +++++++++++++++++++++++++++++++++++++
 1 file changed, 615 insertions(+)
 create mode 100644 app/css/material-light.php

diff --git a/app/css/material-light.php b/app/css/material-light.php
new file mode 100644
index 00000000..ac1f5b5a
--- /dev/null
+++ b/app/css/material-light.php
@@ -0,0 +1,615 @@
+<?php header("Content-Type: text/css; charset=utf-8"); ?>
+<?php
+require_once '../../includes/functions.php';
+$color = getColorOpt();
+?>
+
+
+/*
+Theme Name: Material Light
+Author: @marek-guran
+Author URI: https://github.com/marek-guran
+Description: Inspired by Google's Material You Design
+License: GNU General Public License v3.0
+*/
+
+<?php
+// Base color
+$baseColor = $color; // Replace this with your desired color value
+
+// Function to darken a color by a percentage
+function darkenColor($color, $percent)
+{
+    $percent /= 100;
+    $r = hexdec(substr($color, 1, 2));
+    $g = hexdec(substr($color, 3, 2));
+    $b = hexdec(substr($color, 5, 2));
+
+    $r = round($r * (1 - $percent));
+    $g = round($g * (1 - $percent));
+    $b = round($b * (1 - $percent));
+
+    return sprintf("#%02x%02x%02x", $r, $g, $b);
+}
+
+// Function to lighten a color by a percentage
+function lightenColor($color, $percent)
+{
+    $percent /= 100;
+    $r = hexdec(substr($color, 1, 2));
+    $g = hexdec(substr($color, 3, 2));
+    $b = hexdec(substr($color, 5, 2));
+
+    $r = round($r + (255 - $r) * $percent);
+    $g = round($g + (255 - $g) * $percent);
+    $b = round($b + (255 - $b) * $percent);
+
+    return sprintf("#%02x%02x%02x", $r, $g, $b);
+}
+
+// Function to calculate luminance
+function calculateLuminance($color) {
+  $rgb = sscanf($color, "#%02x%02x%02x");
+  list($r, $g, $b) = $rgb;
+  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
+}
+
+$luminance = calculateLuminance($backgroundColor);
+$textColor = $luminance < 0.7 ? 'white' : 'black';
+
+// Create other color variables
+$cardsColor = lightenColor($baseColor, 60);
+$secondaryColor = lightenColor($baseColor, 50);
+$primaryColor = $baseColor;
+$backgroundColor = lightenColor($baseColor, 70);
+
+// Now you can use these color variables in your CSS or any other parts of your PHP code.
+?>
+
+@import url('all.css');
+
+body {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+html * {
+  font-family: Helvetica,Arial,sans-serif;
+  color: <?php echo $textColor; ?>;
+}
+
+h2 {
+  font-size: 2rem !important;
+}
+
+h4 {
+  font-size: 1.3rem;
+}
+
+h5.card-title {
+  font-size: 1.2rem;
+}
+
+.page-header {
+  border-left: .01rem solid <?php echo $secondaryColor; ?>;
+  border-bottom: .01rem solid <?php echo $secondaryColor; ?>;
+}
+
+.sidebar-light .nav-item.active .nav-link i {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.sidebar .nav-item.active .nav-link {
+  font-weight: 400;
+  color: <?php echo $primaryColor; ?>;
+}
+
+#wrapper #content-wrapper #content {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.topbar {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.col {
+  color: <?php echo $textColor; ?>;
+}
+
+.card-header .col i.fa-tachometer-alt,
+.card-header .col i.fa-dot-circle,
+.card-header .col i.fa-wifi,
+.card-header .col i.fa-exchange-alt,
+.card-header .col i.fa-hand-paper,
+.card-header .col i.fa-network-wired,
+.card-header .col i.fa-key,
+.card-header .ra-wireguard,
+.card-header .ra-wireguard:before,
+.card-header .col i.fa-user-lock,
+.card-header .col i.fa-chart-bar,
+.card-header .col i.fa-cube,
+.card-header .col i.fa-info-circle,
+.card-header .col i.fa-globe,
+.card-header .col i.fa-shield-alt {
+  color: <?php echo $textColor; ?>;
+}
+
+i.fa-bars {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid <?php echo $secondaryColor; ?>;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link {
+  font-size: 1.0rem;
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+}
+
+.nav-tabs .nav-link:hover {
+  border-color: transparent;
+}
+
+.navbar-default .navbar-brand:hover {
+  color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle {
+  border-color: transparent;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+#content, .navbar, .sidebar, .footer, .sticky-footer {
+  background-attachment: scroll;
+  background-repeat: repeat;
+  background-size: auto;
+  background-position: 0 0;
+  background-origin: padding-box;
+  background-clip: border-box;
+}
+
+.sticky-footer {
+  background-position: 30px 0;
+}
+
+.sidebar {
+  background-position: 0 20px;
+}
+
+.nav-tabs .nav-link.active {
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-color: transparent;
+}
+
+a:focus, a:hover {
+  color: #d2d2d2;
+}
+
+.card>.card-header, .modal-content, .modal-header {
+  border-color: transparent;
+  background-color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
+  border-radius: 18px;
+  font-size: 1.0rem;
+  font-weight: 400;
+}
+
+.modal-body {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.card-header {
+  border-bottom-left-radius: 0px!important;
+  border-bottom-right-radius: 0px!important;
+}
+
+.card>.card-header .fa {
+  color: <?php echo $backgroundColor; ?>;
+}
+
+.card-header [class^="fa"] {
+  color: <?php echo $textColor; ?>;
+  font-size: 1.0rem;
+}
+
+.card, .card-body {
+  border-color: transparent;
+  border-radius: 18px;
+  background-color: <?php echo $cardsColor; ?>;
+  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1),
+              0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.unstyled {
+  background-color: <?php echo $cardsColor; ?>;
+  color: <?php echo $textColor; ?>;
+}
+
+hr { 
+  border-top: .01rem solid <?php echo $secondaryColor; ?>;
+}
+
+.sidebar-brand-text {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.ra-raspap:before {
+  color: #ac1b3d !important;
+}
+
+.sidebar-light #sidebarToggle {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>; !important
+}
+
+.sidebar-light #sidebarToggle::after {
+  color: <?php echo $textColor; ?>;
+}
+
+.sidebar-light .nav-item .nav-link:hover i {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.sidebar-light #sidebarToggle:hover {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.sidebar.toggled .nav-item .nav-link span {
+  display: none;
+}
+
+.sidebar.toggled .nav-item .nav-link {
+  text-align: center;
+  padding: .6rem 1rem;
+  width: 6.5rem;
+}
+
+.card-footer, .modal-footer {
+  background-color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
+  border-top: 0px;
+  border-bottom-right-radius: 18px!important;
+  border-bottom-left-radius: 18px!important;
+}
+
+.modal-footer {
+  border-radius: 18px;
+}
+
+.card>.card-header::before, .navbar-default::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}
+
+.sidebar-light, .sticky-footer {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.sidebar-light .nav-item .nav-link i {
+  color: <?php echo $textColor; ?>;;
+}
+
+.sidebar .nav-item .nav-link {
+  padding: 0.6rem;
+  padding-left: 1.2rem;
+}
+
+.sidebar-light hr.sidebar-divider {
+  border-top: 1px solid <?php echo $secondaryColor; ?>;
+  padding-top: 0.5rem;
+}
+
+.sidebar .nav-item .nav-link span {
+  font-size: 1.0rem;
+}
+
+.sidebar .nav-item .nav-link span:hover {
+  color: <?php echo $primaryColor; ?>!important;
+}
+
+.topbar .topbar-divider {
+  border-right: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.label-warning {
+  background-color: #d2d2d2;
+}
+
+span.label.label-warning {
+  color: <?php echo $backgroundColor; ?>;
+}
+
+.table>tbody>tr>td,
+.table>tbody>tr>th,
+.table>tfoot>tr>td,
+.table>tfoot>tr>th,
+.table>thead>tr>td,
+.table>thead>tr>th {
+  background-color: <?php echo $primaryColor; ?>;
+  border-top: .01rem solid <?php echo $backgroundColor; ?>;
+}
+
+.table{
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+.table>thead>tr>th {
+  vertical-align: bottom;
+  border-bottom: 0 solid <?php echo $secondaryColor; ?>;
+}
+
+[class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
+  border-radius: 18px;
+  color: <?php echo $textColor; ?>;
+}
+
+[class*="btn"]:hover {
+  border-radius: 18px;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
+}
+
+[class*="btn"]:hover .disabled {
+  background-color:red;
+}
+
+[class*="alert"] {
+  border-radius: 18px;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid #404040;
+}
+
+.close {
+  font-size: 1.2em;
+  font-weight: 400;
+  text-shadow: none;
+  color: <?php echo $textColor; ?>;
+}
+
+.form-control,
+.form-control:focus,
+.custom-select {
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-radius: 18px;
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+  background-color: <?php echo $backgroundColor; ?>;
+  opacity: 0.5;
+}
+
+.form-control::-webkit-input-placeholder { color: #d2d2d2; } 
+.form-control:-moz-placeholder { color: #d2d2d2; }  
+.form-control::-moz-placeholder { color: #d2d2d2; }  
+.form-control:-ms-input-placeholder { color: #d2d2d2; }  
+.form-control::-ms-input-placeholder { color: #d2d2d2; }
+
+.form-control option {
+  font-size: 1em;
+}
+
+.form-control::placeholder {
+    color: <?php echo $textColor; ?>;
+}
+
+input[type="text"]{
+color: <?php echo $textColor; ?>; !important
+}
+
+.progress {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-radius: 18px;
+}
+
+.progress-bar {
+  color: <?php echo $backgroundColor; ?>;
+}
+
+#progressBar {
+  background-color: <?php echo $secondaryColor; ?>!important;
+}
+
+.progress-bar.bg-success {
+  background-color: <?php echo $primaryColor; ?>!important;
+  color: <?php echo $textColor; ?>!important;
+}
+
+.progress .progress-bar {
+  padding-left: 5px;
+}
+
+.progress-bar.progress-bar-info.progress-bar-striped.active {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.figure-img {
+  filter: opacity(0.7);
+}
+
+.ra-wireguard:before {
+  color: <?php echo $textColor; ?>!important;
+}
+
+.ra-wireguard:hover:before {
+  color: <?php echo $primaryColor; ?>!important;
+}
+
+.sidebar .nav-item.active .nav-link span.ra-wireguard:before {
+    color: <?php echo $primaryColor; ?>!important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  background-color: <?php echo $primaryColor; ?>;
+  border-color: <?php echo $primaryColor; ?>;
+}
+
+.wg-keygen {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid yellow <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+.btn.btn-outline-secondary.js-add-dhcp-upstream-server {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+.btn.btn-outline-success.js-add-dhcp-static-lease {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.btn.btn-outline-success.js-add-dhcp-static-lease:hover {
+  background-color: <?php echo $primaryColor; ?>;
+}
+
+.text-muted {
+  font-size: 0.8rem;
+}
+
+.fas.fa-circle {
+  font-size: 0.7rem;
+}
+
+pre {
+  background-color: <?php echo $backgroundColor; ?>;
+  border: <?php echo $backgroundColor; ?>;
+}
+
+button.btn.btn-light.js-toggle-password {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.btn-primary {
+  border-color: transparent;
+  background-color: <?php echo $primaryColor; ?>;
+}
+
+.btn-primary:hover {
+  background-color: <?php echo $secondaryColor; ?>;
+  border-color: transparent;
+}
+
+.btn.service-status {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+input.btn.btn-success {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-success:hover {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
+}
+
+.signal-icon .signal-bar {
+  background: <?php echo $secondaryColor; ?>;
+}
+
+.figure-img {
+  border-radius: 18px;
+}
+
+.logoutput {
+  border-radius: 18px!important;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid <?php echo $primaryColor; ?>!important;
+}
+
+.btn-sm {
+  border-top-right-radius: 18px!important;
+  border-bottom-right-radius: 18px!important;
+}
+
+.signal-icon .signal-bar {
+  background: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-warning {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-warning:hover {
+  background-color: <?php echo $backgroundColor; ?>;!important
+}
+
+button.btn.btn-danger {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+button.btn.btn-danger:hover {
+  background-color: <?php echo $backgroundColor; ?>;!important
+}
+
+.btn-group label.active {
+        background-color: <?php echo $primaryColor; ?>!important;
+        border-color:transparent!important;
+        color: <?php echo $textColor; ?>;!important
+}
+
+.btn-group {
+  background-color: <?php echo $cardsColor; ?>;!important
+}
+
+.btn-group:hover {
+  background-color: <?php echo $cardsColor; ?>;!important
+}
+
+.btn.btn-outline-secondary#gen_wpa_passphrase {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+a.scroll-to-top.rounded {
+  display: inline;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-radius: 18px!important;
+}
+
+a.scroll-to-top.rounded i.fas.fa-angle-up {
+  color: <?php echo $textColor; ?>;
+}
+
+.btn.btn-sm.btn-outline-secondary.rounded-right {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  background-color: <?php echo $primaryColor; ?>;
+}
+
+.info-item.col-xs-3 {
+  color: <?php echo $textColor; ?>;
+}

From bb0a82acbc2806965dc6bf4ea1fac0e017ae0e69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 12:03:29 +0200
Subject: [PATCH 08/24] Update and rename materialdark.php to material-dark.php

---
 .../{materialdark.php => material-dark.php}    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)
 rename app/css/{materialdark.php => material-dark.php} (99%)

diff --git a/app/css/materialdark.php b/app/css/material-dark.php
similarity index 99%
rename from app/css/materialdark.php
rename to app/css/material-dark.php
index 13bf8915..6d6cd532 100644
--- a/app/css/materialdark.php
+++ b/app/css/material-dark.php
@@ -4,6 +4,14 @@ require_once '../../includes/functions.php';
 $color = getColorOpt();
 ?>
 
+/*
+Theme Name: Material Dark
+Author: @marek-guran
+Author URI: https://github.com/marek-guran
+Description: Inspired by Google's Material You Design
+License: GNU General Public License v3.0
+*/
+
 <?php
 // Base color
 $baseColor = $color; // Replace this with your desired color value
@@ -57,14 +65,6 @@ $backgroundColor = darkenColor($baseColor, 90);
 // Now you can use these color variables in your CSS or any other parts of your PHP code.
 ?>
 
-/*
-Theme Name: Material Dark
-Author: @marek-guran
-Author URI: https://github.com/marek-guran
-Description: Inspired by Google's Material Design
-License: GNU General Public License v3.0
-*/
-
 @import url('all.css');
 
 body {
@@ -110,7 +110,7 @@ h5.card-title {
 }
 
 .col {
-  color: white;
+  color: <?php echo $textColor; ?>;
 }
 
 .card-header .col i.fa-tachometer-alt,

From 7b07869d683882de4282c23702aba5973a0dd9ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 12:14:53 +0200
Subject: [PATCH 09/24] Added themes to settings

---
 includes/system.php | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/includes/system.php b/includes/system.php
index 05735984..3bab0c3b 100755
--- a/includes/system.php
+++ b/includes/system.php
@@ -190,11 +190,15 @@ function DisplaySystem(&$extraFooterScripts)
     // theme options
     $themes = [
         "default"    => "RaspAP (default)",
-        "hackernews" => "HackerNews"
+        "hackernews" => "HackerNews",
+        "material-light" => "Material (light)",
+        "material-dark" => "Material (dark)"
     ];
     $themeFiles = [
         "default"    => "custom.php",
-        "hackernews" => "hackernews.css"
+        "hackernews" => "hackernews.css",
+        "material-light" => "material-light.php",
+        "material-dark" => "material-dark.php"
     ];
     $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
 

From bd7c07ff22953bf117553fa144e844bc7301b454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 18:26:47 +0200
Subject: [PATCH 10/24] Small fix to dashboard text

---
 app/css/material-dark.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 6d6cd532..462df078 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -603,3 +603,7 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
 .info-item.col-xs-3 {
   color: <?php echo $textColor; ?>;
 }
+
+.text-muted {
+  color: <?php echo $textColor; ?>!important;
+}

From 7c0e4b73db4b3ae62c856ce0046c1aa44cafdf6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 18:27:11 +0200
Subject: [PATCH 11/24] Small fix to dashboard text

---
 app/css/material-light.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/css/material-light.php b/app/css/material-light.php
index ac1f5b5a..c0b6bef0 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -613,3 +613,7 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
 .info-item.col-xs-3 {
   color: <?php echo $textColor; ?>;
 }
+
+.text-muted {
+  color: <?php echo $textColor; ?>!important;
+}

From 2f3582d952b1b8e7804638f5023fc4a352792c61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 18:36:56 +0200
Subject: [PATCH 12/24] Fixed shadows and fixed insiders dashboard

---
 app/css/material-dark.php | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 462df078..4b0d2177 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -14,7 +14,7 @@ License: GNU General Public License v3.0
 
 <?php
 // Base color
-$baseColor = $color; // Replace this with your desired color value
+$baseColor = $color;
 
 // Function to darken a color by a percentage
 function darkenColor($color, $percent)
@@ -62,7 +62,6 @@ $secondaryColor = lightenColor($baseColor, 30);
 $primaryColor = $baseColor;
 $backgroundColor = darkenColor($baseColor, 90);
 
-// Now you can use these color variables in your CSS or any other parts of your PHP code.
 ?>
 
 @import url('all.css');
@@ -224,7 +223,7 @@ a:focus, a:hover {
   border-color: transparent;
   border-radius: 18px;
   background-color: <?php echo $cardsColor; ?>;
-  box-shadow: 0px -20px 20px rgba(0, 0, 0, 0.1),
+  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1),
               0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
@@ -607,3 +606,10 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
 .text-muted {
   color: <?php echo $textColor; ?>!important;
 }
+
+.grid-stack-item-content {
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+}

From 5970ee397b0163b86b17b2c1286f6a13e880d3e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 7 Aug 2023 18:37:58 +0200
Subject: [PATCH 13/24] Fixed insiders dashboard - light theme

---
 app/css/material-light.php | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/css/material-light.php b/app/css/material-light.php
index c0b6bef0..1186605d 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -15,7 +15,7 @@ License: GNU General Public License v3.0
 
 <?php
 // Base color
-$baseColor = $color; // Replace this with your desired color value
+$baseColor = $color;
 
 // Function to darken a color by a percentage
 function darkenColor($color, $percent)
@@ -63,7 +63,6 @@ $secondaryColor = lightenColor($baseColor, 50);
 $primaryColor = $baseColor;
 $backgroundColor = lightenColor($baseColor, 70);
 
-// Now you can use these color variables in your CSS or any other parts of your PHP code.
 ?>
 
 @import url('all.css');
@@ -617,3 +616,10 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
 .text-muted {
   color: <?php echo $textColor; ?>!important;
 }
+
+.grid-stack-item-content {
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+}

From f831794a55260a980510b056620e9bcd08cf2f6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Tue, 8 Aug 2023 06:34:43 +0200
Subject: [PATCH 14/24] Updated forgotten button - dark theme

---
 app/css/material-dark.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 4b0d2177..27216ffb 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -351,7 +351,7 @@ span.label.label-warning {
 }
 
 [class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
-  background-color: <?php echo $backgroundColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
   border-color: transparent;
   border-radius: 18px;
   color: <?php echo $textColor; ?>;

From 69967f6dd976b6f41a702bea31315aa4d7ea6492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Tue, 8 Aug 2023 06:35:25 +0200
Subject: [PATCH 15/24] Updated forgotten button - light theme

---
 app/css/material-light.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/css/material-light.php b/app/css/material-light.php
index 1186605d..749afde6 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -357,7 +357,7 @@ span.label.label-warning {
 }
 
 [class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
-  background-color: <?php echo $backgroundColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
   border-color: transparent;
   border-radius: 18px;
   color: <?php echo $textColor; ?>;

From aec2e3b7bfa283e5348fefd9680a92a6b27890c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 28 Aug 2023 14:31:23 +0200
Subject: [PATCH 16/24] Added themes to custom.js

Still cant change themes in settings
---
 app/js/custom.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/js/custom.js b/app/js/custom.js
index 93e91c2a..ff42f1d6 100644
--- a/app/js/custom.js
+++ b/app/js/custom.js
@@ -564,6 +564,8 @@ var themes = {
     "default": "custom.php",
     "hackernews" : "hackernews.css",
     "lightsout" : "lightsout.css",
+    "material-light" : "material-light.php",
+    "material-dark" : "material-dark.php",
 }
 
 // Toggles the sidebar navigation.

From 3cf88d98b26810aff963d9bf54f6035103eb6e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 28 Aug 2023 23:12:04 +0200
Subject: [PATCH 17/24] Small changes to system.php

Removed dark theme since it will be enabled by switch at top bar
---
 includes/system.php | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/includes/system.php b/includes/system.php
index 3bab0c3b..e21bbe0e 100755
--- a/includes/system.php
+++ b/includes/system.php
@@ -191,17 +191,18 @@ function DisplaySystem(&$extraFooterScripts)
     $themes = [
         "default"    => "RaspAP (default)",
         "hackernews" => "HackerNews",
-        "material-light" => "Material (light)",
-        "material-dark" => "Material (dark)"
+        "material-light" => "Material (Use dark colors)"
     ];
     $themeFiles = [
         "default"    => "custom.php",
         "hackernews" => "hackernews.css",
-        "material-light" => "material-light.php",
-        "material-dark" => "material-dark.php"
+        "material-light" => "material-light.php"
     ];
     $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
 
+    // widget options
+    $widgetOpt = $_SESSION["widgetOpt"];
+
     $extraFooterScripts[] = array('src'=>'dist/huebee/huebee.pkgd.min.js', 'defer'=>false);
     $extraFooterScripts[] = array('src'=>'app/js/huebee.js', 'defer'=>false);
 
@@ -228,6 +229,7 @@ function DisplaySystem(&$extraFooterScripts)
         "hostapd_status",
         "hostapd_led",
         "themes",
-        "selectedTheme" 
+        "selectedTheme",
+        "widgetOpt"
     ));
 }

From 7a1900d8149ef6636ab8d48f0b4a38e4a30fb8ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Mon, 28 Aug 2023 23:17:31 +0200
Subject: [PATCH 18/24] Update custom.js

Updated dark theme switcher so now it can switch between dark and light material theme while keeping it's functionality to stock theme.
---
 app/js/custom.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/js/custom.js b/app/js/custom.js
index ff42f1d6..d3fb9b3b 100644
--- a/app/js/custom.js
+++ b/app/js/custom.js
@@ -536,12 +536,27 @@ function set_theme(theme) {
 }
 
 $(function() {
+    var currentTheme = getCookie('theme');
+    // Check if the current theme is a dark theme
+    var isDarkTheme = currentTheme === 'lightsout.css' || currentTheme === 'material-dark.php';
+
+    $('#night-mode').prop('checked', isDarkTheme);
     $('#night-mode').change(function() {
         var state = $(this).is(':checked');
-        if (state == true && getCookie('theme') != 'lightsout.css') {
-            set_theme('lightsout.css');
+        var currentTheme = getCookie('theme');
+        
+        if (state == true) {
+            if (currentTheme == 'custom.php') {
+                set_theme('lightsout.css');
+            } else if (currentTheme == 'material-light.php') {
+                set_theme('material-dark.php');
+            }
         } else {
-            set_theme('custom.php');
+            if (currentTheme == 'lightsout.css') {
+                set_theme('custom.php');
+            } else if (currentTheme == 'material-dark.php') {
+                set_theme('material-light.php');
+            }
         }
    });
 });

From 2828b09d54b77cc02ed12a9190d0f2763c295457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Tue, 29 Aug 2023 10:36:11 +0200
Subject: [PATCH 19/24] Fixed visual errors and improved some visuals

1. The rounded corners issue is gone
2. Fixed light theme status indicator, so on latest insiders it wont hide active green button
3. Added new visuals to navigation menu to make it more clear what card is active
---
 app/css/material-dark.php  | 27 +++++++++++++++------------
 app/css/material-light.php | 33 ++++++++++++++++++---------------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 27216ffb..2ca08fd9 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -46,16 +46,7 @@ function lightenColor($color, $percent)
     return sprintf("#%02x%02x%02x", $r, $g, $b);
 }
 
-// Function to calculate luminance
-function calculateLuminance($color) {
-  $rgb = sscanf($color, "#%02x%02x%02x");
-  list($r, $g, $b) = $rgb;
-  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
-}
-
-$luminance = calculateLuminance($backgroundColor);
-$textColor = $luminance > 0.5 ? 'black' : 'white';
-
+$textColor = lightenColor($baseColor, 95);
 // Create other color variables
 $cardsColor = darkenColor($baseColor, 60);
 $secondaryColor = lightenColor($baseColor, 30);
@@ -75,6 +66,14 @@ html * {
   color: <?php echo $textColor; ?>;
 }
 
+.nav-item.active .nav-link {
+  position: relative;
+  background-color: <?php echo $secondaryColor; ?>;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  border-top-right-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
 h2 {
   font-size: 2rem !important;
 }
@@ -93,7 +92,7 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -208,6 +207,8 @@ a:focus, a:hover {
 .card-header {
   border-bottom-left-radius: 0px!important;
   border-bottom-right-radius: 0px!important;
+  position: relative;
+  margin-bottom: -18px;
 }
 
 .card>.card-header .fa {
@@ -237,7 +238,7 @@ hr {
 }
 
 .sidebar-brand-text {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $secondaryColor; ?>;
 }
 
 .ra-raspap:before {
@@ -277,6 +278,8 @@ hr {
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
+  position: relative;
+  margin-top: -18px;
 }
 
 .modal-footer {
diff --git a/app/css/material-light.php b/app/css/material-light.php
index 749afde6..52bba635 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -47,21 +47,12 @@ function lightenColor($color, $percent)
     return sprintf("#%02x%02x%02x", $r, $g, $b);
 }
 
-// Function to calculate luminance
-function calculateLuminance($color) {
-  $rgb = sscanf($color, "#%02x%02x%02x");
-  list($r, $g, $b) = $rgb;
-  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
-}
-
-$luminance = calculateLuminance($backgroundColor);
-$textColor = $luminance < 0.7 ? 'white' : 'black';
-
+$textColor = lightenColor($baseColor, 95);
 // Create other color variables
-$cardsColor = lightenColor($baseColor, 60);
-$secondaryColor = lightenColor($baseColor, 50);
+$cardsColor = lightenColor($baseColor, 50);
+$secondaryColor = lightenColor($baseColor, 30);
 $primaryColor = $baseColor;
-$backgroundColor = lightenColor($baseColor, 70);
+$backgroundColor = lightenColor($baseColor, 60);
 
 ?>
 
@@ -76,6 +67,14 @@ html * {
   color: <?php echo $textColor; ?>;
 }
 
+.nav-item.active .nav-link {
+  position: relative;
+  background-color: <?php echo $secondaryColor; ?>;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  border-top-right-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
 h2 {
   font-size: 2rem !important;
 }
@@ -94,7 +93,7 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -210,6 +209,8 @@ a:focus, a:hover {
 .card-header {
   border-bottom-left-radius: 0px!important;
   border-bottom-right-radius: 0px!important;
+  position: relative;
+  margin-bottom: -18px;
 }
 
 .card>.card-header .fa {
@@ -279,6 +280,8 @@ hr {
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
+  position: relative;
+  margin-top: -18px;
 }
 
 .modal-footer {
@@ -522,7 +525,7 @@ button.btn.btn-light.js-toggle-password {
 }
 
 .btn.service-status {
-  background-color: <?php echo $backgroundColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
 }
 
 input.btn.btn-success {

From 49634a4e58b0c93258f056a331f07fa8a60fc3ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Tue, 29 Aug 2023 12:28:08 +0200
Subject: [PATCH 20/24] Renamed theme to Material

---
 includes/system.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/system.php b/includes/system.php
index e21bbe0e..881f7025 100755
--- a/includes/system.php
+++ b/includes/system.php
@@ -191,7 +191,7 @@ function DisplaySystem(&$extraFooterScripts)
     $themes = [
         "default"    => "RaspAP (default)",
         "hackernews" => "HackerNews",
-        "material-light" => "Material (Use dark colors)"
+        "material-light" => "Material"
     ];
     $themeFiles = [
         "default"    => "custom.php",

From 5bd2ef1edcc28331a2426612191d9f101eac2ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Tue, 29 Aug 2023 12:28:51 +0200
Subject: [PATCH 21/24] Fixed missing padding to cards

---
 app/css/material-dark.php  | 9 +++++++++
 app/css/material-light.php | 7 ++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 2ca08fd9..fef671e8 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -99,6 +99,10 @@ h5.card-title {
   font-weight: 400;
 }
 
+.sidebar .nav-item .nav-link span:hover {
+  color: <?php echo $textColor; ?>!important;
+}
+
 #wrapper #content-wrapper #content {
   background-color: <?php echo $backgroundColor; ?>;
 }
@@ -228,6 +232,11 @@ a:focus, a:hover {
               0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+.card-body {
+  padding-top: 36px; /* 18px to move down + 18px space at the top */
+  padding-bottom: 36px; /* 18px space at the bottom */
+}
+
 .unstyled {
   background-color: <?php echo $cardsColor; ?>;
   color: <?php echo $textColor; ?>;
diff --git a/app/css/material-light.php b/app/css/material-light.php
index 52bba635..f2ad6815 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -230,6 +230,11 @@ a:focus, a:hover {
               0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+.card-body {
+  padding-top: 36px; /* 18px to move down + 18px space at the top */
+  padding-bottom: 36px; /* 18px space at the bottom */
+}
+
 .unstyled {
   background-color: <?php echo $cardsColor; ?>;
   color: <?php echo $textColor; ?>;
@@ -463,7 +468,7 @@ color: <?php echo $textColor; ?>; !important
 }
 
 .sidebar .nav-item.active .nav-link span.ra-wireguard:before {
-    color: <?php echo $primaryColor; ?>!important;
+    color: <?php echo $textColor; ?>!important;
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {

From dd2c648a781a60ad469140c166f621dae0cd29f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Wed, 30 Aug 2023 09:52:59 +0200
Subject: [PATCH 22/24] Update linkquality.js

Added hard coded colors to material theme. Now it is more readable on dark and light versions.
---
 app/js/linkquality.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/js/linkquality.js b/app/js/linkquality.js
index 40f87a7c..05eff9be 100644
--- a/app/js/linkquality.js
+++ b/app/js/linkquality.js
@@ -7,6 +7,16 @@ if (theme == 'lightsout.css') {
   var bgColor2 = '#141414';
   var borderColor = 'rgba(37, 153, 63, 1)';
   var labelColor = 'rgba(37, 153, 63, 1)';
+} else if (theme == 'material-light.php') {
+  var bgColor1 = 'rgba(255, 255, 255, 0.5)';
+  var bgColor2 = 'rgba(0, 0, 0, 0.5)';
+  var borderColor = '#f2f2fb';
+  var labelColor = '#f2f2fb';
+} else if (theme == 'material-dark.php') {
+  var bgColor1 = 'rgba(255, 255, 255, 0.5)';
+  var bgColor2 = 'rgba(0, 0, 0, 0.5)';
+  var borderColor = '#f2f2fb';
+  var labelColor = '#f2f2fb';
 } else {
   var bgColor1 = '#d4edda';
   var bgColor2 = '#eaecf4';

From 877ed4698e1849f611b14f374ef6ca8d6b30b9a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Wed, 30 Aug 2023 09:54:26 +0200
Subject: [PATCH 23/24] Removed mistakenly added insiders code

---
 includes/system.php | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/includes/system.php b/includes/system.php
index 881f7025..40d2bc06 100755
--- a/includes/system.php
+++ b/includes/system.php
@@ -200,9 +200,6 @@ function DisplaySystem(&$extraFooterScripts)
     ];
     $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
 
-    // widget options
-    $widgetOpt = $_SESSION["widgetOpt"];
-
     $extraFooterScripts[] = array('src'=>'dist/huebee/huebee.pkgd.min.js', 'defer'=>false);
     $extraFooterScripts[] = array('src'=>'app/js/huebee.js', 'defer'=>false);
 

From a259a4f868bc883462eaebeab93ce038444d46d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Wed, 30 Aug 2023 10:00:15 +0200
Subject: [PATCH 24/24] Small fix (removed forgotten insiders part)

---
 includes/system.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/includes/system.php b/includes/system.php
index 40d2bc06..5c24d26a 100755
--- a/includes/system.php
+++ b/includes/system.php
@@ -226,7 +226,6 @@ function DisplaySystem(&$extraFooterScripts)
         "hostapd_status",
         "hostapd_led",
         "themes",
-        "selectedTheme",
-        "widgetOpt"
+        "selectedTheme"
     ));
 }