Expo Config Plugin to disable forced Dark mode.

withDisableForcedDarkModeAndroid.js

// disable forced dark mode to prevent weird color changes
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createRunOncePlugin, withAndroidStyles, AndroidConfig } = require('expo/config-plugins')

function setForceDarkModeToFalse(styles) {
  const newStyles = AndroidConfig.Styles.assignStylesValue(styles, {
    add: true,
    // ############# FOLLOW IF YOU'RE ON SDK 52 #############
    // TODO: AndroidConfig.Styles.getAppThemeGroup() will be available in SDK 52 (or expo/config-plugins 9+), for now I just hardcoded AppTheme
    // parent: AndroidConfig.Styles.getAppThemeGroup(),
    parent: { name: 'AppTheme' },
    name: `android:forceDarkAllowed`,
    value: 'false',
  })

  return newStyles
}

const withDisableForcedDarkModeAndroid = (config) => {
  return withAndroidStyles(config, (config) => {
    config.modResults = setForceDarkModeToFalse(config.modResults)
    return config
  })
}

module.exports = createRunOncePlugin(
  withDisableForcedDarkModeAndroid,
  'disable-forced-dark-mode',
  '1.0.0'
)

Worked, thanks!

I'm using react-native-edge-to-edge in my app

changed the plugin accordingly

function setForceDarkModeToFalse(styles) {
  styles = AndroidConfig.Styles.assignStylesValue(styles, {
    add: true,
    parent: {
      name: 'AppTheme',
      parent: 'Theme.EdgeToEdge',
    },
    name: `android:forceDarkAllowed`,
    value: 'false',
  });

My styles.xml looks like this but forceDarkAllowed: false is not applied.

<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.EdgeToEdge">
  <item name="android:textColor">@android:color/black</item>
  <item name="android:editTextStyle">@style/ResetEditText</item>
  <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="android:windowLightStatusBar">true</item>
  <item name="android:forceDarkAllowed">false</item>
</style>
<style name="ResetEditText" parent="@android:style/Widget.EditText">
  <item name="android:padding">0dp</item>
  <item name="android:textColorHint">#c8c8c8</item>
  <item name="android:textColor">@android:color/black</item>
</style>
<style name="Theme.App.SplashScreen" parent="AppTheme">
  <item name="android:windowBackground">@drawable/splashscreen</item>
</style>
<style name="BootTheme" parent="Theme.BootSplash">
  <item name="postBootSplashTheme">@style/AppTheme</item>
  <item name="bootSplashBackground">@color/bootsplash_background</item>
  <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
</style>
</resources>

Sorry, here is the updated file which works with EdgeToEdge @felippewick

// disable forced dark mode to prevent weird color changes
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createRunOncePlugin, withAndroidStyles, AndroidConfig } = require('expo/config-plugins')

function setForceDarkModeToFalse(styles) {
  const newStyles = AndroidConfig.Styles.assignStylesValue(styles, {
    add: true,
    // TODO: AndroidConfig.Styles.getAppThemeGroup() will be available in SDK 52 (or expo/config-plugins 9+), for now I just hardcoded AppTheme
    // parent: AndroidConfig.Styles.getAppThemeGroup(),
    parent: { name: 'AppTheme' },
    name: `android:forceDarkAllowed`,
    value: 'false',
  })

  return newStyles
}

const withDisableForcedDarkModeAndroid = (config) => {
  return withAndroidStyles(config, (config) => {
    config.modResults = setForceDarkModeToFalse(config.modResults)
    return config
  })
}

module.exports = createRunOncePlugin(
  withDisableForcedDarkModeAndroid,
  'disable-forced-dark-mode',
  '1.0.0'
)

If you're on SDK52, you can change the TODO

Updated the gist

<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.EdgeToEdge">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="android:forceDarkAllowed">false</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowLightNavigationBar">false</item>
    <item name="enforceNavigationBarContrast">false</item>
  </style>
  <style name="ResetEditText" parent="@android:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">@android:color/black</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

@hirbod forceDarkAllowed is being copied to the styles.xml file. But it is not being applied in the build. Using expo android release build.
Splash screen (background color given as white using expo-splash-screen plugin) is still showing a black background when in dark mode.

I have given userInterfaceStyle: light in app.config.ts

I tried applying false under Theme.App.SplashScreen, still same result. I am testing in a Redmi phone. Any help?