Appearance API
The Appearance API allows React Native applications to detect the device’s current color scheme preference and respond to changes in real time, forming the foundation for dark mode support.
Getting the Current Color Scheme
Listening for Appearance Changes
The Appearance API provides an event listener that fires whenever the user changes their system theme setting while the app is running.
Appearance vs useColorScheme Hook
While the Appearance API can be used directly, the useColorScheme hook is generally preferred inside components since it automatically triggers a re-render when the theme changes, without manual event listener management.
Building a Complete Theming Solution
Combining the Appearance API or useColorScheme hook with a Context Provider allows you to build a complete, app-wide theming solution that automatically adapts to system preferences.
Testing Appearance Changes
On both Android and iOS emulators, you can manually toggle system dark mode settings to test how your application responds to Appearance changes in real time.
Conclusion
The Appearance API is the foundation for building theme-aware React Native applications. Combined with the useColorScheme hook and Context, it enables a smooth, automatic dark mode experience for your users.
