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; 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/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/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", } diff --git a/includes/functions.php b/includes/functions.php index 5d3207e1..6a17e4fb 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,7 +924,7 @@ function checkReleaseVersion($installed, $latest) { return false; } -/** + /** * Returns logfile contents up to a maximum defined limit, in kilobytes * * @param string $file_path @@ -945,5 +945,42 @@ function getLogLimited($file_path, $file_data = null) { $log_limited = substr($file_data, $start_position); } 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); +}