Cream page background end-to-end: Dockerfile PWA colors, README, verify block
Follow-up to the custom.css/custom2.js change: the Dockerfile seds the web
manifest theme_color/background_color and the index.html light meta to
#eaf3ea, and the README's verify block asserted the green wash as correct
("an earlier version of this block asserted cream ... would have led you to
fix a correct deploy"). Both are the same regression: the wash was rejected
earlier, restored by accident, and then documented as intended.
- Dockerfile: manifest + index meta -> #faf8f5 (cream), with an explicit
"keep these three in sync" note (this sed, custom.css html:not(.dark),
custom2.js COOP_BG.light).
- README verify block: asserts cream again, plus a new step for the
install-time colors no DOM check covers (manifest + light meta).
- README palette section: hover is #f0ede6 not the wash; --presentation is
cream; source of truth is the DEPLOYED CSS of dashboard/portal/panel, with
the read command; records the shared 4.32:1 / 3.93:1 accessibility caveat;
notes that cloudron exec silently swallows multi-line sh -c.
This commit is contained in:
1 parent
3d03a80651
commit
d099d31f6a
2 files changed
+50
-28
No files matched your search
+9
-6
@@ -67,12 +67,15 @@ RUN python3 /app/code/patch_index.py && \
|
|||||||
|
|
||||||
# PWA chrome colors: LibreChat ships a teal theme_color (#009688) in the web
|
# 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
|
# manifest (the bright green bar Firefox PWAs draw across the top) and black
|
||||||
# background_color. Point both at the light page color (#eaf3ea dashboard green
|
# background_color. Point both at the light page color — CREAM #faf8f5, the
|
||||||
# wash — the manifest can only hold one value; custom2.js re-syncs the meta
|
# dashboard's page background (the manifest can only hold one value; custom2.js
|
||||||
# tags to the app's actual theme at runtime). The index.html meta gets a
|
# re-syncs the meta tags to the app's actual theme at runtime). The index.html
|
||||||
# light + dark pair so browser/PWA chrome matches the phone theme natively.
|
# meta gets a light + dark pair so browser/PWA chrome matches the phone theme
|
||||||
RUN sed -i 's|"theme_color": *"#009688"|"theme_color":"#eaf3ea"|; s|"background_color": *"#000000"|"background_color":"#eaf3ea"|' /app/code/librechat/client/dist/manifest.webmanifest && \
|
# natively. KEEP THESE THREE IN SYNC: this sed, custom.css's html:not(.dark)
|
||||||
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
|
# background, and custom2.js COOP_BG.light — the green wash #eaf3ea used to sit
|
||||||
|
# in all three and made the installed app read as green.
|
||||||
|
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
|
||||||
|
|
||||||
# Log ownership guard: a host-side daily job creates the next day's dated log
|
# Log ownership guard: a host-side daily job creates the next day's dated log
|
||||||
# files in /app/data/logs as root:root at 00:00 UTC; LibreChat (cloudron user)
|
# files in /app/data/logs as root:root at 00:00 UTC; LibreChat (cloudron user)
|
||||||
|
|||||||
@@ -147,14 +147,19 @@ md5sum assets/custom.css
|
|||||||
# 3. Served HTML carries the injection
|
# 3. Served HTML carries the injection
|
||||||
curl -s https://chat.inference.coop/login | grep -Eo 'assets/custom2?\.js|assets/custom\.css'
|
curl -s https://chat.inference.coop/login | grep -Eo 'assets/custom2?\.js|assets/custom\.css'
|
||||||
# 4. Rendered DOM shows it (browser devtools or a browser tool). The DEPLOYED
|
# 4. Rendered DOM shows it (browser devtools or a browser tool). The DEPLOYED
|
||||||
# palette is the GREEN WASH with white text areas — an earlier version of this
|
# palette is CREAM with white text areas — the dashboard's own look. (An
|
||||||
# block asserted cream (rgb(250,248,245)), which would have led you to "fix"
|
# intermediate version shipped the full green wash #eaf3ea as the page
|
||||||
# a correct deploy:
|
# background and read as "too green" — cream is the intended value, so this
|
||||||
# computed background of div.bg-surface-primary == rgb(234, 243, 234);
|
# block asserts cream; do not "fix" a cream deploy back to the wash):
|
||||||
# chat text areas / composer == rgb(255, 255, 255);
|
# computed background of div.bg-surface-primary == rgb(250, 248, 245);
|
||||||
|
# chat text areas == rgb(255, 255, 255); composer band == cream;
|
||||||
# dark scheme == rgb(34, 39, 31);
|
# dark scheme == rgb(34, 39, 31);
|
||||||
# the "Don't have an account?" <p> computes display: none.
|
# the "Don't have an account?" <p> computes display: none.
|
||||||
# 5. The scheduler task's script exists in THIS image — a manifest repoint
|
# 5. INSTALL-TIME colors, which no DOM check covers — the web manifest and the
|
||||||
|
# index.html light meta must be #faf8f5, not the wash:
|
||||||
|
curl -s https://chat.inference.coop/manifest.webmanifest | grep -o '"theme_color":"[^"]*"'
|
||||||
|
curl -s https://chat.inference.coop/ | grep -o 'media="(prefers-color-scheme: light)" content="[^"]*"'
|
||||||
|
# 6. The scheduler task's script exists in THIS image — a manifest repoint
|
||||||
# deployed before its image lands leaves the key seed broken on schedule:
|
# deployed before its image lands leaves the key seed broken on schedule:
|
||||||
cloudron --server my.inference.coop --token "$CLOUDRON_TOKEN" exec --app $APP \
|
cloudron --server my.inference.coop --token "$CLOUDRON_TOKEN" exec --app $APP \
|
||||||
-- test -f /app/data/sync-keys.js && echo "seed path present"
|
-- test -f /app/data/sync-keys.js && echo "seed path present"
|
||||||
@@ -226,15 +231,17 @@ Set via `cloudron env set` (process env):
|
|||||||
Injected into the built SPA by the Dockerfile (`<link>` + `<script>` after
|
Injected into the built SPA by the Dockerfile (`<link>` + `<script>` after
|
||||||
the `<title>` sed). What it does:
|
the `<title>` sed). What it does:
|
||||||
|
|
||||||
**Palette (final)**: light `--surface-primary` is `250 248 245` (#faf8f5
|
**Palette (final, restored 2026-10-27)**: light `--surface-primary` is
|
||||||
cream) — the dashboard's true page background (the green wash #eaf3ea was
|
`250 248 245` (#faf8f5 cream) — the dashboard's true page background. Sibling
|
||||||
tried as the full background and rejected as too dark; on the dashboard the
|
surfaces: sidebar/composer box = white cards, tertiary = #f4f2ec (dashboard
|
||||||
green is accent-only). Sidebar/composer box = white cards, tertiary = #f4f2ec
|
chips), hover = #f0ede6 (warm), border = #e4e0d8, `--surface-chat` = white,
|
||||||
(dashboard chips), hover = #eaf3ea green wash, border = #e4e0d8, chat text
|
`--presentation` = cream (the composer band matches the page). Green
|
||||||
areas (`--surface-chat`, `--presentation`) = white. Green (#5b8c5a family)
|
(#5b8c5a family) stays on ACCENTS only: buttons, links (#4e7a4d), focus rings.
|
||||||
stays on accents: buttons, links, focus rings. Loading flash = cream.
|
Loading flash = cream. Dark mode: deep pine + green-light accents, unchanged.
|
||||||
Dark mode: deep pine + green-light accents. Homepage variables remain the
|
The green wash #eaf3ea is NOT a surface value anywhere — on the dashboard it
|
||||||
reference for other surfaces.
|
appears only as badges/table headers. Applying it to `--surface-primary` is
|
||||||
|
the regression that reads as "too green"; it was tried, rejected, restored by
|
||||||
|
mistake in the Oct 21 rebuild, and removed again on Oct 27.
|
||||||
|
|
||||||
**Fonts**: Figtree (the homepage's OFL font) is self-hosted from the design
|
**Fonts**: Figtree (the homepage's OFL font) is self-hosted from the design
|
||||||
kit (`assets/fonts/figtree-*.woff2` + OFL.txt, served at `/assets/fonts/`)
|
kit (`assets/fonts/figtree-*.woff2` + OFL.txt, served at `/assets/fonts/`)
|
||||||
@@ -253,13 +260,25 @@ footer tagline ("Every AI for Everyone.") with the co-op footer
|
|||||||
deleting stale `.gz`/`.br` siblings of edited files. Add new string
|
deleting stale `.gz`/`.br` siblings of edited files. Add new string
|
||||||
replacements to the `REPLACEMENTS` list.
|
replacements to the `REPLACEMENTS` list.
|
||||||
|
|
||||||
**Palette source of truth**: the co-op homepage's own CSS variables —
|
**Palette source of truth**: the DEPLOYED CSS of the co-op's own interfaces —
|
||||||
`--cream #faf8f5` (surfaces), `--wash #eef4ea` (panels/hover),
|
dashboard, portal, panel — read from the running apps. All three are identical
|
||||||
`--green-deep #5b8c5a` (primary/submit), `--green-mid #6ba86b` (hover),
|
because they share one design system: `--cream #faf8f5` (page background),
|
||||||
`--green-light #7ab87a` (dark-mode accent), `--ink #2d3327` (text),
|
`#ffffff` (cards), `#f4f2ec`/`#f0ede6` (chips/hover), `--green-deep #5b8c5a`
|
||||||
`--muted #6b7a62` (secondary text), `--border #e8e2d8`. The `html.light` /
|
(primary/submit), `--green-mid #6ba86b` (hover), `--green-light #7ab87a`
|
||||||
`html.dark` blocks in `custom.css` map these onto LibreChat's Tailwind
|
(dark-mode accent), `--ink #2d3327` (text), `--muted #6b7a62`, `--border
|
||||||
variables; keep them in sync when the homepage palette changes.
|
#e4e0d8`, `--danger #b3543a`. Read them from the apps rather than trusting
|
||||||
|
either this file or the homepage (which carries an older `--wash #eef4ea`):
|
||||||
|
|
||||||
|
cloudron exec --app <dashboard-id> -- sh -c \
|
||||||
|
"grep -rhoE -- '--[a-z0-9-]+: *[^;]+' /app/code | sort -u"
|
||||||
|
|
||||||
|
The `html.light` / `html.dark` blocks in `custom.css` map these onto
|
||||||
|
LibreChat's Tailwind variables; keep them in sync when the design system
|
||||||
|
changes. `cloudron exec` swallows a multi-line `sh -c` silently — base64 the
|
||||||
|
script or keep it one line. Shared accessibility caveat, all four interfaces
|
||||||
|
(not chat-specific): `--muted` on cream is 4.32:1, just under AA for body
|
||||||
|
text, and white-on-`green-deep` buttons are 3.93:1 — fix everywhere or
|
||||||
|
nowhere, so the interfaces stay consistent.
|
||||||
|
|
||||||
**Logo & icons**: `assets/logo.svg` is the GREEN pine-dots vector (extracted
|
**Logo & icons**: `assets/logo.svg` is the GREEN pine-dots vector (extracted
|
||||||
from the homepage's inline SVG — keep the `xmlns` attribute, a standalone
|
from the homepage's inline SVG — keep the `xmlns` attribute, a standalone
|
||||||
|
|||||||
Reference in new issue
Block a user