From ba036882300f6c65899cab44e01d5552628dfa3c Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Wed, 29 Nov 2023 09:20:27 +0000
Subject: [PATCH] Apply @marek-guran's dynamic color to RaspAP dark theme

---
 app/css/{lightsout.css => lightsout.php} | 37 ++++++++++++++++--------
 app/js/custom.js                         |  8 ++---
 2 files changed, 29 insertions(+), 16 deletions(-)
 rename app/css/{lightsout.css => lightsout.php} (90%)

diff --git a/app/css/lightsout.css b/app/css/lightsout.php
similarity index 90%
rename from app/css/lightsout.css
rename to app/css/lightsout.php
index aea5c83d..9063bcff 100644
--- a/app/css/lightsout.css
+++ b/app/css/lightsout.php
@@ -1,3 +1,9 @@
+<?php header("Content-Type: text/css; charset=utf-8"); ?>
+<?php
+require_once '../../includes/functions.php';
+$color = getColorOpt();
+?>
+
 /*
 Theme Name: Lights Out
 Author: @billz
@@ -6,6 +12,13 @@ Description: A dark mode theme for RaspAP
 License: GNU General Public License v3.0
 */
 
+<?php
+// Base color
+$baseColor = $color;
+$textColor = lightenColor($baseColor, 95);
+$secondaryColor = lightenColor($baseColor, 30);
+?>
+
 @import url('all.css');
 
 html * {
@@ -31,13 +44,17 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: #d2d2d2;
+  color: <?php echo $secondaryColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
   font-weight: 400;
 }
 
+.sidebar-brand-text {
+  color: <?php echo $color; ?>;
+}
+
 #wrapper #content-wrapper #content {
   background-color: #202020;
 }
@@ -139,10 +156,6 @@ hr {
   border-top: .01rem solid #d2d2d2;
 }
 
-.sidebar-brand-text {
-  color: #2b8080 !important;
-}
-
 .ra-raspap:before {
   color: #ac1b3d !important;
 }
@@ -201,7 +214,7 @@ hr {
 }
 
 .sidebar-light .nav-item .nav-link i {
-  color: rgba(230, 230, 230, .3);
+color: <?php echo $color; ?>
 }
 
 .sidebar .nav-item .nav-link {
@@ -319,16 +332,16 @@ color: #d2d2d2 !important
   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;
+.sidebar-light .nav-link span.ra-wireguard:before {
+    color: <?php echo $color; ?>!important;
+}
+
+.sidebar-light .nav-item.active .nav-link span.ra-wireguard:before {
+  color: <?php echo $textColor; ?>;
 }
 
 .logoutput {
diff --git a/app/js/custom.js b/app/js/custom.js
index 3a99eaa7..d305ae89 100644
--- a/app/js/custom.js
+++ b/app/js/custom.js
@@ -755,7 +755,7 @@ 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';
+    var isDarkTheme = currentTheme === 'lightsout.php' || currentTheme === 'material-dark.php';
 
     $('#night-mode').prop('checked', isDarkTheme);
     $('#night-mode').change(function() {
@@ -764,12 +764,12 @@ $(function() {
         
         if (state == true) {
             if (currentTheme == 'custom.php') {
-                set_theme('lightsout.css');
+                set_theme('lightsout.php');
             } else if (currentTheme == 'material-light.php') {
                 set_theme('material-dark.php');
             }
         } else {
-            if (currentTheme == 'lightsout.css') {
+            if (currentTheme == 'lightsout.php') {
                 set_theme('custom.php');
             } else if (currentTheme == 'material-dark.php') {
                 set_theme('material-light.php');
@@ -795,7 +795,7 @@ function getCookie(cname) {
 var themes = {
     "default": "custom.php",
     "hackernews" : "hackernews.css",
-    "lightsout" : "lightsout.css",
+    "lightsout" : "lightsout.php",
     "material-light" : "material-light.php",
     "material-dark" : "material-dark.php",
 }