-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Alert not properly visible in Dark mode #31345
Comments
@rectified95 I would like to take this up. As this will be my first contribution to this repo. if you can guide me it will be very helpful. |
I have narrowed down the issue to android/app/src/main/res/values/styles.xml. |
So it will be better if we don't include this line |
@rectified95 I have raised PR for this 31487, please review and do let me know if any modifications needed in that. |
Can confirm, removing |
Summary: #31345 The issue to` android/app/src/main/res/values/styles.xml.` In the base application theme, there is an explicitly added item `<item name="android:textColor">#000000</item>` This leads the `textColor` of the app to be black even though the theme is actually DayNight. A permanent fix would be to not have this item added by default when creating a new project, as it is buggy behavior ## Changelog [General] [removed] - line `<item name="android:textColor">#000000</item>` in this file `android/app/src/main/res/values/styles.xml `for the inital setup Pull Request resolved: #31487 Test Plan: Removing this has fixed the issue for me. Reviewed By: yungsters Differential Revision: D28966678 Pulled By: ShikaSD fbshipit-source-id: 57c6b4b7b5f11847ea6e611c7567c0c03133c79d
I am not sure this is the best approach, because if someone simply removes this line and does nothing else, there is no default text color anymore. So wherever the text color is not explicitly styled, the text no longer has a color. People expect text to have a default style and just work. E.g. right now, I just deleted this line manually, and half my text is no longer visible. A better approach that doesn't break any expected behavior is what's discussed in this other thread. But it is slightly more elaborate. |
This was introduced in 8919a6a, to achieve consistancy with iOS. With the chances made in 4db472a, this becomes the cause of an inconsistancy where setting system dark mode in android, makes the text colors black within a dark colored alert dialog box, giving a poor color contrast and overall bad look to the dialog box. This commit makes the color white on dark background and black on light background, based on the theme. Similar issue on upstream: facebook/react-native#31345 Discussion on CZO: https://chat.zulip.org/#narrow/stream/48-mobile/topic/Dark.20theme.20issue.20on.20Android
This was introduced in 8919a6a, to achieve consistancy with iOS. With the changes made in 4db472a, this becomes the cause of an inconsistancy where setting system dark mode in android, makes the text colors black within a dark colored alert dialog box, giving a poor color contrast and overall bad look to the dialog box. This commit makes the color white on dark background and black on light background, based on the theme. Similar issue on upstream: facebook/react-native#31345 Discussion on CZO: https://chat.zulip.org/#narrow/stream/48-mobile/topic/Dark.20theme.20issue.20on.20Android
This was introduced in 8919a6a, to achieve consistancy with iOS. With the changes made in 4db472a, this becomes the cause of an inconsistancy where setting system dark mode in android, makes the text colors black within a dark colored alert dialog box, giving a poor color contrast and overall bad look to the dialog box. This commit makes the color white on dark background and black on light background, based on the theme. Similar issue on upstream: facebook/react-native#31345 Discussion on CZO: https://chat.zulip.org/#narrow/stream/48-mobile/topic/Dark.20theme.20issue.20on.20Android/near/1231579
This changes |
I know this is an old thread, but I am getting this exact behaviour on RN v0.71.3. |
Description
Upon upgrading from version 0.63.2 to 0.64.0, I am facing a styling issue with the Alert component/API on Android. Previously, it always used to display a light background with a dark title, main text and buttons regardless of the device's theme (be it in System Default, Light or Dark mode). This was probably because the AppTheme in android/app/src/main/res/values/styles.xml inherited from Theme.AppCompat.Light.NoActionBar.
Now, upon upgrading to 0.64, the AppTheme's parent has changed to Theme.AppCompat.DayNight.NoActionBar probably to better accomodate Dark mode (and device theme change, in general). However, with this change, while the Alert component's background has changed to dark and its main text has changed to light (both good), the title and action button texts remain dark. This makes them very hard to read.
React Native version:
System:
OS: Windows 8 6.2.9200
CPU: (4) x64 Intel(R) Core(TM) i3-3120M CPU @ 2.50GHz
Memory: 1.44 GB / 7.61 GB
Binaries:
Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 22, 26, 27, 28, 29
Build Tools: 26.0.2, 27.0.3, 28.0.3, 29.0.2, 30.0.0
System Images: android-28 | Google APIs Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
Visual Studio: Not Found
Languages:
Java: 11.0.2
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
Create project with npx react-native init
Change theme to Dark Mode from Device Settings
Use the following code wherever appropriate
Expected Results
When in Dark Mode, the Alert title and action button texts to be in Light colors
Screenshots:
Current light mode (or in previous version, any mode style):
Current dark mode:
The text was updated successfully, but these errors were encountered: