feat: Add comprehensive dark mode support with system theme detection #991
+547
−298
Conversation
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
Add complete dark mode support to the Chatwoot mobile app with automatic system theme detection and manual theme switching. ## Core Infrastructure - Add ThemeContext with reactive system theme detection - Use useLayoutEffect to prevent theme flash on app startup - Integrate with Redux for theme preference persistence - Configure app.config.ts with userInterfaceStyle: 'automatic' ## Component Coverage (112 files) - All auth screens (Login, ConfigURL, ForgotPassword, MFA) - Conversation and chat screens with message components - All message types (text, audio, video, file, location, email) - Inbox and Dashboard screens - Settings and contact details - Navigation tabs and bottom bar - Sheet components, lists, and labels - Macros, SLA indicators, and action panels ## Dark Mode Pattern - bg-white → bg-white dark:bg-grayDark-50 - bg-gray-* → bg-gray-* dark:bg-grayDark-* - text-gray-* → text-gray-* dark:text-grayDark-* - Reactive StatusBar (light-content in dark, dark-content in light) - Theme-aware Switch component colors ## Fixes from PR Review - Restore version to 4.3.12 - Restore axios to ^1.12.0 - Restore security overrides in package.json - Fix ThemeContext race condition with useState + useLayoutEffect Based on initial work by @dilutedev in PR chatwoot#983 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
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.
Summary
This PR adds complete dark mode support to the Chatwoot mobile app with:
useLayoutEffectfor synchronous theme applicationChanges
Core Infrastructure
ThemeContextwith reactive system theme detection viaAppearanceAPIapp.config.tsconfigured withuserInterfaceStyle: 'automatic'Component Coverage
Dark Mode Pattern
Screenshots
Screenshots pending - the implementation follows the existing Radix UI color system with
grayDark-*variants.Test Plan
Related
This PR builds upon and supersedes the work started in #983 by @dilutedev. Key improvements:
🤖 Generated with Claude Code