React Context для состояния темы

Начните с вызова createContext() со значением по умолчанию, соответствующим форме вашего контекста: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Значение по умолчанию используется только в том случае, если компонент читает контекст без родительского Provider, что удобно для тестирования изолированных компонентов.

Компонент ThemeProvider — это оболочка, содержащая всю логику темы. При монтировании он считывает системные настройки, управляет состоянием theme, предоставляет функцию toggleTheme и оборачивает дочерние компоненты в ThemeContext.Provider value={{ theme, toggleTheme }}. Разместите его ближе к вершине дерева компонентов.

Любой дочерний компонент может получить тему, вызвав useContext(ThemeContext). Этот вызов возвращает текущее значение контекста, включая theme и toggleTheme. При изменении темы компонент автоматически повторно отображается, поэтому значение всегда остаётся синхронизированным без передачи свойств через всю иерархию.

Переменные CSS зависят от атрибута data-theme у корневого элемента. В ThemeProvider добавьте useEffect, который выполняется при каждом изменении theme: document.documentElement.setAttribute('data-theme', theme). Это обеспечивает плавную связь между состоянием React и слоем CSS.

Чтобы сохранять выбор пользователя после перезагрузки страницы, записывайте его в localStorage при каждом изменении темы: localStorage.setItem('theme', theme). Эту логику можно инкапсулировать в пользовательском хуке useLocalStorage, который возвращает пару, аналогичную состоянию, и автоматически сохраняет каждое обновление.

При инициализации состояния темы сначала прочитайте значение из localStorage: localStorage.getItem('theme'). Если сохранённого значения нет, используйте системные настройки через window.matchMedia('(prefers-color-scheme: dark)').matches как запасной вариант. Эта инициализация выполняется только один раз при монтировании.

Правильный порядок приоритетов от высшего к низшему таков: сохранённое предпочтение пользователя в localStorage, затем системные настройки ОС и наконец жёстко заданное значение по умолчанию, обычно светлая тема. Такой порядок позволяет пользователю сохранять полный контроль и одновременно учитывать настройки ОС, если пользователь явно не выбрал тему в приложении.

Прямой вызов useContext(ThemeContext) в каждом компоненте раскрывает детали реализации. Вместо этого экспортируйте хук useTheme: function useTheme() { return useContext(ThemeContext); }. Теперь компоненты импортируют useTheme и вызывают его, не зная о внутреннем контексте.

Функция toggleTheme переключает тему между light и dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Предоставьте её через контекст, чтобы любая кнопка в дереве компонентов могла вызвать переключение. Состояние хранится в одном месте, а логика переключения используется повсюду.

Объект значения контекста создаётся заново при каждом отображении ThemeProvider. Оберните его в useMemo, чтобы предотвратить ненужные повторные отображения всех потребителей контекста: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Это распространённая оптимизация производительности для поставщиков контекста.

В тестах оборачивайте отображаемые компоненты в пользовательскую утилиту renderWithTheme, которая использует ThemeProvider в качестве оболочки. Для изолированного тестирования также можно создать простой имитационный контекст: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Это позволяет тестировать компоненты в состоянии с определённой темой.

Каков правильный порядок приоритетов при инициализации темы приложения — от высшего к низшему?

Создайте ThemeContext и ThemeProvider, который управляет состоянием темы, синхронизирует его с localStorage и устанавливает data-theme в документе. Для удобного использования применяйте хук useTheme. Порядок приоритетов таков: сохранённое предпочтение, затем системные настройки и наконец значение по умолчанию.