Переключатель темы

В этом решении мы создаём переключатель между светлой и тёмной темой с динамическим изменением стилей и контента.

Состояние темы

const [theme, setTheme] = useState('light');

Мы создаём состояние theme со строковым значением. Оно хранит текущую тему - 'light' или 'dark'. Начальное значение 'light' означает, что при загрузке приложения будет светлая тема.

Переключение темы

const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
}

Функция toggleTheme использует тернарный оператор для переключения между двумя значениями. Если текущая тема 'light', устанавливаем 'dark', и наоборот. Это классический паттерн для переключения между двумя состояниями.

Динамические классы для стилизации

<div className={`theme-container ${theme}`}>

Мы добавляем значение theme как класс к контейнеру. Если theme равно 'dark', элемент получит классы theme-container dark. CSS может использовать эти классы для применения разных стилей. Например, .theme-container.dark будет иметь тёмный фон, а .theme-container.light - светлый.

Условное отображение контента

{theme === 'dark' ? '🌙' : '☀️'}

В нескольких местах мы проверяем текущую тему и показываем соответствующие эмодзи или текст. Луна для тёмной темы, солнце для светлой. Это визуально подсказывает пользователю, какая тема активна.

Применение темы к вложенным элементам

<div className={`demo-content ${theme}`}>

Тема применяется не только к главному контейнеру, но и к вложенным элементам. Это позволяет стилизовать разные части интерфейса в зависимости от темы. Каждый элемент с классом темы может иметь свои уникальные стили для светлого и тёмного режима.

Контекстные сообщения

{theme === 'dark' 
    ? '🌙 Тёмная тема помогает глазам в ночное время' 
    : '☀️ Светлая тема отлично подходит для дневного использования'
}

Мы показываем разные сообщения в зависимости от активной темы. Это делает интерфейс более интерактивным и информативным - пользователь видит не просто переключение цветов, но и получает пояснение о преимуществах текущей темы.