Класс Appearance

Класс Appearance не рисует элементы на экране. Метод getColorScheme возвращает строку из перечисления ColorScheme или null, если тема ещё не известна. Метод addChangeListener вызывает обработчик при смене темы. Метод setColorScheme задаёт тему для приложения или сбрасывает её.

Синтаксис

import { Appearance } from 'react-native';

const scheme = Appearance.getColorScheme();

Методы

Метод	Описание
`getColorScheme`	Возвращает текущую тему или `null`.
`addChangeListener`	Подписывает функцию на смену темы.
`setColorScheme`	Фиксирует светлую, тёмную тему или сброс.

Пример

Давайте покажем текущую тему на экране:

import { View, Text, Appearance } from 'react-native';

export default function App() {
	const scheme = Appearance.getColorScheme();

	return (
		<View>
			<Text>{scheme ?? 'abcde'}</Text>
		</View>
	);
}

На экране строка 'light', 'dark' или запасной текст, если тема ещё null.

Пример

Давайте сменим фон в зависимости от темы:

import { View, Text, Appearance } from 'react-native';

export default function App() {
	const dark = Appearance.getColorScheme() === 'dark';

	return (
		<View style={{ flex: 1, backgroundColor: dark ? '#112233' : '#aabbcc' }}>
			<Text>12345</Text>
		</View>
	);
}

На экране светлый или тёмный фон и текст '12345'.

Смотрите также

функция useColorScheme,
которая читает тему внутри компонента
перечисление ColorScheme,
которое задаёт строки темы
функция DynamicColorIOS,
которая подстраивает цвет под тему на iOS
компонент StatusBar,
который меняет вид системной полосы