restore green-wash theme (lost in the Oct 21 rebuild) + PWA band colors

The Oct 19 theming (light = #eaf3ea dashboard green wash, white cards/surfaces,
per approval) was never committed - the Oct 21 pin-migration rebuild from this
repo silently reverted the deployed theme to the older cream iteration.

- custom.css: light block restored to the approved green-wash palette
  (primary #eaf3ea, white secondary/chat cards, green hover/tertiary/border);
  loading screen + bare page background match.
- Dockerfile: manifest theme_color/background_color and the index.html
  theme-color media pair now follow the live palette (#eaf3ea light /
  #22271f deep pine dark).
- custom2.js: sync ONE meta theme-color to the app's resolved theme
  (html.dark class + prefers-color-scheme listener) so Android status/nav
  bands and iOS safe areas track the theme at runtime; the static media
  pair remains as the no-JS fallback.

Dockerfile

@@ -59,7 +59,9 @@ RUN python3 /app/code/patch_index.py && \
 
 # PWA chrome colors: LibreChat ships a teal theme_color (#009688) in the web
 # manifest (the bright green bar Firefox PWAs draw across the top) and black
-# background_color. Point both at the cream page color; the index.html meta
-# gets a light + dark pair so browser tabs match the theme too.
-RUN sed -i 's|"theme_color": *"#009688"|"theme_color":"#faf8f5"|; s|"background_color": *"#000000"|"background_color":"#faf8f5"|' /app/code/librechat/client/dist/manifest.webmanifest && \
-    sed -i 's|<meta name="theme-color" content="#171717" />|<meta name="theme-color" media="(prefers-color-scheme: light)" content="#faf8f5" />\n    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#22271f" />|' /app/code/librechat/client/dist/index.html
+# background_color. Point both at the light page color (#eaf3ea dashboard green
+# wash — the manifest can only hold one value; custom2.js re-syncs the meta
+# tags to the app's actual theme at runtime). The index.html meta gets a
+# light + dark pair so browser/PWA chrome matches the phone theme natively.
+RUN sed -i 's|"theme_color": *"#009688"|"theme_color":"#eaf3ea"|; s|"background_color": *"#000000"|"background_color":"#eaf3ea"|' /app/code/librechat/client/dist/manifest.webmanifest && \
+    sed -i 's|<meta name="theme-color" content="#171717" />|<meta name="theme-color" media="(prefers-color-scheme: light)" content="#eaf3ea" />\n    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#22271f" />|' /app/code/librechat/client/dist/index.html

assets/custom.css

@@ -10,10 +10,10 @@
    ============================================================ */
 
 html.light {
-  --surface-primary: 250 248 245;   /* --cream #faf8f5 — dashboard page background */
+  --surface-primary: 234 243 234;   /* #eaf3ea — dashboard green wash, page background */
   --surface-secondary: 255 255 255; /* sidebar + composer box: white cards */
-  --surface-tertiary: 244 242 236;  /* #f4f2ec — dashboard chip background */
-  --surface-hover: 234 243 234;     /* #eaf3ea — dashboard green wash as hover */
+  --surface-tertiary: 240 246 239;  /* light green chip background */
+  --surface-hover: 223 237 222;     /* deeper green hover */
   --surface-submit: 91 140 90;      /* --green-deep #5b8c5a */
   --surface-submit-hover: 107 168 107; /* --green-mid #6ba86b */
   --accent-primary: 91 140 90;      /* --green-deep */
@@ -22,10 +22,10 @@ html.light {
   --link: 74 122 74;
   --text-primary: 45 51 39;         /* --ink #2d3327 */
   --text-secondary: 107 122 98;     /* --muted #6b7a62 */
-  --border-light: 228 224 216;      /* --border #e4e0d8 */
-  --presentation: 250 248 245;      /* cream — composer band matches page */
+  --border-light: 205 224 203;      /* green-tinted border */
+  --presentation: 234 243 234;      /* composer band matches page */
   --surface-chat: 255 255 255;      /* chat box text areas: white */
-  --surface-composer-hover: 244 242 236;
+  --surface-composer-hover: 223 237 222;
 }
 
 html.dark {
@@ -79,7 +79,7 @@ html.dark {
 
 /* ---- Loading screen: brand the pre-React flash instead of white/black ---- */
 #loading-container {
-  background-color: rgb(250, 248, 245); /* cream */
+  background-color: rgb(234, 243, 234); /* green wash */
 }
 @media (prefers-color-scheme: dark) {
   #loading-container {
@@ -120,7 +120,7 @@ footer a:hover {
   text-decoration: underline;
 }
 
-/* Bare page background: cream in light, deep pine in dark — so any viewport
+/* Bare page background: green wash in light, deep pine in dark — so any viewport
    area the app UI does not cover (e.g. PWA navigation-bar insets) matches. */
-html:not(.dark), html:not(.dark) body { background-color: rgb(250, 248, 245); }
+html:not(.dark), html:not(.dark) body { background-color: rgb(234, 243, 234); }
 html.dark, html.dark body { background-color: rgb(34, 39, 31); }

assets/custom2.js

@@ -39,9 +39,44 @@
       ' · Our AI, governed together';
   }
 
+  // PWA chrome bands (Android status bar + navigation bar, iOS safe areas):
+  // LibreChat ships static meta theme-color tags and never updates them, so
+  // the OS bands keep the install-time colors. Sync ONE meta tag to the app's
+  // RESOLVED theme (html.dark class — LibreChat applies it from the user's
+  // theme setting, which defaults to system = the phone's theme). Falls back
+  // to the light/dark media-query pair in index.html when this script is off.
+  var COOP_BG = { light: '#eaf3ea', dark: '#22271f' };
+  function syncThemeColor() {
+    var dark = document.documentElement.classList.contains('dark');
+    var metas = document.querySelectorAll('meta[name="theme-color"]');
+    if (!metas.length) return;
+    // Replace the media-query pair with a single tag at the resolved color.
+    metas.forEach(function (m, i) {
+      if (i === 0) {
+        m.removeAttribute('media');
+        m.setAttribute('content', dark ? COOP_BG.dark : COOP_BG.light);
+      } else {
+        m.remove();
+      }
+    });
+  }
+  var themeObserverRunning = false;
+  function startThemeSync() {
+    if (themeObserverRunning) return;
+    themeObserverRunning = true;
+    syncThemeColor();
+    new MutationObserver(syncThemeColor).observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    var mq = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mq && mq.addEventListener) mq.addEventListener('change', syncThemeColor);
+  }
+
   function run() {
     hideSignupPrompt();
     fixFooter();
+    startThemeSync();
   }
 
   function start() {