beenull/raspap-webgui-mirror
1
0
Fork 0
mirror of https://github.com/RaspAP/raspap-webgui.git synced 2024-11-21 15:10:22 +00:00
Code Issues Projects Releases Packages 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
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 {

8
app/js/custom.js
View file

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