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

Каждая версия — это заливка: сплошной цвет, градиент, изображение или видео. Одна заливка может объединять несколько элементов: полупрозрачный цветовой слой может окрашивать изображение под ним. Если разницы между двумя темами нет, обе версии могут быть одинаковыми.

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

Добавление тёмной темы

По умолчанию новый флоу использует светлую тему. Чтобы добавить тёмную:

1. Откройте панель Styles и перейдите на вкладку Colors.
2. Нажмите на иконку , чтобы открыть меню управления темами.
3. Выберите Add dark theme. Тёмный вариант будет добавлен к каждому цветовому стилю — с двумя одинаковыми значениями. Теперь вы можете настроить тёмную тему.

Настройка тёмной темы

После добавления тёмной темы у каждого элемента в списке Color Style появляются два параметра: Light и Dark.

Чтобы изменить стиль:

1. Откройте панель Styles
2. Выберите вкладку Colors.
3. Нажмите на запись стиля. Если нужного стиля ещё нет, создайте новый.
4. Значения Light и Dark отображаются одно за другим. Каждое значение может содержать несколько слоёв. Нажмите на образец цвета, чтобы настроить слой в соответствии с типом заливки:
   • Сплошной цвет
   • Градиент
   • Изображение или видео
5. Нажмите Save.

Значения Light и Dark могут использовать разные типы заливки.

Смешивание типов заливки

Вы можете комбинировать типы заливки между двумя версиями стиля:

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

Применение темы к элементу

Если свойство элемента не использует цветовой стиль, тёмная тема к нему не применяется. Элементы Image и Video не поддерживают цветовые стили: чтобы изменить их файл в тёмном режиме, добавьте тёмный файл.

Чтобы элемент следовал теме, нажмите на образец цвета его слоя заливки, цвета текста, цвета рамки или цвета иконки. Замените статическое значение на стиль: откройте вкладку Styles и выберите нужный стиль. Если нужного стиля нет, сохраните текущее значение как стиль.

Фон экрана подчиняется теме таким же образом: примените стиль к его слою заливки в разделе Screen settings. Подробнее см. в статье Показать другой фон в тёмном режиме.

Чтобы применить стиль сразу к множеству элементов на экране, воспользуйтесь AI Editor, например: Apply the Card background style to all cards.

Предпросмотр флоу в тёмном режиме

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

Значки появляются только если у флоу есть тёмная тема, либо элемент «Изображение» или «Видео» с тёмным файлом.

Показать другое изображение или видео в тёмном режиме

Элемент Image или Video отображает файл в обоих режимах, пока вы не добавите отдельный файл для тёмного режима. Чтобы показывать другой файл в тёмном режиме:

1. Выберите элемент Image или Video.
2. В разделе Image или Video панели свойств выберите вкладку Dark. Холст переключится в режим предварительного просмотра тёмной темы.
3. Загрузите файл для тёмного режима.

Чтобы снова перейти к редактированию файла в светлом режиме, выберите вкладку Light.

Настройте тему строки состояния

Значки времени и заряда батареи в строке состояния могут плохо смотреться на фоне вашего флоу в одном из режимов. Чтобы значки оставались читаемыми, задайте Status bar theme в Screen settings при включённом переключателе Status bar:

• : Белые иконки — для фона, который тёмный в обоих режимах.
• : Чёрные иконки — для фона, который светлый в обоих режимах.
• : Иконки, следующие настройкам устройства — для фона, который светлый в одном режиме и тёмный в другом.

Удаление темы

1. Откройте панель Styles и выберите вкладку Colors.
2. Нажмите на иконку настроек , чтобы открыть меню управления темами.
3. Выберите пункт меню:
   • Delete Dark theme: сохраняет светлую версию каждого цветового стиля для обоих режимов.
   • Delete Light theme: сохраняет тёмную версию каждого цветового стиля для обоих режимов.