fix: default-gray theme's header background color via a file-modifier.

Author: Ajit-Mehrotra

api/src/unraid-api/unraid-file-modifier/modifications/__test__/snapshots/default-gray.css.modified.snapshot

@@ -49,7 +49,7 @@ select.slot{min-width:44rem;max-width:44rem}
 input.narrow{width:174px}
 input.trim{width:74px;min-width:74px}
 textarea{resize:none}
-#header{position:fixed;top:0;left:0;width:100%;height:90px;z-index:100;margin:0;background-color:#121510;background-size:100% 90px;background-repeat:no-repeat;border-bottom:1px solid #42453e}
+#header{position:fixed;top:0;left:0;width:100%;height:90px;z-index:100;margin:0;background-color:#f2f2f2;background-size:100% 90px;background-repeat:no-repeat;border-bottom:1px solid #42453e}
 #header .logo{float:left;margin-left:75px;color:#e22828;text-align:center}
 #header .logo svg{width:160px;display:block;margin:25px 0 8px 0}
 #header .block{margin:0;float:right;text-align:right;background-color:rgba(18,21,16,0.2);padding:10px 12px}

api/src/unraid-api/unraid-file-modifier/modifications/default-gray-css.modification.ts

@@ -48,7 +48,10 @@ export default class DefaultGrayCssModification extends FileModification {
         const insertIndex = bodyEndIndex + 1;
 
         const before = source.slice(0, insertIndex);
-        const after = source.slice(insertIndex);
+        let after = source.slice(insertIndex);
+
+        // Replace #header background-color ONLY for default-gray.css
+        after = after.replace(/(#header\s*\{[^}]*background-color:)#121510/, '$1#f2f2f2');
 
         return `${before}\n@layer default {\n@scope (:root) to (.unapi) {${after}\n}\n}`;
     }

api/src/unraid-api/unraid-file-modifier/modifications/patches/default-gray-css-modification.patch

@@ -12,6 +12,19 @@ Index: /usr/local/emhttp/plugins/dynamix/styles/default-gray.css
  p.centered{text-align:left}
  p:empty{display:none}
  a:hover{text-decoration:underline}
+@@ -45,11 +47,11 @@
+ select.auto{min-width:auto}
+ select.slot{min-width:44rem;max-width:44rem}
+ input.narrow{width:174px}
+ input.trim{width:74px;min-width:74px}
+ textarea{resize:none}
+-#header{position:fixed;top:0;left:0;width:100%;height:90px;z-index:100;margin:0;background-color:#121510;background-size:100% 90px;background-repeat:no-repeat;border-bottom:1px solid #42453e}
++#header{position:fixed;top:0;left:0;width:100%;height:90px;z-index:100;margin:0;background-color:#f2f2f2;background-size:100% 90px;background-repeat:no-repeat;border-bottom:1px solid #42453e}
+ #header .logo{float:left;margin-left:75px;color:#e22828;text-align:center}
+ #header .logo svg{width:160px;display:block;margin:25px 0 8px 0}
+ #header .block{margin:0;float:right;text-align:right;background-color:rgba(18,21,16,0.2);padding:10px 12px}
+ #header .text-left{float:left;text-align:right;padding-right:5px;border-right:solid medium #f15a2c}
+ #header .text-right{float:right;text-align:left;padding-left:5px}
 @@ -270,5 +272,8 @@
  .bannerInfo::before {content:"\f05a";font-family:fontAwesome;color:#e68a00}
  ::-webkit-scrollbar{width:8px;height:8px;background:transparent}