lhumina_code/home
21
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Light mode: bold text invisible in AI chat and possibly other islands #47

New issue
Closed
opened 2026-03-19 02:54:38 +00:00 by mik-tf · 1 comment
mik-tf commented 2026-03-19 02:54:38 +00:00
Owner
Copy link

Problem

In light mode, <strong> text in the AI chat bubble is invisible (white on near-white). Normal text is also faint. Dark mode works perfectly.

Root cause analysis

The AI message bubble uses:

background: var(--color-surface, #2b3035);
color: var(--color-text, #dee2e6);

The fallback values (#2b3035, #dee2e6) are dark-mode colors. In light mode, the CSS variables from theme.rs should override these (--color-text: #0f172a, --color-surface: near-white). But the <strong> tag and possibly other elements are not inheriting the correct color.

Key finding: styles.css in hero_os_app has ALL fallback colors hardcoded for dark mode. If CSS variables fail to resolve for any element, it falls back to dark-mode colors which are invisible on light backgrounds.

Attempted fixes that did NOT work:

  • color: inherit on strong
  • color: currentColor on strong (inline)
  • color: #f8f9fa !important on strong
  • CSS class .ai-markdown-content strong

This suggests the issue is deeper — the parent element's color may also be wrong, or the CSS variables are not properly cascading to the dangerous_inner_html content in the Dioxus shell.

Investigation needed

  1. Use browser DevTools to inspect the computed color on <strong> vs <p> inside the AI bubble in light mode
  2. Check if dangerous_inner_html content inherits CSS variables differently from RSX content
  3. Compare with Books (iframe-based) which works in both modes
  4. Check if the Dioxus shell applies the theme CSS before or after island content renders

Files

  • hero_os/crates/hero_os_app/src/styles.css — all fallback colors are dark-mode
  • hero_os/crates/hero_os_app/src/theme.rs — generates CSS variables for light/dark
  • hero_archipelagos/archipelagos/intelligence/ai/src/views/message_bubble.rs — AI bubble rendering
  • hero_archipelagos/archipelagos/intelligence/ai/src/island.rs — CSS styles for .ai-markdown-content
## Problem In light mode, `<strong>` text in the AI chat bubble is invisible (white on near-white). Normal text is also faint. Dark mode works perfectly. ## Root cause analysis The AI message bubble uses: ```css background: var(--color-surface, #2b3035); color: var(--color-text, #dee2e6); ``` The fallback values (`#2b3035`, `#dee2e6`) are dark-mode colors. In light mode, the CSS variables from `theme.rs` should override these (`--color-text: #0f172a`, `--color-surface: near-white`). But the `<strong>` tag and possibly other elements are not inheriting the correct color. Key finding: `styles.css` in hero_os_app has ALL fallback colors hardcoded for dark mode. If CSS variables fail to resolve for any element, it falls back to dark-mode colors which are invisible on light backgrounds. Attempted fixes that did NOT work: - `color: inherit` on strong - `color: currentColor` on strong (inline) - `color: #f8f9fa !important` on strong - CSS class `.ai-markdown-content strong` This suggests the issue is deeper — the parent element's color may also be wrong, or the CSS variables are not properly cascading to the `dangerous_inner_html` content in the Dioxus shell. ## Investigation needed 1. Use browser DevTools to inspect the computed `color` on `<strong>` vs `<p>` inside the AI bubble in light mode 2. Check if `dangerous_inner_html` content inherits CSS variables differently from RSX content 3. Compare with Books (iframe-based) which works in both modes 4. Check if the Dioxus shell applies the theme CSS before or after island content renders ## Files - `hero_os/crates/hero_os_app/src/styles.css` — all fallback colors are dark-mode - `hero_os/crates/hero_os_app/src/theme.rs` — generates CSS variables for light/dark - `hero_archipelagos/archipelagos/intelligence/ai/src/views/message_bubble.rs` — AI bubble rendering - `hero_archipelagos/archipelagos/intelligence/ai/src/island.rs` — CSS styles for .ai-markdown-content
mik-tf commented 2026-03-19 03:38:56 +00:00
Author
Owner
Copy link

Fixed. Replaced hardcoded dark-mode colors in AI markdown content (island.rs) with CSS variables (--ai-code-bg, --ai-link-color, etc.) and added light-mode overrides in styles.css. Headings, bold, links, code blocks, and table borders all adapt to the active theme now.

Also improved the build system: Cargo.toml git deps now point to development with local [patch] overrides in workspace Cargo.toml for local builds — no more pushing before building.

Verified on herodev in light mode.

Fixed. Replaced hardcoded dark-mode colors in AI markdown content (island.rs) with CSS variables (`--ai-code-bg`, `--ai-link-color`, etc.) and added light-mode overrides in styles.css. Headings, bold, links, code blocks, and table borders all adapt to the active theme now. Also improved the build system: Cargo.toml git deps now point to `development` with local `[patch]` overrides in workspace Cargo.toml for local builds — no more pushing before building. Verified on herodev in light mode.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
development
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
lhumina_code/home#47
No description provided.