From 034a0b8f6335f37329b24e8686cf28ef608d4d8d Mon Sep 17 00:00:00 2001 From: billz Date: Wed, 29 Nov 2023 09:16:28 +0000 Subject: [PATCH 1/3] Generalize @marek-guran's lighten/darkenColor functions --- app/css/material-dark.php | 31 ---------------------------- app/css/material-light.php | 33 ------------------------------ includes/functions.php | 42 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 40 insertions(+), 66 deletions(-) diff --git a/app/css/material-dark.php b/app/css/material-dark.php index e14ccea0..69c466b3 100644 --- a/app/css/material-dark.php +++ b/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'); diff --git a/app/css/material-light.php b/app/css/material-light.php index 8ee6804e..349beb9e 100644 --- a/app/css/material-light.php +++ b/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 @import url('all.css'); diff --git a/includes/functions.php b/includes/functions.php index f909311d..ff41f124 100755 --- a/includes/functions.php +++ b/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; @@ -924,3 +924,41 @@ function checkReleaseVersion($installed, $latest) { return false; } +/** + * 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); +} + From cf63cfe63bec066083ad5bb7332ed86b95f2f45c Mon Sep 17 00:00:00 2001 From: billz Date: Wed, 29 Nov 2023 09:17:09 +0000 Subject: [PATCH 2/3] Apply theme color to .sidebar-brand-text --- app/css/custom.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/css/custom.php b/app/css/custom.php index d9dcbf1c..b846b34d 100644 --- a/app/css/custom.php +++ b/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: ; +} + .card .card-header, .modal-header { border-color: ; color: #fff; From ba036882300f6c65899cab44e01d5552628dfa3c Mon Sep 17 00:00:00 2001 From: billz Date: Wed, 29 Nov 2023 09:20:27 +0000 Subject: [PATCH 3/3] 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 @@ + + + /* Theme Name: Lights Out Author: @billz @@ -6,6 +12,13 @@ Description: A dark mode theme for RaspAP License: GNU General Public License v3.0 */ + + @import url('all.css'); html * { @@ -31,13 +44,17 @@ h5.card-title { } .sidebar-light .nav-item.active .nav-link i { - color: #d2d2d2; + color: ; } .sidebar .nav-item.active .nav-link { font-weight: 400; } +.sidebar-brand-text { + 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: } .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: !important; +} + +.sidebar-light .nav-item.active .nav-link span.ra-wireguard:before { + color: ; } .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", }