Как сделать тёмную тему в макете

Как устроена тёмная тема в макете

В Morfa, как и в Figma, тема — это режим переменных. Коллекция «Тема» хранит цвета по ролям: фон, текст, акцент, граница. У коллекции два режима, «Светлая» и «Тёмная», и у каждой переменной в каждом режиме своё значение.

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

Шаг 1. Коллекция «Тема» с режимами «Светлая» и «Тёмная»

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

1. 1

   Откройте окно «Переменные»

   Щёлкните по пустому месту холста, чтобы снять выделение. Во вкладке «Дизайн» в разделе «Переменные» нажмите «Открыть переменные». Та же кнопка есть во вкладке «Ассеты» (⌥2).

2. 2

   Создайте коллекцию

   Нажмите «+» рядом со словом «Коллекции» («Создать коллекцию»). Появится «Коллекция 1» с полем для названия: сразу введите «Тема».

3. 3

   Переименуйте первый режим

   В новой коллекции уже есть режим «Режим 1». Дважды щёлкните по его названию в шапке таблицы и введите «Светлая». Переименовать режим можно и через правый клик → «Переименовать».

4. 4

   Добавьте режим «Тёмная»

   Нажмите «+» справа от колонок режимов («Добавить режим») и введите «Тёмная». Если переменные уже созданы, новый режим получит копию их светлых значений, и останется поменять только те, что отличаются.

Шаг 2. Цветовые переменные по ролям

Переменные называют по роли, а не по цвету. «Текст основной» одинаково понятен в обеих темах, а переменная «Чёрный», которая в тёмной теме стала светлой, только запутает.

1. 1

   Создайте переменную типа «Цвет»

   Внизу таблицы нажмите «Создать переменную» и выберите «Цвет». Сразу введите название, например «Фон».

2. 2

   Задайте значение в каждом режиме

   В колонке «Светлая» введите HEX светлой темы, в колонке «Тёмная» — тёмной. Повторите для текста, поверхности, границы и акцента.

3. 3

   Сгруппируйте через косую черту

   Названия вида «Текст/Основной» и «Текст/Второстепенный» собираются в группу «Текст». В большой коллекции так проще найти нужный цвет.

4. 4

   Свяжите производные цвета

   Если фон кнопки всегда равен акценту, создайте переменную «Кнопка/Фон», нажмите в её ячейке значок ссылки («Сослаться на переменную») и выберите «Акцент». Сделайте это в колонках обоих режимов: тогда правка акцента обновит кнопку в обеих темах.

Шаг 3. Как привязать цвета слоёв к переменным

Режим меняет только привязанные цвета. Цвет, введённый вручную в HEX, RGB или HSL, при смене режима останется прежним.

1. 1

   Выделите слой

   Начните с фона фрейма, затем карточки, тексты и иконки.

2. 2

   Откройте цвет заливки

   Во вкладке «Дизайн» в разделе «Заливка» нажмите на образец цвета.

3. 3

   Выберите переменную

   В окне цвета перейдите на вкладку «Библиотеки». Под стилями цвета есть список «Переменные»: выберите, например, «Фон». Вместо HEX в окне появится название переменной и кнопка «Отвязать».

4. 4

   Повторите для текста и обводок

   Цвет текста — это его заливка, цвет рамки — раздел «Обводка». Привяжите все цвета, которые должны меняться вместе с темой.

Шаг 4. Как переключить фрейм на тёмную тему

Режим выбирается на фрейме или секции, а слои внутри его наследуют. Поэтому в одном файле светлый и тёмный экраны могут стоять рядом.

1. 1

   Выделите фрейм экрана

   Выберите сам фрейм, а не слой внутри него. Можно выделить секцию: вложенные экраны получат её режим.

2. 2

   Найдите раздел «Переменные»

   Во вкладке «Дизайн» у фрейма появится раздел «Переменные» со строкой «Тема». Раздел показывается, когда в файле есть коллекция хотя бы с двумя режимами.

3. 3

   Выберите «Тёмная»

   Привязанные слои внутри фрейма сразу возьмут тёмные значения. Пункт «Авто» означает «как у родителя»: в скобках видно, какой режим фрейм получит сейчас.

Что получит код: CSS-переменные и data-theme

Переменные становятся CSS-переменными в файле src/tokens.css, а режим — атрибутом. Значения основного режима стоят в :root, тёмные — в блоке с атрибутом data-theme. Фрейм, у которого выбран режим «Тёмная», получает в разметке атрибут data-theme="dark".

Генератор переводит частые слова интерфейса на английский: «Фон» становится --color-background, «Текст основной» — --color-text-primary, режимы «Светлая» и «Тёмная» — light и dark. Остальные слова транслитерируются. Проверить токены до выгрузки можно в режиме «Код» (⇧D), в разделе «Стили и переменные». Как устроен весь проект, описано на странице про дизайн в код.

:root {
  --color-background: #FFFFFF; /* Фон */
  --color-text-primary: #121212; /* Текст основной */
  --color-accent: #2F6BFF; /* Акцент */
}

[data-theme='dark'] {
  --color-background: #121212;
  --color-text-primary: #F2F2F2;
  --color-accent: #6B95FF;
}

Если в файле несколько коллекций с режимами, data-theme получает первая, а у остальных атрибут по названию коллекции. Весь проект выгружается через «Файл» → «Экспорт в React…»: токены лежат в src/tokens.css и src/tokens.ts, для Tailwind ещё в src/theme.css.

Как включить тёмную тему самого редактора

Тема интерфейса редактора — отдельная настройка, к макету она не относится. Откройте главное меню (кнопка в левом верхнем углу редактора) → «Тема» и выберите «Как в системе», «Светлая» или «Тёмная». В файловом менеджере та же настройка открывается кнопкой «Тема» с солнцем или луной.

«Как в системе» повторяет оформление вашего устройства и переключается вместе с ним. Выбор запоминается в этом браузере. Цвета фреймов и слоёв от него не меняются.

Частые ошибки

Почти все проблемы с тёмной темой — в том, как собраны переменные и где выбран режим.