Changing color of android:drawable according to light mode or darkMode

Question

I have created a splash screen for React Native using native Android, without any additional libraries (which is my purpose) How can I switch the color from the splash screen according to the device mode (dark or light).
I have a drawable folder in which consists of:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/darkBackground" />
  <item 
    android:width="120dp"
    android:height="120dp"
    android:drawable="@drawable/icon"
    android:gravity="center"
  />
</layer-list>

A color file:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <color name='lightBackground'>#F2F1F1</color>
  <color name='darkBackground'>#121212</color>
</resources>

If possible doing something like:

<item android:drawable=darkMode ? "@color/darkBackground" : "@color/lighBackground"  >

Answer 1

You can manage them using react native codes

import React from 'react';
import { Appearance, useColorScheme, View, StyleSheet } from 'react-native';

const App = () => {
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';

  return (
    <View style={isDarkMode ? styles.darkSplash : styles.lightSplash}>
      {/* Your splash screen content */}
    </View>
  );
};

const styles = StyleSheet.create({
  darkSplash: {
    flex: 1,
    backgroundColor: 'black',
  },
  lightSplash: {
    flex: 1,
    backgroundColor: 'white', 
  },
});

export default App;