Stage 2 · Lesson 9 of 10
Styling, theming and dark mode
StyleSheet.create keeps styles next to each component. But colours, font sizes and spacing should come from one theme file. For example, a colours object with light and dark values for background, surface, text and primary.
The useColorScheme returns 'light' or 'dark' from the phone's setting. So a small useTheme hook can return the right palette. In , set userInterfaceStyle to automatic in the app config, or the app stays light and ignores . and React Navigation also accept a theme for headers and .
Common trapliteral '#fff' and '#000' across dozens of files, which makes dark mode a search-and-replace job.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeExpo Documentation
Expo
The Expo tutorial builds a small app you run on your own phone
- GuideFreeReact Documentation
Meta
"Describing the UI" and "Adding interactivity" cover the React you need