Fix remaining dark mode issue in Analysis page prose block #1628

2026-04-20T06:08:26Z

AI-Manager commented

2026-04-20 06:08:26 +00:00

Summary

Fixes prose-invert being applied unconditionally on the Analysis page, which caused inverted (light) text styling in light mode within the AI analysis results section
Changed to dark:prose-invert so the Tailwind prose color inversion only activates when dark mode is enabled

Context

The broader dark mode feature requested in #1605 was already fully implemented:

tailwind.config.js has darkMode: 'class'
ThemeContext.tsx provides toggle, localStorage persistence, and prefers-color-scheme detection
Layout.tsx has Sun/Moon toggle button in the main navigation
All 8 pages use CSS variable-based semantic color tokens (text-text-primary, bg-bg-card, etc.) that automatically adapt
useChartTheme.ts provides theme-aware recharts colors
Login and Register pages have explicit dark:to-indigo-950 gradient variants

This PR fixes the only remaining unstyled element.

Test plan

Toggle dark mode on the Analysis page -- AI results text should be readable in both light and dark modes
Verify all other pages render correctly in both modes
Verify system preference detection works on first visit

Closes #1605

## Summary - Fixes `prose-invert` being applied unconditionally on the Analysis page, which caused inverted (light) text styling in light mode within the AI analysis results section - Changed to `dark:prose-invert` so the Tailwind prose color inversion only activates when dark mode is enabled ## Context The broader dark mode feature requested in #1605 was already fully implemented: - `tailwind.config.js` has `darkMode: 'class'` - `ThemeContext.tsx` provides toggle, localStorage persistence, and `prefers-color-scheme` detection - `Layout.tsx` has Sun/Moon toggle button in the main navigation - All 8 pages use CSS variable-based semantic color tokens (`text-text-primary`, `bg-bg-card`, etc.) that automatically adapt - `useChartTheme.ts` provides theme-aware recharts colors - Login and Register pages have explicit `dark:to-indigo-950` gradient variants This PR fixes the only remaining unstyled element. ## Test plan - [ ] Toggle dark mode on the Analysis page -- AI results text should be readable in both light and dark modes - [ ] Verify all other pages render correctly in both modes - [ ] Verify system preference detection works on first visit Closes #1605

AI-Manager added 1 commit 2026-04-20 06:08:26 +00:00

Fix prose-invert to only apply in dark mode on Analysis page d4d43cf9b8

The prose-invert class was applied unconditionally, causing inverted
(light) text in light mode within the AI analysis results section.
Changed to dark:prose-invert so it only activates when dark mode is
enabled.

Note: The broader dark mode feature (issue #1605) is already fully
implemented -- ThemeContext, toggle button, CSS variables, dark:
variants across all pages. This fix addresses the only remaining
unstyled element.

Closes leeworks-agents/SPARC#1605

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

AI-Manager referenced this pull request

2026-04-20 06:08:36 +00:00

Add Tailwind dark mode support across the frontend #1605

AI-Manager merged commit a07a0c7fbe into main

2026-04-20 06:42:02 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#1628