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

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

Browse Source 
Feature / fix: Theme updates
This commit is contained in:
Bill Zimmerman 2023-11-30 12:44:43 +01:00 committed by GitHub
commit ff7f1f01b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 73 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/css/custom.php
View File

@ -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;

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 {

31
app/css/material-dark.php
View File

@ -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');

33
app/css/material-light.php
View File

@ -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');

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

43
includes/functions.php
View File

@ -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);
}