Комментарии 3
Вариант лучше, без дополнительных классов/data-theme/отдельных параметров --color-dark/--color-light, за которыми еще и нужно следить для избежания коллизий имен - это CSS variables записывать напрямую в <html style="--color-primary=#ccc"> . При смене темы соответственно менять их значения там же. И только для исключительных случаев (разная логика в разных темах) пригодится глобальный идентификатор в виде класса или data-theme. Таким образом значительно уменьшится количество кода и не нужно в стилях прописывать дополнительные служебные переменные
Вставлю свои 5 копеек, т.к. большинство гайдов в сети как под копирку и нигде не встречал до банального простой вещи. Тёмное и светлое оформление это не "theme", а "theme mode".
Это стоит учитывать при проектировании системы, если планируете потом переиспользовать компоненты UI. Такой подход даст возможность разделить логику цветовой палитры и её использования в светлом/тёмном режиме.
Конкретно в вашем примере - малиновая тема оформления по случаю дня рождения компании должна быть доступна и для светлого и для тёмного режима, режим нужно тягать из системных настроек через window.matchMedia и создавать 2 контекста, либо расширять текущий, чтобы были и data-theme и data-theme-mode. Вот тогда будет "по феншую")))
Мне кажется вопрос того, что тёмный/светлый режим, выставленный на пользовательской машине, синхронизирован или не синхронизирован с темизацией конкретного сайта - это вопрос продуктовой экспертизы.
Если говорить про реализацию такого синка, то кажется достаточно usEffect подправить и ходить не в localsorage за типом включённой темы, а в настройки.
Хотя лично мне субъективно кажется, что пользователи любят держать контроль в своих руках постоянно и если предоставить им явный контрол (зависящий только от их действий) то им будет удобнее/лучше)
Про терминологию - theme это как раз отражает выбранный набор цветов, реализующих определённую палитру для всех элементов сайта. Если вводится синк с системным режимом, то компоновка может быть какой угодно - не только "малиновая в двух вариантах для тёмного/светлого режима", но и "малиновая тема для светлого режима, и зелёная тема для тёмного режима". Комбинации могут быть любыми. Theme это более атомарный термин, нежели theme-mode.
Публикации
Переключение цветовых тем в React приложении