frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2025-03-01 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply @marek-guran's dynamic color to RaspAP dark theme

Browse Source
This commit is contained in:
billz 2023-11-29 09:20:27 +00:00
parent cf63cfe63b
commit ba03688230
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/css/lightsout.css → app/css/lightsout.php
View File

@ -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 Theme Name: Lights Out
Author: @billz Author: @billz
@ -6,6 +12,13 @@ Description: A dark mode theme for RaspAP
License: GNU General Public License v3.0 License: GNU General Public License v3.0
*/ */
<?php
// Base color
$baseColor = $color;
$textColor = lightenColor($baseColor, 95);
$secondaryColor = lightenColor($baseColor, 30);
?>
@import url('all.css'); @import url('all.css');
html * { html * {
@ -31,13 +44,17 @@ h5.card-title {
} }
.sidebar-light .nav-item.active .nav-link i { .sidebar-light .nav-item.active .nav-link i {
color: #d2d2d2; color: <?php echo $secondaryColor; ?>;
} }
.sidebar .nav-item.active .nav-link { .sidebar .nav-item.active .nav-link {
font-weight: 400; font-weight: 400;
} }
.sidebar-brand-text {
color: <?php echo $color; ?>;
}
#wrapper #content-wrapper #content { #wrapper #content-wrapper #content {
background-color: #202020; background-color: #202020;
} }
@ -139,10 +156,6 @@ hr {
border-top: .01rem solid #d2d2d2; border-top: .01rem solid #d2d2d2;
} }
.sidebar-brand-text {
color: #2b8080 !important;
}
.ra-raspap:before { .ra-raspap:before {
color: #ac1b3d !important; color: #ac1b3d !important;
} }
@ -201,7 +214,7 @@ hr {
} }
.sidebar-light .nav-item .nav-link i { .sidebar-light .nav-item .nav-link i {
color: rgba(230, 230, 230, .3); color: <?php echo $color; ?>
} }
.sidebar .nav-item .nav-link { .sidebar .nav-item .nav-link {
@ -319,16 +332,16 @@ color: #d2d2d2 !important
filter: opacity(0.7); filter: opacity(0.7);
} }
.ra-wireguard:before {
color: #404040 !important;
}
.ra-wireguard:hover:before { .ra-wireguard:hover:before {
color: #d1d3e2 !important; 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 { .logoutput {

8
app/js/custom.js
View File

@ -755,7 +755,7 @@ function set_theme(theme) {
$(function() { $(function() {
var currentTheme = getCookie('theme'); var currentTheme = getCookie('theme');
// Check if the current theme is a dark 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').prop('checked', isDarkTheme);
$('#night-mode').change(function() { $('#night-mode').change(function() {
@ -764,12 +764,12 @@ $(function() {
if (state == true) { if (state == true) {
if (currentTheme == 'custom.php') { if (currentTheme == 'custom.php') {
set_theme('lightsout.css'); set_theme('lightsout.php');
} else if (currentTheme == 'material-light.php') { } else if (currentTheme == 'material-light.php') {
set_theme('material-dark.php'); set_theme('material-dark.php');
} }
} else { } else {
if (currentTheme == 'lightsout.css') { if (currentTheme == 'lightsout.php') {
set_theme('custom.php'); set_theme('custom.php');
} else if (currentTheme == 'material-dark.php') { } else if (currentTheme == 'material-dark.php') {
set_theme('material-light.php'); set_theme('material-light.php');
@ -795,7 +795,7 @@ function getCookie(cname) {
var themes = { var themes = {
"default": "custom.php", "default": "custom.php",
"hackernews" : "hackernews.css", "hackernews" : "hackernews.css",
"lightsout" : "lightsout.css", "lightsout" : "lightsout.php",
"material-light" : "material-light.php", "material-light" : "material-light.php",
"material-dark" : "material-dark.php", "material-dark" : "material-dark.php",
} }