Темный режим — это классная функция в мобильных приложениях. Вот пошаговое руководство по его реализации в нативном приложении React.

  1. Настройте файл темы: создайте файл с именем theme.js в корневом каталоге вашего приложения. В этом файле вы можете определить цветовую схему вашего приложения как для светлого, так и для темного режима.

Theme.js

export const lightTheme = {
  backgroundColor: '#FFFFFF',
  textColor: '#000000',
};
export const darkTheme = {
  backgroundColor: '#000000',
  textColor: '#FFFFFF',
};

2. Создайте контекст: создайте ThemeContext с помощью React createContext API. Этот контекст предоставит тему для всех компонентов вашего приложения.

themeContext.js

import React, { createContext, useState } from 'react';
import { lightTheme, darkTheme } from './theme';
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);
  const theme = isDarkMode ? darkTheme : lightTheme;
  return (
    <ThemeContext.Provider value={{ theme, isDarkMode, setIsDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

3. Используйте контекст в своих компонентах: оберните свой компонент верхнего уровня в компонент ThemeProvider. Это сделает тему доступной для всех дочерних компонентов.

App.js

import { ThemeProvider } from './themeContext';
const App = () => {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
};

4. Переключение темы. Создайте кнопку или переключатель в своем приложении для переключения темы. Вы можете использовать функцию setIsDarkMode из ThemeContext для переключения темы.

import { useContext } from 'react';
import { ThemeContext } from './themeContext';
const ToggleButton = () => {
  const { isDarkMode, setIsDarkMode } = useContext(ThemeContext);
  const handleToggle = () => {
    setIsDarkMode(!isDarkMode);
  };
  return (
    <Button onPress={handleToggle}>
      {isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </Button>
  );
};

5. Используйте тему в своих компонентах: вы можете использовать объект theme из ThemeContext, чтобы стилизовать ваши компоненты на основе текущей темы.

import { useContext } from 'react';
import { ThemeContext } from './themeContext';
const MyComponent = () => {
  const { theme } = useContext(ThemeContext);
  return (
    <View style={{ backgroundColor: theme.backgroundColor }}>
      <Text style={{ color: theme.textColor }}>Hello, World!</Text>
    </View>
  );
};

Вот и все! Вы завершили реализацию темного режима.