[nu-demo] hero_collab island uses its own dark theme; should follow hero_os theme tokens

mik-tf commented

2026-04-24 00:53:56 +00:00

Owner

Symptom

The Communication > Collab island renders in its own dark navy/black palette regardless of the hero_os theme. All other islands follow the light theme that matches the desktop chrome. Visual inconsistency hurts demo polish.

Root cause

hero_collab_ui ships with hard-coded CSS instead of consuming hero_os CSS variables (--color-text, --color-bg, --color-primary, etc.) the way other archipelagos do.

Demo workaround

None — purely cosmetic.

Proper fix

Audit hero_collab_ui static CSS; replace hex colors with var(--color-*) tokens defined by hero_os theme system.
Consume the theme field from IslandContext (already passed: dark or light) to switch palette accordingly.
Add a visual regression test (Playwright + screenshot) for theme consistency across all admin/library islands.

Signed-off-by: mik-tf — 2026-04-23

## Symptom The Communication > Collab island renders in its own dark navy/black palette regardless of the hero_os theme. All other islands follow the light theme that matches the desktop chrome. Visual inconsistency hurts demo polish. ## Root cause `hero_collab_ui` ships with hard-coded CSS instead of consuming hero_os CSS variables (--color-text, --color-bg, --color-primary, etc.) the way other archipelagos do. ## Demo workaround None — purely cosmetic. ## Proper fix 1. Audit `hero_collab_ui` static CSS; replace hex colors with `var(--color-*)` tokens defined by hero_os theme system. 2. Consume the `theme` field from IslandContext (already passed: `dark` or `light`) to switch palette accordingly. 3. Add a visual regression test (Playwright + screenshot) for theme consistency across all admin/library islands. Signed-off-by: mik-tf — 2026-04-23

mik-tf referenced this issue

2026-04-24 15:38:45 +00:00

[nu-demo] Dock islands broken on web feature build — OSIS/Services have only native variants, Services is dead wood, Videos missing, Books needs iframe default #171

mik-tf referenced this issue

2026-04-25 03:13:33 +00:00

[nu-demo] STATE OF HERONU as of 2026-04-24 — what works, what's still broken, everything that needs upstream landing #160

mik-tf referenced this issue

2026-04-25 03:24:30 +00:00

[nu-demo] hero_books library cards have poor light-mode text contrast — titles invisible on dark gradient backgrounds #184

mik-tf referenced this issue

2026-04-25 15:43:33 +00:00

[Phase 2] Codify demo-VM hotfixes into upstream code — clean runbook, no manual steps #185

mik-tf referenced this issue from a commit

2026-04-27 04:05:26 +00:00

fix(collab_ui): theme tokens follow data-bs-theme — light + dark variants

mik-tf referenced this issue from a commit

2026-04-27 04:05:26 +00:00

fix(collab_ui): theme tokens follow data-bs-theme — light + dark variants

mik-tf closed this issue

2026-04-27 04:05:26 +00:00

mik-tf commented

2026-04-27 04:05:58 +00:00

Author

Owner

Fixed in hero_collab commit 445f17b on development.

Root cause — pinned via Hero Browser MCP on the live herodemo:

chat.html had <html lang="en" data-bs-theme="dark"> hardcoded AND its inline <style> block declared all CSS variables under a single :root { ... } rule (no theme conditional). Even when the hero_os host or the page itself flipped data-bs-theme="light", the variable values stayed dark — body bg rgb(26, 26, 46), sidebar bg rgb(15, 22, 40), etc. — and the entire island ignored Bootstrap's theme attribute.

editor.html had the same pattern with a smaller variable set.

Fix — matches the canonical Hero UI pattern used by hero_aibroker and hero_books:

<html lang="en"> — drop the hardcoded data-bs-theme.
Inline bootstrap script reads localStorage.getItem('theme'), defaults to dark when unset, sets data-bs-theme on the root. Hero OS shell can override at any time by re-setting the attribute (the standard cross-island theme-sync hook).
Existing :root { ... } becomes :root, [data-bs-theme="dark"] { ... } so a dark page bootstraps cleanly without a flash, AND the variable block is also addressable when something flips the attribute later.
New [data-bs-theme="light"] { ... } block declares the light-mode token values. Same variable names, light palette.
mermaid theme picks up the resolved theme via window.__heroCollabTheme === 'light' ? 'default' : 'dark'.

Verification — live test on herodemo via Hero Browser MCP js_evaluate:

Step	Result
Confirmed bug visually	`/tmp/collab.png` — dark navy in light-host context
Inspected `getComputedStyle()` on `#app`	`--bg: #1a1a2e`, `--text: #e0e0e0` (dark, despite `htmlTheme="light"`)
Located source rule via stylesheet walk	Inline `<style>` `:root { --bg: #1a1a2e ... }` (no theme conditional)
Injected the fixed CSS	`--bg: #ffffff`, `--text: #212529` (light flipped cleanly)
Re-screenshotted	`/tmp/collab_light_fixed.png` — full light palette throughout

Deploy: the fix lands automatically on next hero_collab_ui binary rebuild — both templates are embedded into the binary at build time. No infra changes needed.

Meta-tracker: home#193.

Signed-off-by: mik-tf

Fixed in hero_collab commit `445f17b` on `development`. **Root cause** — pinned via Hero Browser MCP on the live herodemo: `chat.html` had `<html lang="en" data-bs-theme="dark">` hardcoded AND its inline `<style>` block declared all CSS variables under a single `:root { ... }` rule (no theme conditional). Even when the hero_os host or the page itself flipped `data-bs-theme="light"`, the variable values stayed dark — body bg `rgb(26, 26, 46)`, sidebar bg `rgb(15, 22, 40)`, etc. — and the entire island ignored Bootstrap's theme attribute. `editor.html` had the same pattern with a smaller variable set. **Fix** — matches the canonical Hero UI pattern used by `hero_aibroker` and `hero_books`: 1. `<html lang="en">` — drop the hardcoded `data-bs-theme`. 2. Inline bootstrap script reads `localStorage.getItem('theme')`, defaults to `dark` when unset, sets `data-bs-theme` on the root. Hero OS shell can override at any time by re-setting the attribute (the standard cross-island theme-sync hook). 3. Existing `:root { ... }` becomes `:root, [data-bs-theme="dark"] { ... }` so a dark page bootstraps cleanly without a flash, AND the variable block is also addressable when something flips the attribute later. 4. New `[data-bs-theme="light"] { ... }` block declares the light-mode token values. Same variable names, light palette. 5. mermaid theme picks up the resolved theme via `window.__heroCollabTheme === 'light' ? 'default' : 'dark'`. **Verification** — live test on herodemo via Hero Browser MCP `js_evaluate`: | Step | Result | |------|--------| | Confirmed bug visually | `/tmp/collab.png` — dark navy in light-host context | | Inspected `getComputedStyle()` on `#app` | `--bg: #1a1a2e`, `--text: #e0e0e0` (dark, despite `htmlTheme="light"`) | | Located source rule via stylesheet walk | Inline `<style>` `:root { --bg: #1a1a2e ... }` (no theme conditional) | | Injected the fixed CSS | `--bg: #ffffff`, `--text: #212529` (light flipped cleanly) | | Re-screenshotted | `/tmp/collab_light_fixed.png` — full light palette throughout | **Deploy:** the fix lands automatically on next hero_collab_ui binary rebuild — both templates are embedded into the binary at build time. No infra changes needed. Meta-tracker: home#193. Signed-off-by: mik-tf

mik-tf referenced this issue from lhumina_code/hero_demo

2026-04-28 12:20:57 +00:00

[nu-demo] STATE OF HERONU as of 2026-04-24 — what works, what's still broken, everything that needs upstream landing #28

mik-tf referenced this issue from lhumina_code/hero_demo

2026-04-28 12:21:21 +00:00

[nu-demo] Dock islands broken on web feature build — OSIS/Services have only native variants, Services is dead wood, Videos missing, Books needs iframe default #34

mik-tf referenced this issue from lhumina_code/hero_demo

2026-04-28 12:21:28 +00:00

[Phase 2] Codify demo-VM hotfixes into upstream code — clean runbook, no manual steps #36