diff --git a/Dockerfile b/Dockerfile
index cb5837c..a1c6418 100644
--- a/Dockerfile
+++ b/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||\n |' /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||\n |' /app/code/librechat/client/dist/index.html
diff --git a/assets/custom.css b/assets/custom.css
index b6b85f9..95bb552 100644
--- a/assets/custom.css
+++ b/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); }
diff --git a/assets/custom2.js b/assets/custom2.js
index c41df88..8110008 100644
--- a/assets/custom2.js
+++ b/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() {
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..6327812
Binary files /dev/null and b/assets/logo.png differ