Светлая и тёмная тема из одних токенов
Поверхности, текст, кнопки и ссылки читают CSS-переменные. Переключатель темы меняет один атрибут на корне. Локальных цветов в компонентах нет.
Палитра сайта это чёрный, белый, тан кнопки #A5916E и голубой ссылок #59B8F2. Эти значения живут в токенах, не в файлах компонентов. Тёмная тема переопределяет те же имена. Кнопка с захардкоженным оттенком уехала от остального UI и пропала в тёмной теме. После чистки это правка одного токена.
Шрифт Open Sans. Интерактив ещё двигается на hover, focus и нажатие. Motion короткий и сидит на --motion-fast. Reduced motion оставляет смену цвета и убирает трансформ.
Что делает переключатель
Тоггл пишет data-theme на корень. Все поверхности, границы и текст идут за ним. Компонент, которому всё ещё нужна media query, это баг в карте токенов. Это проверка, когда новый экран кривой в одной теме.
Ушло около двадцати захардкоженных значений. Две кнопки отличались на один оттенок. Граница брала цвет, которого не было в тёмной теме. Оба случая это токены, не вёрстка.
Чего нет
Градиентов на хроме нет. Свечения нет. Лишних шрифтов нет. Обложки новостей это фото и в плитке уходят в grayscale. Схемы в статьях инвертируются в тёмной теме, потому что это чёрный штрих на прозрачном поле.
Новый UI читает токены. Цвета, которого нет в карте, в релиз не едет.