Goal: Implement dark mode in react native application.A little introduction to the system:File structure:
- Profile.ts
- ProfileCss.ts
- constants.ts
In my application in order to separate styles from components, I moved them into .ts files and exported as modules.Example of StyleCss.ts:
import {StyleSheet} from 'react-native';import {Window, FixedCSS, hsize, wsize} from '../../entities/constants';export default StyleSheet.create({ loading: { backgroundColor: FixedCSS.Colors.MainBackgroundColor, } ...});
All style-related constant values stored in constants.ts such as Colors, LineHeights, and etc. Also constants.ts contains a class called FixedCSS which has static properties:
export class FixedCSS { static isDark = true; static Colors = { // Main Colors RootColor: FixedCSS.isDark ? '#FF6666' : '#FF6666', MainBackgroundColor: FixedCSS.isDark ? '#050505' : '#FFFFFF', ... } ...}
isDark property of FixedCSS is supposed to be changed with the help of Switch component in Profile.ts
<Switch value={darkMode} onValueChange={value => { this.setState({darkMode: value}); }}/>
The problem: How can I change isDark property in FixedCSS class so that it will affect the appearance of components. The most problematic aspect is that StyleCSS.ts files do not reflect to the change of isDark property in FixedCSS class, as they are exported only once when js bundle gets created.