Недавно мы выпустили обновление с темной темой. Давайте поговорим о том как темизация устроена технически.

Идейно существует два подхода.
1. Немасштабируемый и быстрый
2. Масштабируемый и долгий

Поговорим о них в деталях:

Первый подразумевает, что взяв начальный интерфейс, мы делаем несколько экранов с референсами темной темы. Затем создаем вокруг этого новый ui kit и начинаем компоненты (кнопки, текст, разделители и прочее) менять вручную на новую палитру. Несмотря на то, что это звучит объемно, занимает это 1-2 дня у джуниор/мидл фронт-енд разработчика. Но правда приводит к множеству багов и совершенно не имеет возможности масштабирования. Происходит так, потому что при добавлении новой палитры придется вручную опять прописывать цвета для каждого элемента.

Решают все проблемы первого подхода дизайн токены. Простым языком, токен это цвет конкретного элемента в конкретном месте и конкретной теме. Например, токен для главного текста в светлой теме будет называться light-text--primary. Внутри токена лежит цвет. Применив это на все элементы (text, icons, controls, borders, etc.) мы получим таблицу. Где заголовок строки это название токена, а заголовок столбца это тема. В ячейках этой таблицы будут лежать HEX коды цветов.

Что же это нам даёт? Назначив токены на все компоненты в светлой теме, нам достаточно менять значение темы в названии токена, для того чтобы начать брать новые значения из таблицы. Как следствие, потратив 1-3 дня на назначение всех токенов, или используя их с самого старта, можно добавлять новые темы буквально за 15 минут.

Происходит это следующим образом:
1. Создается новый столбец и в каждой строке напротив кейса использования добавляется новый цвет
2. Новая таблица выгружается как json файл сразу на гитхаб
3. Разработчик добавляет новое поле для новой темы и буквально в пару кликов перекрашивает все приложение.

Если все сделано правильно, то даже не понадобится перепроверять, все цвета сразу будут на своих местах.

Дизайн токены стали популярными не так давно. Ярким примером использования является Material Design от Google. Документацию можно почитать тут: https://m3.material.io/foundations/design-tokens/overview