We've been working on integrating dark mode into an existing project, where specific colors are defined in a separate file and utilized throughout the application as shown below
import {Appearance} from "react-native";
const isDarkMode = (Appearance.getColorScheme() === 'dark')
const Color = {
WHITE: '#FFFFFF',
TRANSPARENT: 'transparent',
THEMECOLOR: isDarkMode ? '#1A252F' : '#25A31D',
THEMEBLACK: isDarkMode ? '#121B24' : '#252525',
THEMEDARKGREEN: isDarkMode ? '#2F3F4D' : '#407F2C',
THEMEWHITE: isDarkMode ? '#121B24' : '#FFFFFF',
TXTGREETING: isDarkMode ? '#898989' : 'rgba(0, 0, 0, .5)',
TXTWHITE: isDarkMode ? '#8A8A8A' : '#FFFFFF',
TXTTHEME: isDarkMode ? '#676C69' : '#25A31D',
TXTGREY: isDarkMode ? '#676C69' : '#9E9E9E',
TXTDARKGREY: isDarkMode ? '#505050' : '#9E9E9E',
TXTBLACK: isDarkMode ? '#676c69' : '#252525',
}
export default { Color };
The color values are then used like this
import appColors from "common/colors";
export default StyleSheet.create({
container:{
flex:1,
backgroundColor: appColors.Color.THEMECOLOR,
}
});
While our app does not have an internal switch for dark mode, it does automatically adjust based on the device settings. However, restarting the app is required for the changes to take effect.
We have encountered an issue when trying to implement themes in NavigationContainer during runtime
import { NavigationContainer,DarkTheme,DefaultTheme } from "@react-navigation/native";
render() {
return (
<NavigationContainer theme={isDarkMode?DarkTheme:DefaultTheme}>
<RootStackScreen screenProps={this.props} />
</NavigationContainer>
)
}
If you have any suggestions on how to achieve seamless dark mode switching during runtime when the device settings change, we would appreciate your input.
Thank you!