→ Как быстро завезти тёмную тему

Продукт не должен проседать на фоне конкурентов, даже несмотря на наследие и ограниченные ресурсы.

Сейчас я расскажу, как моя команда, имея слабую компонентную базу, умудрилась завести и завезти тёмную тему для айос и андроид.

Задача стояла нехитрая: сделать тёмную тему для приложений на обеих платформах.

При этом в «дано» у нас было:

• библиотека цветов в Фигме;
• библиотека цветов на платформах (с кучей цветов наследия);
• только базовые компоненты в Фигме и ещё меньше — в коде;
• иконочный сет и сет иллюстраций.

Да, мы знали, как правильно, но на это у нас не было ни времени, ни рук.

Далее по шагам опишу наш путь.

Заскринили экраны приложений для обеих платформ (iOS, Android), сравнили с макетами.

Наши цвета — это стандартный набор основных цветов и их оттенки в светлую и тёмную стороны: фоновый белый, триггерный синий, чёрный и серый для шрифтов и частные случаи использования оттенков применяемых в дизайне.

Думали сделать уникальные цвета с идентичным контрастом для обеих тем. Но решили не упарываться и для светлой темы почти ничего в цветах не меняли, а для тёмной реверсировали глубину цвета. Так мы получили 2 набора динамичных (переключающихся) цветов.

Контрасты цветов мы замерили по шкале доступности контента применяемой к контрасту. Получили в большинстве случаев близкие показатели.

Ранее мы именовали цвета исходя из глубины цвета. Теперь мы взяли за основу контраст в светлой и тёмной темах. Цвета именуются одинаково, содержат префикс оттенка и число контраста. То есть, светлый синий на светлой теме и тёмный синий на тёмной имеют одинаковый b_100. Чем контрастнее, тем больше число.

Скорее не отрисовка, а назначение тёмной цветовой схемы светлой.

Как я выше писал, у нас есть частные случаи, которые нельзя переключить в рамках заложенной логики. Потому мы добавили небольшие сеты уникальных цветов, которые переключаются уникальным образом.

Также нам понадобился набор статичных (непереключающихся) цветовых оттенков.

Мы должны проверять свой дизайн, а делать для этого макеты в 2-х темах совершенно не наш подход. Запустили плагин Appearance для Фигмы, настроили, протестили.

Выгружаем наши цвета в нужном разработчикам формате и/или добавляем их в песочницу сами. Просим разработчиков выгрузить библиотеку цветов из кода. Рефакторим цвета, присваивая цветам наследия новые цвета.

Просим сборку у разрабов на новых цветах и наслаждаемся результатом переключения цветов. Конечно же, было ещё немало работы по вычищению ошибок по цветам. Но не долго.

Таким подходом, технически, мы завезли тёмную тему буквально за пару недель. Да, на изучение различных подходов, перебор массы дизайн-систем, перекраску цветов (раз 8) ушло месяца 3, но глядя на результат, мы с командой понимаем, что всё было не зря.

Тонкостей по пути было много. Если будут вопросы, я с радостью отвечу на них в Телеграме — @Kilunin.

Рад, если было полезно!