From ae52bda45ac19290cd85818b3c246aa4e45dcb21 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 4 Apr 2025 20:08:09 -0700
Subject: [PATCH] refactor: update theme color variables in CSS and
 DefaultPageLayout.php for improved customization and consistency

---
 .../dynamix/include/DefaultPageLayout.php     | 24 +++++++------------
 .../plugins/dynamix/styles/default-base.css   |  7 +++---
 .../plugins/dynamix/styles/themes/azure.css   |  3 ++-
 .../plugins/dynamix/styles/themes/black.css   |  3 ++-
 emhttp/plugins/dynamix/styles/themes/gray.css |  3 ++-
 .../plugins/dynamix/styles/themes/white.css   |  3 ++-
 6 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
index fbd178597..90a6a9b3e 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -57,26 +57,18 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$theme}.css")?>">
 
 <style>
+:root {
+  <?if ($header):?>
+    --customer-header-text-color: #<?=$header?>;
+  <?endif;?>
+  <?if ($backgnd):?>
+    --customer-header-background-color: #<?=$backgnd?>;
+  <?endif;?>
+}
 <?if ($display['font']):?>
 html{font-size:<?=$display['font']?>%}
 <?endif;?>
 
-<?if ($header):?>
-#header,#header .logo,#header .text-right a{color:#<?=$header?>}
-#header .block{background-color:transparent}
-<?endif;?>
-
-<?if ($backgnd):?>
-  #header{background-color:#<?=$backgnd?>}
-  <?if ($themeHelper->isTopNavTheme()):?>
-    .nav-tile{background-color:#<?=$backgnd?>}
-    <?if ($header):?>
-      .nav-item a,.nav-user a{color:#<?=$header?>}
-      .nav-item.active:after{background-color:#<?=$header?>}
-    <?endif;?>
-  <?endif;?>
-<?endif;?>
-
 <?
 $nchan = ['webGui/nchan/notify_poller','webGui/nchan/session_check'];
 if ($wlan0) $nchan[] = 'webGui/nchan/wlan0';
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 6dc42592d..10f99e19d 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -366,7 +366,7 @@ textarea {
     z-index: 102;
     margin: 0;
     color: var(--inverse-text-color);
-    background-color: var(--header-color);
+    background-color: var(--header-background-color);
     background-size: 100% 90px;
     background-repeat: no-repeat;
 }
@@ -447,7 +447,7 @@ div.title.shift {
     margin: 0;
     font-size: 1.2rem;
     letter-spacing: 1.8px;
-    background-color: var(--header-color);
+    background-color: var(--header-background-color);
     white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
@@ -477,7 +477,7 @@ div.title.shift {
     padding-bottom: 2px;
 }
 .nav-item a {
-    color: var(--inverse-text-color);
+    color: var(--header-text-color);
     background-color: transparent;
     text-transform: uppercase;
     font-weight: bold;
@@ -1704,7 +1704,6 @@ span#wlan0 {
         position: fixed;
         height: 90px;
         z-index: 100;
-        background-color: var(--mild-background-color);
         border-bottom: 1px solid var(--gray-600);
         box-sizing: border-box;
         padding-left: 80px;
diff --git a/emhttp/plugins/dynamix/styles/themes/azure.css b/emhttp/plugins/dynamix/styles/themes/azure.css
index 5aaca08f5..3c38e360a 100644
--- a/emhttp/plugins/dynamix/styles/themes/azure.css
+++ b/emhttp/plugins/dynamix/styles/themes/azure.css
@@ -64,7 +64,8 @@
     --brand-orange: var(--orange-500);
     --brand-red: var(--red-800);
 
-    --header-color: var(--gray-100);
+    --header-text-color: var(--customer-header-text-color, var(--inverse-text-color));
+    --header-background-color: var(--custom-header-background-color, var(--gray-100));
 
     --title-header-background-color: var(--mild-background-color);
 
diff --git a/emhttp/plugins/dynamix/styles/themes/black.css b/emhttp/plugins/dynamix/styles/themes/black.css
index 2fc8b5f2a..17d57889f 100644
--- a/emhttp/plugins/dynamix/styles/themes/black.css
+++ b/emhttp/plugins/dynamix/styles/themes/black.css
@@ -46,7 +46,8 @@
     --brand-orange: var(--orange-500);
     --brand-red: var(--red-800);
 
-    --header-color: var(--gray-100);
+    --header-text-color: var(--customer-header-text-color, var(--inverse-text-color));
+    --header-background-color: var(--custom-header-background-color, var(--gray-100));
 
     --title-header-background-color: var(--mild-background-color);
 
diff --git a/emhttp/plugins/dynamix/styles/themes/gray.css b/emhttp/plugins/dynamix/styles/themes/gray.css
index 16fe612b6..172c86323 100644
--- a/emhttp/plugins/dynamix/styles/themes/gray.css
+++ b/emhttp/plugins/dynamix/styles/themes/gray.css
@@ -58,7 +58,8 @@
     --brand-orange: var(--orange-500);
     --brand-red: var(--red-800);
 
-    --header-color: var(--gray-100);
+    --header-text-color: var(--customer-header-text-color, var(--inverse-text-color));
+    --header-background-color: var(--custom-header-background-color, var(--gray-100));
 
     --title-header-background-color: var(--mild-background-color);
 
diff --git a/emhttp/plugins/dynamix/styles/themes/white.css b/emhttp/plugins/dynamix/styles/themes/white.css
index 4384ececa..b834ccab3 100644
--- a/emhttp/plugins/dynamix/styles/themes/white.css
+++ b/emhttp/plugins/dynamix/styles/themes/white.css
@@ -47,7 +47,8 @@
     --brand-orange: var(--orange-500);
     --brand-red: var(--red-800);
 
-    --header-color: var(--gray-900);
+    --header-text-color: var(--customer-header-text-color, var(--inverse-text-color));
+    --header-background-color: var(--custom-header-background-color, var(--gray-900));
 
     --title-header-background-color: var(--gray-150);