mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-02-19 07:29:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement ThemeHelper class to centralize theme management and improve color handling across various pages

Browse Source
This commit is contained in:
Zack Spear
2025-04-03 18:10:05 -07:00
parent 4b6014439d
commit f041c83a92
11 changed files with 204 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
emhttp/plugins/dynamix.docker.manager/DockerSettings.page
View File

@@ -123,7 +123,7 @@ function hide_eth($network) {
return in_array($network,$mgmt_port) && lan_port('wlan0',true)==1;
}
$bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c'; // $themeHelper set in DefaultPageLayout.php
//Check if docker.cfg does exist
$no_dockercfg = !is_file('/boot/config/docker.cfg');

3
emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php
View File

@@ -318,7 +318,8 @@ $authoringMode = $dockercfg['DOCKER_AUTHORING_MODE'] == "yes" ? true : false;
$authoring = $authoringMode ? 'advanced' : 'noshow';
$disableEdit = $authoringMode ? 'false' : 'true';
$showAdditionalInfo = '';
$bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c'; // $themeHelper set in DefaultPageLayout.php
# Search for existing TAILSCALE_ entries in the Docker template
$TS_existing_vars = false;

9
emhttp/plugins/dynamix.vm.manager/VMMachines.page
View File

@@ -20,12 +20,13 @@ Markdown="false"
<?
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
require_once "$docroot/plugins/dynamix.vm.manager/include/libvirt_helpers.php";
$themeName = $themeHelper->getThemeName();
$cpus = cpu_list();
$hover = in_array($theme,['white','azure']) ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)';
$bgcolor = in_array($theme,['white','azure']) ? '#f2f2f2' : '#1c1c1c';
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
$incolor = $theme!='gray' ? $bgcolor : '#121510';
$hover = $themeHelper->isLightTheme() ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)';
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c';
$fgcolor = $themeHelper->isLightTheme() ? '#1c1c1c' : '#f2f2f2';
$incolor = $themeName !== 'gray' ? $bgcolor : '#121510';
function showCPUs($uuid) {
global $cpus;

2
emhttp/plugins/dynamix.vm.manager/VMSettings.page
View File

@@ -92,7 +92,7 @@ if (is_file('/boot/syslinux/syslinux.cfg')) {
$arrValidNetworks = getValidNetworks();
$pcie_acs_override = detect($bootcfg, $bootenv, 'pcie_acs_override');
$vfio_allow_unsafe = detect($bootcfg, $bootenv, 'allow_unsafe_interrupts');
$bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c';
$started = $var['fsState']=='Started';
$libvirt_up = $libvirt_running=='yes';
$libvirt_log = file_exists("/var/log/libvirt/libvirtd.log");

3
emhttp/plugins/dynamix/DashStats.page
View File

@@ -50,8 +50,7 @@ function customTiles($column) {
}
// adjust the text color in log window
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:$fgcolor;/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");
$themeHelper->updateDockerLogColor($docroot); // $themeHelper set in DefaultPageLayout.php
exec("/etc/rc.d/rc.docker status >/dev/null",$dummy,$dockerd);
exec("/etc/rc.d/rc.libvirt status >/dev/null",$dummy,$libvirtd);

9
emhttp/plugins/dynamix/DisplaySettings.page
View File

@@ -249,11 +249,14 @@ _(Temperature unit)_:
:display_temperature_unit_help:
<?
$currentTheme = $themeHelper->getThemeName(); // $themeHelper set in DefaultPageLayout.php
$themes = $themeHelper->getThemesFromFileSystem($docroot);
?>
_(Dynamix color theme)_:
: <select name="theme">
<?foreach (glob("$docroot/webGui/styles/themes/*.css") as $themes):?>
<?$theme = basename($themes, '.css');?>
<?=mk_option($display['theme'], $theme, _(ucfirst($theme)))?>
<?foreach ($themes as $theme):?>
<?=mk_option($currentTheme, $theme, _(ucfirst($theme)))?>
<?endforeach;?>
</select>

13
emhttp/plugins/dynamix/include/.login.php
View File

@@ -236,7 +236,10 @@ $myFile = "case-model.cfg";
$myCase = file_exists("$boot/$myFile") ? file_get_contents("$boot/$myFile") : false;
extract(parse_plugin_cfg('dynamix', true));
$theme_dark = in_array($display['theme'], ['black', 'gray']);
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
$themeHelper = new ThemeHelper($display['theme']);
$isDarkTheme = $themeHelper->isDarkTheme();
?>
<!DOCTYPE html>
@@ -274,8 +277,8 @@ $theme_dark = in_array($display['theme'], ['black', 'gray']);
/
/************************/
body {
background: <?=$theme_dark?'#1C1B1B':'#F2F2F2'?>;
color: <?=$theme_dark?'#fff':'#1c1b1b'?>;
background: <?=$isDarkTheme?'#1C1B1B':'#F2F2F2'?>;
color: <?=$isDarkTheme?'#fff':'#1c1b1b'?>;
font-family: clear-sans, sans-serif;
font-size: .875rem;
padding: 0;
@@ -359,7 +362,7 @@ $theme_dark = in_array($display['theme'], ['black', 'gray']);
width: 500px;
margin: 6rem auto;
border-radius: 10px;
background: <?=$theme_dark?'#2B2A29':'#fff'?>;
background: <?=$isDarkTheme?'#2B2A29':'#fff'?>;
}
#login::after {
content: "";
@@ -451,7 +454,7 @@ $theme_dark = in_array($display['theme'], ['black', 'gray']);
/************************/
@media (max-width: 500px) {
body {
background: <?=$theme_dark?'#2B2A29':'#fff'?>;
background: <?=$isDarkTheme?'#2B2A29':'#fff'?>;
}
[type=email], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea {
font-size: 16px; /* This prevents the mobile browser from zooming in on the input-field. */

18
emhttp/plugins/dynamix/include/.set-password.php
View File

@@ -40,7 +40,9 @@ if (!empty($_POST['password']) && !empty($_POST['confirmPassword'])) {
return $POST_ERROR = $VALIDATION_MESSAGES['saveError'];
}
$THEME_DARK = in_array($display['theme'],['black','gray']);
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
$themeHelper = new ThemeHelper($display['theme']);
$isDarkTheme = $themeHelper->isDarkTheme();
?>
<!DOCTYPE html>
<html lang="en">
@@ -78,13 +80,13 @@ $THEME_DARK = in_array($display['theme'],['black','gray']);
/
/************************/
:root {
--body-bg: <?= $THEME_DARK ? '#1c1b1b' : '#f2f2f2' ?>;
--body-text-color: <?= $THEME_DARK ? '#fff' : '#1c1b1b' ?>;
--section-bg: <?= $THEME_DARK ? '#1c1b1b' : '#f2f2f2' ?>;
--shadow: <?= $THEME_DARK ? 'rgba(115,115,115,.12)' : 'rgba(0,0,0,.12)' ?>;
--form-text-color: <?= $THEME_DARK ? '#f2f2f2' : '#1c1b1b' ?>;
--form-bg-color: <?= $THEME_DARK ? 'rgba(26,26,26,0.4)' : '#f2f2f2' ?>;
--form-border-color: <?= $THEME_DARK ? '#2B2A29' : '#ccc' ?>;
--body-bg: <?= $isDarkTheme ? '#1c1b1b' : '#f2f2f2' ?>;
--body-text-color: <?= $isDarkTheme ? '#fff' : '#1c1b1b' ?>;
--section-bg: <?= $isDarkTheme ? '#1c1b1b' : '#f2f2f2' ?>;
--shadow: <?= $isDarkTheme ? 'rgba(115,115,115,.12)' : 'rgba(0,0,0,.12)' ?>;
--form-text-color: <?= $isDarkTheme ? '#f2f2f2' : '#1c1b1b' ?>;
--form-bg-color: <?= $isDarkTheme ? 'rgba(26,26,26,0.4)' : '#f2f2f2' ?>;
--form-border-color: <?= $isDarkTheme ? '#2B2A29' : '#ccc' ?>;
}
body {
background: var(--body-bg);

13
emhttp/plugins/dynamix/include/Boot.php
View File

@@ -24,13 +24,10 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
/**
* Just like DefaultPageLayout.php
*/
$theme = strtok($display['theme'],'-');
$themes1 = in_array($theme,['black','white']);
$themes2 = in_array($theme,['gray','azure']);
$themeHtmlClass = "Theme--$theme";
if ($themes2) {
$themeHtmlClass .= " Theme--sidebar";
}
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
$themeHelper = new ThemeHelper($display['theme']);
$themeName = $themeHelper->getThemeName();
$themeHtmlClass = $themeHelper->getThemeHtmlClass();
?>
<!DOCTYPE HTML>
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>" class="<?= $themeHtmlClass ?>">
@@ -46,7 +43,7 @@ if ($themes2) {
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$themeName}.css")?>">
<style>
.boot-title {

23
emhttp/plugins/dynamix/include/DefaultPageLayout.php
View File

@@ -11,25 +11,24 @@
*/
?>
<?
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
$themeHelper = new ThemeHelper($display['theme']);
$theme = $themeHelper->getThemeName(); // keep var name for backwards compatibility
$themes1 = $themeHelper->isTopNavTheme(); // keep var name for backwards compatibility
$themes2 = $themeHelper->isSidebarTheme(); // keep var name for backwards compatibility
$themeHtmlClass = $themeHelper->getThemeHtmlClass();
$themeHelper->updateDockerLogColor($docroot);
$display['font'] = filter_var($_COOKIE['fontSize'] ?? $display['font'] ?? '',FILTER_SANITIZE_NUMBER_FLOAT,FILTER_FLAG_ALLOW_FRACTION);
$theme = strtok($display['theme'],'-');
$header = $display['header'];
$backgnd = $display['background'];
$themes1 = in_array($theme,['black','white']);
$themes2 = in_array($theme,['gray','azure']);
$themeHtmlClass = "Theme--$theme";
if ($themes2) {
$themeHtmlClass .= " Theme--sidebar";
}
$config = "/boot/config";
$entity = $notify['entity'] & 1 == 1;
$alerts = '/tmp/plugins/my_alerts.txt';
$wlan0 = file_exists('/sys/class/net/wlan0');
// adjust the text color in docker log window
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:$fgcolor;/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");
function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text\n",str_repeat("#",strlen($text)),"\n-->\n";}
?>
<!DOCTYPE html>
@@ -55,7 +54,7 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-dynamix.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix/styles/dynamix-jquery-ui.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$theme}.css")?>">
<style>
<?if (empty($display['width'])):?>

154
emhttp/plugins/dynamix/include/ThemeHelper.php Normal file
View File

@@ -0,0 +1,154 @@
<?php
class ThemeHelper {
/**
* @todo instead of hardcoding the themes, we should get them from the themes directory and extract the text and background colors from the css file
* Ideally we don't need to be hardcoding any values here, but it's a quick fix to get the themes working with the current codebase
*/
private const THEME_BLACK = 'black';
private const THEME_WHITE = 'white';
private const THEME_GRAY = 'gray';
private const THEME_AZURE = 'azure';
private const COLOR_BLACK = '#1c1c1c';
private const COLOR_WHITE = '#f2f2f2';
private const TOP_NAV_THEMES = [self::THEME_BLACK, self::THEME_WHITE];
private const SIDEBAR_THEMES = [self::THEME_GRAY, self::THEME_AZURE];
private const DARK_THEMES = [self::THEME_BLACK, self::THEME_GRAY];
private const LIGHT_THEMES = [self::THEME_WHITE, self::THEME_AZURE];
private const FGCOLORS = [
self::THEME_BLACK => self::COLOR_BLACK,
self::THEME_WHITE => self::COLOR_BLACK,
self::THEME_GRAY => self::COLOR_WHITE,
self::THEME_AZURE => self::COLOR_WHITE
];
private const INIT_ERROR = 'Theme not initialized. Call initWithCurrentThemeSetting() first.';
private string $themeName;
private bool $topNavTheme;
private bool $sidebarTheme;
private bool $darkTheme;
private bool $lightTheme;
private string $themeHtmlClass;
private string $fgcolor;
private bool $initialized = false;
/**
* Constructor for ThemeHelper
*
* @param string|null $theme The theme name (optional)
*/
public function __construct(?string $theme = null) {
if ($theme !== null) {
$this->initWithCurrentThemeSetting($theme);
}
}
/**
* Initialize theme properties
*
* @param string $theme The theme name
* @return void
*/
public function initWithCurrentThemeSetting(string $theme): void {
$this->themeName = strtok($theme, '-');
$this->topNavTheme = in_array($this->themeName, self::TOP_NAV_THEMES);
$this->sidebarTheme = in_array($this->themeName, self::SIDEBAR_THEMES);
$this->darkTheme = in_array($this->themeName, self::DARK_THEMES);
$this->lightTheme = in_array($this->themeName, self::LIGHT_THEMES);
$this->themeHtmlClass = "Theme--{$this->themeName}";
if ($this->sidebarTheme) {
$this->themeHtmlClass .= " Theme--sidebar";
}
$this->fgcolor = self::FGCOLORS[$this->themeName] ?? self::COLOR_BLACK;
$this->initialized = true;
}
/**
* Check if the theme has been initialized
*
* @return bool
*/
public function isInitialized(): bool {
return $this->initialized;
}
public function getThemeName(): string {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->themeName;
}
public function isTopNavTheme(): bool {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->topNavTheme;
}
public function isSidebarTheme(): bool {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->sidebarTheme;
}
public function isDarkTheme(): bool {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->darkTheme;
}
public function isLightTheme(): bool {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->lightTheme;
}
public function getThemeHtmlClass(): string {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->themeHtmlClass;
}
public function getFgColor(): string {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
return $this->fgcolor;
}
public function updateDockerLogColor(string $docroot): void {
if (!$this->initialized) {
throw new \RuntimeException(self::INIT_ERROR);
}
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:{$this->fgcolor};/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");
}
/**
* Get all available theme names from the themes directory
*
* @param string $docroot The document root path
* @return array Array of theme names
*/
public static function getThemesFromFileSystem(string $docroot): array {
$themes = [];
$themeFiles = glob("$docroot/webGui/styles/themes/*.css");
foreach ($themeFiles as $themeFile) {
$themeName = basename($themeFile, '.css');
$themes[] = $themeName;
}
return $themes;
}
}