Данный гайд описывает один из возможных подходов к организации фичи темизации приложения. Глобально статья поделена на 2 части: База Здесь мы опишем логику работы с темами, которая построена на чистом css (ну почти). Но этот механизм не имеет никаких "завязок" на js фреймворк/библиотеку. React В этой части мы посмотрим, как именно в контексте react приложения мы сможем эффеективно применять наши темы. Предет тем, как приступим к решение задачи темизации нашего react приложения сформулируем возможности, которые должна обладать наша будущая система. Мы не должны быть ограничены только одной цветовой темой. И нам не должно быть мучительно больно, если наши старшие братья по интерфейсам (дизайнеры) вдруг запилят к стандартным "светлой" и "тёмной" темам ещё и "малиновую, по случаю дня рождения компании". Это в общем то и есть основная цель - мы должны уметь легко применять цвета выбранной темы на наши элементы в css. Части наших элементов, может понадобится изменять своё отображение не только на основе css но и на основе свойств, которые мы пробрасываем внутрь компонентов. Например, так работают большинство библиотек элементов (закрыты к изменению, но имеют api для управления). Следовательно где-то в коде уже наших компонентов мы должны иметь возможность получить значение текущей темы и работать с ним. В любой момент развития нашего проекта/продукта может изменится дизайн концепция и/или могут тестироваться различные гипотезы, которые могут привести к изменению нашего ui. Компоненты могут меняться местами, элементы управления уезжать "вглубь" или в порталы/модальные окна и т.д. Для того, чтобы в реализации учесть эти возможные изменения мы должны зафиксировать требование - метод для смены темы  должен быть внутри наших компонентов. При этом мы заранее не можем знать, на какой "глубине/уровне вложенности" этот элемент управления темой может появится. Кажется теперь, когда мы понимаем все требования к нашей системе, можно переходить к проектированию решения. P.S.: В рамках нашего скоупа обсуждения, мы не будем затрагивать вопросы всей дизайн системы, а сосредоточимся только на цветовых темах. Примем решение о том, за счёт чего мы будем переключать цветовую тему Определим где и как будем описывать связки цветов. Так же опишем механизм их применения в css Сделаем тему доступной внутри react компонентов и определим, как именно мы дадим нашим компонентам возможность тригерить смену цветовой темы Решение: data-theme атрибут для установки темы Подробнее: Переключать тему мы будем очень просто - изменяя содержимое data-theme атрибута на рутовом элементе (html). Значением theme будет строка, являющаяся названием темы: dark | light; Это максимально простое решение, которое требует минимум действий и так же позволяет нам опираться на каскад css для применения стилей конкретной темы на любом элементе нашей страницы. Решение: триады для описание цвета  слектор по аттрибуту и custom properties для применения в css. Подробнее: Цвета для каждой темы будем описывать триадами (сетами по 3 цифры, которые кодируют цвет). Это удобно для того, чтобы иметь возможность применять прозрачность (устанавливать значение альфа канала) для цветов. А для применения этих триад будем использовать custom properties. Они широко распространены и используются в том же CRA из коробки. Т.е. одну и ту же переменную --some-color: 255, 255, 255 мы сможем использовать в двух вариантах: rgb и rgba При этом нам надо иметь универсальный способ "доставки" значения цвета конкретной темы в тот кусочек css, который мы хотим стилизовать. Для этого будем использовать селектор по аттрибуту, который мы установили в предыдущем пункте, и внутри будем описывать уже переменные: Итого, общая связка "объявить тему и сделать её доступной в css" будет выглядеть следующим образом: А непосредственное применение значений этих перменных в css делается в 2 шага: Один раз импортируем файл с токенами в рутовый компонент своего приложения: Используем синтаксис custom properties для стилизации цветов: Таким образом реализованы базовые требования к нашей системе: Возможность изменить стилизацию приложения (css) - просто используем наши custom properties Возможность расширения - мы можем создать неограниченное большое количество цветовых тем. Вот и всё, теперь мы имеем рабочий css механизм переключения цветовой темы. Это база, которая по сути не привязана ни к какому фреймворку/библиотеке и прочим вещам. Только css и его сборка. Решение: localStorage для сохранения значения темы createContext react контекст, для получения доступа к теме и её изменению на любом уровне вложенности useTheme кастомный хук, для упрощения доступа к контексту Подробнее: Тему надо бы уметь сохранять/получать между перезагрузкой страниц. Теперь объявим доступные темы и сам контекст: PS: Подробнее про keyof typeof После этого мы должны создать сам компонент, который и будет "прокидывать" контекст вниз для всех своих children И не забудем написать кусочек кода, который сохраняет нам значение в нашем хранилище (localStorage) Вроде бы всё работает, осталось собрать всё воедино. Однако перед этим давайте попробуем упростить себе жизнь в будущем и сделаем стандартный контрол, который будет изменять значение темы. Назовём его SimpleToggler. И для того, чтобы не "размазывать" логику по разным файлам мы применим подход Compound components. Нам нужно обернуть в наш провайдер главный компонент приложения: А в самих компонентах можем уже использовать то, что нам больше нравится и/или нужно: Использовать готовый компонент simpleToggler Или использовать хук useTheme: Получили в итоге гибкую систему, которая отвечает всем изначально поставленным требованиям: Имеем возможность расширения  описываем токены, собираем из них тему, используем Имеем возможность изменять тему (css/js)  css переменные делают цвета темы доступной; кастомный хук позволяет настраивать внешние компоненты по нашим потребностям Имеем возможность настраивать тему откуда угодно  используем контекст для этого Переключение темы  data-theme аттрибут для установки темы Связки цветов  триады для описание цвета  слектор по аттрибуту и custom properties для применения в css. Применение и изменение темы в react приложения.  localStorage для сохранения значения темы createContext react контекст, для получения доступа к теме и её изменению на любом уровне вложенности useTheme кастомный хук, для упрощения доступа к контексту Спасибо за чтение и удачи в темизации ваших приложений) PS: Ссылки из статьи: custom properties Compund components Senior frontend engineer