Merge pull request #1467 from RaspAP/fix/theme-options

Feature / fix: Theme updates

app/css/custom.php

@@ -3,7 +3,6 @@
 require_once '../../includes/functions.php';
 $color = getColorOpt();
 ?>
-
 /*
 Theme Name: RaspAP default
 Author: @billz
@@ -26,6 +25,10 @@ body {
   font-weight: 500;
 }
 
+.sidebar-brand-text {
+  color: <?php echo $color; ?>;
+}
+
 .card .card-header, .modal-header {
   border-color: <?php echo $color; ?>;
   color: #fff;

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 {
+.sidebar-light .nav-link span.ra-wireguard:before {
-    color: #d2d2d2 !important;
+    color: <?php echo $color; ?>!important;
+}
+
+.sidebar-light .nav-item.active .nav-link span.ra-wireguard:before {
+  color: <?php echo $textColor; ?>;
 }
 
 .logoutput {

app/css/material-dark.php

@@ -16,43 +16,12 @@ License: GNU General Public License v3.0
 // Base color
 $baseColor = $color;
 
-// 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);
-}
-
 $textColor = lightenColor($baseColor, 95);
 // Create other color variables
 $cardsColor = darkenColor($baseColor, 60);
 $secondaryColor = lightenColor($baseColor, 30);
 $primaryColor = $baseColor;
 $backgroundColor = darkenColor($baseColor, 90);
-
 ?>
 
 @import url('all.css');

app/css/material-light.php

@@ -4,7 +4,6 @@ require_once '../../includes/functions.php';
 $color = getColorOpt();
 ?>
 
-
 /*
 Theme Name: Material Light
 Author: @marek-guran
@@ -16,44 +15,12 @@ License: GNU General Public License v3.0
 <?php
 // Base color
 $baseColor = $color;
-
-// 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);
-}
-
 $textColor = lightenColor($baseColor, 95);
 // Create other color variables
 $cardsColor = lightenColor($baseColor, 50);
 $secondaryColor = lightenColor($baseColor, 30);
 $primaryColor = $baseColor;
 $backgroundColor = lightenColor($baseColor, 60);
-
 ?>
 
 @import url('all.css');

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

includes/functions.php

@@ -715,10 +715,10 @@ function getColorOpt()
         $color = "#2b8080";
     } else {
         $color = $_COOKIE['color'];
-        setcookie('color', $color);
     }
     return $color;
 }
+
 function getSidebarState()
 {
     if(isset($_COOKIE['sidebarToggled'])) {
@@ -784,7 +784,7 @@ function validate_host($host)
 // @return boolean
 function getNightmode()
 {
-    if (isset($_COOKIE['theme']) && $_COOKIE['theme'] == 'lightsout.css') {
+    if (isset($_COOKIE['theme']) && $_COOKIE['theme'] == 'lightsout.php') {
         return true;
     } else {
         return false;
@@ -947,3 +947,40 @@ function getLogLimited($file_path, $file_data = null) {
     return $log_limited;
  }
 
+/**
+ * Function to darken a color by a percentage
+ * From @marek-guran's material-dark theme for RaspAP
+ * Author URI: https://github.com/marek-guran
+ */
+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
+ * From @marek-guran's material-dark theme for RaspAP
+ * Author URI: https://github.com/marek-guran
+ */
+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);
+}