fix(ux): theme-aware icon + markdown colors for dark mode - #125
Merged
Conversation
Dark mode shipped with many concrete colors still hardcoded to their light-mode values — chiefly lucide icons (which take a `color` prop, not a class), where `#1e40af` (too dark) and `#0f172a` (invisible on a dark card) failed in dark mode. - Add `lib/theme-colors.ts` → `useThemeColors()` returning theme-aware accent / foreground / muted hexes. - Swap the genuinely-hardcoded `#1e40af` accents to `accent` across the app shell and renderers: ScreenHeader back arrow (every screen), home, search, apps, app nav, object list, packages, dashboard widget icons, filter drawer, view tabs, batch bar, state-machine actions, theme/language selectors, and the chart/map/calendar/report/query/sync renderers. - Make MarkdownText fully theme-aware (body text, links, code blocks, blockquotes, borders) — AI chat replies were near-black on a dark surface. Mechanical color-token swap; tsc + lint clean, full suite 1328 passing. Verified in the browser (dark): home accent icons render in the lighter blue, and an AI markdown reply is legible on the dark card. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Dark-mode color cleanup
Dark mode (PR #116) shipped, but many concrete colors stayed hardcoded to their light-mode values — chiefly lucide icons, which take a
colorprop rather than a Tailwind class.#1e40af(the light-mode accent) reads too dark on a dark surface, and#0f172a(near-black) is invisible on a dark card.Changes
lib/theme-colors.ts— auseThemeColors()hook returning theme-awareaccent/foreground/mutedhexes (accent#60a5fadark /#1e40aflight).#1e40af→accentacross the app shell and renderers:ScreenHeaderback arrow (every screen), home, search, apps tab, app navigation, object list, packages, dashboard widget icons, filter drawer, view tabs, batch bar, state-machine actions, theme/language selectors, and the chart/map/calendar/report/query/sync renderers. (Files already made theme-aware in earlier UX PRs kept their existing ternaries.)MarkdownTextis now fully theme-aware (body text, links, code blocks/fences, blockquotes, borders) — AI-chat replies were rendering near-black on a dark surface.Mid-tone greys (
#94a3b8,#64748b) and semantic status colors (reds/greens/ambers, chart series) were intentionally left — they read correctly on both themes.Verify
tsc + lint clean; full suite 1328 passing. Browser (375dp, dark): home accent icons render in the lighter blue, the AI-assistant markdown reply is legible on the dark card, and the back arrow is the lighter accent.
🤖 Generated with Claude Code