feat: Add dark mode support with system theme detection #983
Conversation
This commit adds comprehensive dark mode support to the mobile app, allowing users to choose between light, dark, and system themes. Key changes: - Created ThemeContext to manage theme state across the app - Added theme preference to Redux settings with persistence - Configured twrnc (Tailwind React Native) with dark mode support - Implemented theme selection UI in settings screen with bottom sheet - Added theme-aware StatusBar and background colors - Integrated Radix UI dark color palette already present in codebase - Added translations for theme options (Light, Dark, System) - Theme follows system preference when set to "System" mode The implementation leverages the existing Radix UI color system that was already defined but not yet wired up for dark mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| useEffect(() => { | ||
| if (theme === 'system') { | ||
| const subscription = Appearance.addChangeListener(({ colorScheme: newColorScheme }) => { | ||
| tailwind.setColorScheme(newColorScheme); | ||
| }); |
There was a problem hiding this comment.
When the user selects system (the default) the ThemeProvider branch at lines 32-36 only registers an Appearance listener and never calls tailwind.setColorScheme with the current system scheme, nor does it update context when the system theme changes. With dark mode enabled at the OS level, the app stays on the prior light scheme until a future appearance change triggers a re-render, so the “Follow system” option and default boot on dark devices show incorrect colors.
Useful? React with 👍 / 👎.
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]>
|
Is it automatically obtaining the system theme and does it have a button to switch it? |
2 participants
Pull Request Template
Description
This commit adds comprehensive dark mode support to the mobile app, allowing users to choose between light, dark, and system themes.
Key changes:
The implementation leverages the existing Radix UI color system that was already defined but not yet wired up for dark mode.
Type of change
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Checklist: