Phase 3: Iframe theme sync — Bootstrap bridge CSS + dark-mode class removal #19

Closed

mik-tf wants to merge 2 commits from development_theme_sync into development

mik-tf commented

2026-03-07 05:31:52 +00:00

Owner

Closes #17

Summary

Remove all hardcoded dark-mode Bootstrap classes from admin UI templates
Add hero-bootstrap-bridge.css link + simplified theme receiver JS
All bg-dark → bg-body-secondary, text-white → text-body
Removed data-bs-theme="dark" (receiver JS controls it)
Hex colors replaced with CSS vars

Test plan

Toggle light/dark mode in Hero OS — AI Broker admin follows theme
Verify all tabs render correctly in both modes
Check hero-bootstrap-bridge.css is served at /hero-bootstrap-bridge.css

Closes #17 ## Summary - Remove all hardcoded dark-mode Bootstrap classes from admin UI templates - Add hero-bootstrap-bridge.css link + simplified theme receiver JS - All `bg-dark` → `bg-body-secondary`, `text-white` → `text-body` - Removed `data-bs-theme="dark"` (receiver JS controls it) - Hex colors replaced with CSS vars ## Test plan - [ ] Toggle light/dark mode in Hero OS — AI Broker admin follows theme - [ ] Verify all tabs render correctly in both modes - [ ] Check hero-bootstrap-bridge.css is served at /hero-bootstrap-bridge.css

mik-tf added 2 commits

2026-03-07 05:31:52 +00:00

Phase 3: Iframe theme sync — bsMap receiver + dark-mode class removal

Build and Test / build-and-test (pull_request) Successful in 2m1s

Details

10017a5375

Added hero:theme postMessage receiver with Bootstrap var mapping (bsMap)
to sync Hero OS theme to iframe admin UIs. Removed hardcoded dark-mode
classes (bg-dark, text-white, navbar-dark, table-dark) and replaced with
theme-aware Bootstrap 5.3 equivalents (bg-body-secondary, text-body).
Removed hardcoded data-bs-theme="dark" so receiver JS controls it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Phase 3: Add hero-bootstrap-bridge.css — single source of truth

Build and Test / build-and-test (pull_request) Successful in 1m57s

Details

45408a19c6

Replace per-template bsMap JS with shared CSS file served by hero_proxy.
The bridge CSS maps Hero OS --color-* vars to Bootstrap --bs-* vars and
includes safety-net overrides for bg-dark, navbar-dark, table-dark in
light mode. Receiver JS simplified to just set vars + data-bs-theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>