Набирают популярность светлый и темный режимы, и все больше приложений предлагают переключение этих тем. Это переключение тем выглядит круто, но сложно реализовать и исправить. Существует множество библиотек (Emotion.js), которые позволяют сделать это с легкостью, задав ThemeProvider, который является не чем иным, как компонентом React, который предоставляет контекст темы. Эти библиотеки используют CSS-in-JS, что является прекрасным способом написания CSS с помощью javascript.
Я использую CSS-in-JS для большинства своих проектов, и мне это нравится, но со временем CSS улучшился, браузеры стали более зрелыми, а поддержка CSS стала лучше, чем раньше. Стоимость реализации переключения тем с помощью библиотек CSS-in-JS значительно выше, чем при использовании стандартной переменной CSS браузера.
Возьмем, к примеру, переключение тем CSS-in-JS.
В этом вся прелесть CSS-in-js - это просто javascript. Опыт разработчиков с таким API просто потрясающий. Однако пользовательский интерфейс сильно страдает, когда на странице много компонентов, поэтому переключение темы занимает некоторое время, иногда с заметной задержкой. Это приводит к ухудшению пользовательского опыта, что плохо сказывается на нашем бренде и бизнесе. Вот codeandbox для примера CSS-in-JS.
Теперь давайте сделаем это с помощью переменных CSS.
Здесь опыт разработчика может пострадать из-за потери статической типизации объекта theme, но взаимодействие с пользователем значительно лучше. Кроме того, разработчику не нужно изучать API styled.button(({theme}) => ({ ...styles })), в котором мы создаем функцию, принимающую theme и возвращающую стили. Вот ссылка на codeandbox.
Матрица профилировщика React⚛️
CSS-in-JS способ переключения тем
CSS-переменные переключения тем
Глядя на два приведенных выше снимка экрана, становится ясно, что использование переменной CSS лучше, чем использование способа CSS-in-JS. Лучшего опыта разработчика можно достичь с помощью гибрида двух. Следующее дает вам возможность использовать статический тип объекта theme как theme.colors.primary.
Заключение
CSS-in-JS - это круто, но за него приходится вставлять стили при каждом рендеринге, а переключение тем с использованием ThemeContext неэффективно, особенно если на экране большое количество компонентов. Переключение тем с переменными CSS очень производительно. Давайте использовать больше переменных CSS для разработки потрясающих тем веб-приложений.
