Система тем приложения

Руководство по реализации переключения тем (light/dark) с использованием React Context, HOC и localStorage.

Архитектура управления темой

Преимущество: Изоляция логики темы от бизнес-компонентов. Автоматическое сохранение выбора пользователя и отсутствие 'мигания' при загрузке.

Структура файлов Темизации

Расположение и Соглашения

Провайдер:
Находится в src/app/providers/theme/. Отвечает за глобальную инициализацию.
Shared Logic:
Контекст, хуки и UI-компонент выносятся в shared/, так как они переиспользуемы.

01Типы и Интерфейсы

Определяем допустимые значения темы (light, dark) и структуру контекста для управления состоянием.

shared/ui/layout/theme-toggle/model/theme.types.ts

export type TTheme = "light" | "dark";

export interface IThemeContextType {
    theme: TTheme;
    toggleTheme: () => void;
}

02React Context

Создаем канал передачи данных темы через дерево компонентов без использования пропсов.

shared/ui/layout/theme-toggle/model/theme.context.ts

import { createContext } from "react";
import { IThemeContextType } from "./theme.types";

export const ThemeContext = createContext<IThemeContextType | undefined>(undefined);

03Кастомный Хук

Инкапсулируем логику доступа к контексту в удобном хуке useTheme с проверкой на наличие провайдера.

shared/ui/layout/theme-toggle/model/useTheme.tsx

import { useContext } from "react";
import { ThemeContext } from "../context/theme.context";

export const useTheme = () => {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error("useTheme must be used within a ThemeProvider");
    }
    return context;
};

04Theme Provider

Реализуем компонент-провайдер, который управляет стейтом, работает с localStorage и манипулирует классами на html.

app/providers/theme/theme.provider.tsx

import React, { useCallback, useEffect, useMemo, useState } from "react";
import { type TTheme, ThemeContext } from "@/shared/ui/layout/theme-toggle/model";

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [theme, setTheme] = useState<TTheme>("light");
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        const saved = localStorage.getItem("theme") as TTheme;
        if (saved) setTheme(saved);
        setMounted(true);
    }, []);

    const toggleTheme = useCallback(() => {
        setTheme((prev) => {
            const next = prev === "light" ? "dark" : "light";
            localStorage.setItem("theme", next);
            return next;
        });
    }, []);

    useEffect(() => {
        if (!mounted) return;
        document.documentElement.classList.remove("light", "dark");
        document.documentElement.classList.add(theme);
    }, [theme, mounted]);

    const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

    return (
        <ThemeContext.Provider value={value}>
            {children}
        </ThemeContext.Provider>
    );
};

05HOC для инициализации

Создаем withTheme Higher-Order Component для удобного оборачивания приложения на уровне провайдеров.

app/providers/theme/with-theme.tsx

import React from "react";
import { ThemeProvider } from "./theme.provider";

export const withTheme = <P extends object>(Component: React.ComponentType<P>) => {
    return (props: P) => (
        <ThemeProvider>
            <Component {...props} />
        </ThemeProvider>
    );
};

06UI Компонент (Toggle)

Создаем кнопку-переключатель, которая использует хук useTheme для смены визуального стейта.

shared/ui/layout/theme-toggle/ui/theme-toggle.tsx

import { Moon, Sun } from "lucide-react";
import { Button } from "@/shared/ui";
import { useTheme } from "../model";

export const ThemeToggle = () => {
    const { theme, toggleTheme } = useTheme();

    return (
        <Button onClick={toggleTheme} variant="outline" size="sm">
            {theme === "light" ? <Moon size={16} /> : <Sun size={16} />}
        </Button>
    );
};