PWA chrome: manifest theme_color #009688 teal -> cream #faf8f5, background black -> cream; index.html theme-color light/dark pair; html/body bg matches theme (fixes green top bar + white bottom bar in Firefox PWA)

This commit is contained in:
Nathan Schneider committed 2026-10-19 21:41:31 -06:00
1 parent ecb99a633c
commit 8abdc95803
2 files changed
+19 -7

No files matched your search

+14 -7
View File
@@ -8,13 +8,13 @@
# 1. The base tag is PINNED to the exact appstore image the app runs # 1. The base tag is PINNED to the exact appstore image the app runs
# (manifest.dockerImage). Never a floating tag: a rebuild must never # (manifest.dockerImage). Never a floating tag: a rebuild must never
# silently pull a newer LibreChat than the one we validated. # silently pull a newer LibreChat than the one we validated.
# 2. NEVER edit CloudronManifest.json — the copy in this repo must stay # 2. CloudronManifest.json keeps the OFFICIAL appstore addons block
# byte-identical to the OFFICIAL appstore manifest. `cloudron update` # (postgresql, mongodb, oidc, sendmail, localstorage) — never remove or
# reads it from the deploy directory and applies it to the app; a # hand-edit those, or the app crash-loops (mkdir: Read-only file system).
# hand-edited manifest that omits addons (postgresql, mongodb, oidc, # The ONLY field we change is `dockerImage`, repointed to the overlay tag
# sendmail, localstorage) strips them from the app and crash-loops it # built from this repo on every deploy (the base FROM stays the appstore
# (mkdir: Read-only file system). That is what broke the sandbox on # image we validated). A stale dockerImage pin silently redeploys an old
# 2026-10-18 — the manifest, not the overlay, was the bug. # build — that is what broke the sandbox on 2026-10-18/19.
# 3. This image changes ONLY static brand assets. All behavior lives on the # 3. This image changes ONLY static brand assets. All behavior lives on the
# persistent volume (/app/data/librechat.yaml, /app/data/env, # persistent volume (/app/data/librechat.yaml, /app/data/env,
# /app/data/mcp/) and survives image updates unchanged. # /app/data/mcp/) and survives image updates unchanged.
@@ -48,3 +48,10 @@ RUN sed -i 's|<title>LibreChat</title>|<title>Inference Co‑op</title>|' /app/c
sed -i '/<link rel="stylesheet" href="assets\/custom.css">/a <script src="assets/custom2.js"></script>' /app/code/librechat/client/dist/index.html && \ sed -i '/<link rel="stylesheet" href="assets\/custom.css">/a <script src="assets/custom2.js"></script>' /app/code/librechat/client/dist/index.html && \
sed -i 's|assets/logo.svg|assets/logo.svg?v=3|g' /app/code/librechat/client/dist/assets/index.*.js && \ sed -i 's|assets/logo.svg|assets/logo.svg?v=3|g' /app/code/librechat/client/dist/assets/index.*.js && \
rm -f /app/code/librechat/client/dist/assets/index.*.js.gz /app/code/librechat/client/dist/assets/index.*.js.br rm -f /app/code/librechat/client/dist/assets/index.*.js.gz /app/code/librechat/client/dist/assets/index.*.js.br
# 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
+5
View File
@@ -119,3 +119,8 @@ footer a {
footer a:hover { footer a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Bare page background: cream 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.dark, html.dark body { background-color: rgb(34, 39, 31); }