How to force disable android dark mode in React Native

Question

I made one app in react-naive using

"react-native": "0.62.0",

"react": "16.11.0",

as I put my android device in dark mode, my UI designs get disturbed so i want to make it disable for now.

please help.

what exact part of you UI is getting disturbed? Statubar? footer? buttons? — Kamron Jurayev, Oct 27 '20 at 11:26
https://drive.google.com/file/d/1yr7JFnCVQT_QEq5aUODhw0qjF1X4W1jB/view?usp=sharing , I have managed it with some images also having some content pages loaded in so both creating issue — cakePHP, Oct 27 '20 at 13:41
https://stackoverflow.com/questions/53748973/how-to-change-the-background-color-of-webview-in-react-native - this sounds like a solution to dark mode. Also you can change colors of Statusbar or completely remove statusbar — Kamron Jurayev, Oct 28 '20 at 10:49

Bhavya Koshiya · Answer 1 · 2022-12-27T09:27:13.530

10

You can disable force dark mode in android by adding this line in your styles.xml in your android folder

<item name="android:forceDarkAllowed">false</item>

Like this

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:textColor">#000000</item>
    </style>
</resources>

You need to run the app again after doing these changes since these changes are native level.

edited Dec 27 '22 at 09:27

answered Jun 25 '21 at 06:40

Bhavya Koshiya

1,262
2
8
22

not working at all – Mahish Dino Nov 23 '21 at 09:55
can you share code of your styles.xml, I use this in my every project – Bhavya Koshiya Nov 23 '21 at 11:12
Didn't work for me. – TripleM Jan 12 '22 at 15:33
11

in – A.Sana Feb 22 '22 at 09:56
Remember to remove android/app/build and reinstall android app – Daniel Espinosa Mar 15 '22 at 23:26

score 9 · Answer 2 · answered Dec 22 '22 at 09:52

9

File path: android/app/src/main/res/values/styles.xml

change

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">

to

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
</style>

answered Dec 22 '22 at 09:52

Deepak Singh

749
4
16

Beast answer. Thank you. Also kudos to @https://stackoverflow.com/users/9176532/a-sana – brill May 30 '23 at 07:29

score 6 · Answer 3 · answered Mar 24 '22 at 07:02

6

For IOS change your info.plist

<key>UIUserInterfaceStyle</key>
    <string>Light</string>

answered Mar 24 '22 at 07:02

Ganesh Moorthy A

129
1
3

score 0 · Answer 4 · answered Jun 28 '22 at 12:27

It's complicade because you can try many things but if you buy a theme of other developer maybe the code have lines to force the dark mode. I bought a theme a have this lines, like this:

export const useTheme = () => {
 const isDarkMode = useColorScheme() === 'dark';
 const forceDark = useSelector(state => state.application.force_dark);
 const themeStorage = useSelector(state => state.application.theme);
 const listTheme = ThemeSupport.filter(item => item.theme == themeStorage);
 const theme = listTheme.length > 0 ? listTheme[0] : DefaultTheme;

 if (forceDark) {
   return {theme: theme.dark, colors: theme.dark.colors}; <--- change here
 }
 if (forceDark === false) {
   return {theme: theme.light, colors: theme.light.colors};
 }
 return isDarkMode
   ? {theme: theme.dark, colors: theme.dark.colors} <----- change here
   : {theme: theme.light, colors: theme.light.colors};
};

So I change dark to ligth and solved my problem.

How to force disable android dark mode in React Native

4 Answers4

Linked

Related