import {Appearance} from 'react-native';
-Exposes information about the user's appearance preferences.
-You can use the Appearance module to determine if the user prefers a dark color scheme:
-const colorScheme = Appearance.getColorScheme();
-if (colorScheme === 'dark') {
-
-}
-
-Although the color scheme is available immediately, this may change (e.g scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value (for example, using a context and the useColorScheme hook, or using inline styles rather than setting a value in a StyleSheet).
+The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).
Developer Notes
@@ -88,7 +81,7 @@
-The Appearance API is inspired by the Media Queries draft from the W3C. The color scheme preference is modeled after the prefers-color-scheme CSS media feature.
+The Appearance API is inspired by the Media Queries draft from the W3C. The color scheme preference is modeled after the prefers-color-scheme CSS media feature.
@@ -99,16 +92,14 @@
The color scheme preference will map to the user's Light or Dark Mode preference on iOS 13 devices and higher.
-useColorScheme Hook
-The useColorScheme React hook provides and subscribes to color scheme updates:
-import {Text, useColorScheme} from 'react-native';
-
-const MyComponent = () => {
- const colorScheme = useColorScheme();
- return <Text>useColorScheme(): {colorScheme}</Text>;
-};
+Example
+You can use the Appearance module to determine if the user prefers a dark color scheme:
+const colorScheme = Appearance.getColorScheme();
+if (colorScheme === 'dark') {
+
+}
-You can find a complete example that demonstrates the use of this hook alongside a React context to add support for light and dark themes to your application in AppearanceExample.js.
+Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value. For example, you may use the useColorScheme React hook as it provides and subscribes to color scheme updates, or you may use inline styles rather than setting a value in a StyleSheet.
Reference
Methods
getColorScheme()
@@ -122,7 +113,7 @@
null: The user has not indicated a preferred color theme.
See also: useColorScheme hook.
-
