Как добавить темную тему в приложение на FireMonkey
Темная тема в приложении на FireMonkey делает интерфейс комфортнее при слабом освещении, снижает визуальную нагрузку и помогает выдержать единый стиль на разных устройствах. Для проектов под Windows, macOS, Linux, Android и iOS важно учитывать не только цвет фона, но и поведение стандартных компонентов, изображения, системные настройки и пользовательские предпочтения.
В FireMonkey оформление строится вокруг стилей. Они определяют цвета, размеры, шрифты, состояния кнопок, вид полей ввода, списков и других визуальных элементов. Поэтому переход к темному режиму обычно выполняют не через ручную установку цвета каждому контролу, а через замену или настройку набора стилей.
Практический вариант зависит от архитектуры приложения. Можно подключить готовый темный стиль, создать собственный стиль в StyleBook или организовать два набора ресурсов — светлый и темный. Первый способ подходит для быстрого результата, второй дает больше контроля над фирменным дизайном, а третий удобен для полноценного переключения во время работы программы.
При разработке стоит заранее определить палитру, контраст текста, правила для изображений и поведение темы при перезапуске. Хорошая темная тема — это не черный фон со случайно осветленными надписями, а согласованная система цветов, состояний и акцентов.
Подготовка Проекта И Стилей
Начните с проверки структуры формы. В проекте FireMonkey обычно используется объект TStyleBook, подключенный к форме или к отдельному контейнеру. Именно через него компоненты получают визуальные шаблоны. Если стиль не назначен явно, приложение применяет стандартное оформление платформы или встроенный набор, что затрудняет предсказуемое переключение.
Для небольшого проекта удобно добавить TStyleBook на главную форму и загрузить в него стиль через редактор ресурсов. В Delphi это делается в дизайнере: компонент добавляется из палитры, после чего открывается редактор стилей и импортируется файл оформления. Файл можно хранить вместе с исходным кодом, чтобы тема попадала в систему контроля версий и собиралась одинаково на всех рабочих станциях.
Перед настройкой цветов полезно составить список используемых компонентов. В него входят кнопки, поля ввода, панели, вкладки, списки, диалоги, индикаторы загрузки и элементы навигации. Отдельно проверьте нестандартные контролы: они могут не иметь подходящих ресурсов в готовой теме и потребуют ручной настройки.
Выбор Палитры И Контрастов
Основной фон темного интерфейса лучше выбирать не абсолютно черным, а темно-серым. Например, оттенки #121212, #181818 или #202124 визуально мягче и позволяют различать границы панелей. Поверхности второго уровня можно сделать немного светлее, а для карточек, меню и всплывающих областей использовать отдельный оттенок.
Текст разделяется на несколько уровней контрастности. Основной текст должен хорошо читаться, вторичный — быть заметным, но менее ярким, а подсказки и отключенные элементы — сохранять различимость. Белый цвет #FFFFFF подходит для отдельных акцентов, однако для больших объемов текста часто лучше использовать светло-серый, например #E6E6E6.
Цвет действия должен сохраняться узнаваемым в обеих темах. При этом один и тот же синий, зеленый или оранжевый оттенок может выглядеть слишком ярко на темном фоне. Проверьте состояния normal, hover, pressed, focused и disabled. В FireMonkey эти состояния задаются ресурсами стиля, поэтому визуально слабая кнопка часто требует изменения нескольких объектов, а не одного свойства.
Для подбора совместимых оттенков можно изучить ресурс по стилям, а затем перенести подходящие идеи в собственный StyleBook. Готовые примеры полезны как ориентир, но их следует проверять на разных дисплеях и в разных масштабах.
Переключение Темы Во Время Работы
Самый понятный подход — подготовить два файла стилей, например Light.style и Dark.style, а затем загружать нужный файл в TStyleBook. Переключение можно привязать к кнопке, пункту меню или системной настройке. Важно выполнять операцию централизованно, чтобы дочерние формы и вновь создаваемые окна получали тот же набор ресурсов.
Упрощенная процедура на Delphi может выглядеть так:
procedure TMainForm.SetDarkTheme(const AValue: Boolean);
var
StyleFile: string;
begin
if AValue then
StyleFile := TPath.Combine(TPath.GetDocumentsPath, 'Dark.style')
else
StyleFile := TPath.Combine(TPath.GetDocumentsPath, 'Light.style');
StyleBook1.LoadFromFile(StyleFile);
FDarkTheme := AValue;
end;
Конкретный метод загрузки зависит от версии Delphi и способа хранения ресурсов. Если стили добавлены в пакет ресурсов приложения, путь к файлу нужно получать через менеджер ресурсов, а не рассчитывать на текущую рабочую папку. После загрузки следует обновить отображение формы и проверить, не остались ли компоненты со старым локальным оформлением.
Настройку желательно отделить от визуального слоя. Например, состояние темы хранится в отдельном сервисе или менеджере настроек, а форма вызывает его методы. Это упрощает поддержку нескольких окон и не заставляет каждую форму самостоятельно решать, какой файл стиля использовать.
Системная Тема И Сохранение Настроек
Пользователь может ожидать, что приложение автоматически последует за системным режимом. На мобильных платформах и современных настольных системах темная тема часто задается настройками операционной системы. FireMonkey не всегда дает одинаковый уровень доступа к этой информации на всех платформах, поэтому проверку нужно реализовывать с учетом конкретной версии Delphi и целевой ОС.
Безопасная схема состоит из трех режимов: светлый, темный и системный. В первых двух случаях приложение использует явный выбор пользователя. В системном режиме оно определяет состояние операционной системы при запуске и, если это поддерживается платформой, реагирует на последующие изменения. Такой вариант предотвращает неожиданную смену оформления, если пользователь предпочитает фиксированную тему.
Выбранное значение нужно сохранять в настройках приложения. Для этого подходят TMemIniFile, JSON-файл, системное хранилище или собственный класс конфигурации. Записывайте не только логическое значение, но и тип режима, если предусмотрена синхронизация с операционной системой. При чтении настроек учитывайте отсутствие ключа в старой версии программы: в таком случае следует применять безопасное значение по умолчанию.
Переключение темы не должно выполняться из фонового потока. Обновление TStyleBook, форм и визуальных компонентов относится к пользовательскому интерфейсу. Правила безопасной работы с UI и синхронизацией подробно рассматриваются в материале о работе с потоками, что особенно полезно для приложений, где тема меняется после завершения фоновой операции.
Проверка На Разных Платформах
После подключения темной темы протестируйте приложение не только на главной форме. Откройте диалоги, всплывающие окна, экраны авторизации, списки с пустым состоянием и формы с ошибками валидации. Часто именно второстепенные элементы сохраняют белый фон, темный текст или системную иконку, плохо заметную на новом фоне.
Отдельное внимание уделите изображениям. Логотипы с прозрачностью, растровые иконки и SVG-файлы могут выглядеть корректно в светлом режиме и теряться в темном. Для универсальных значков лучше использовать векторные ресурсы с окраской через стиль, а для фотографий и иллюстраций предусмотреть отдельные варианты, если фон существенно меняется.
| Область проверки | Светлая тема | Темная тема |
|---|---|---|
| Основной фон | Светлый нейтральный оттенок | Темно-серый, без чрезмерной черноты |
| Текст | Темный, с четким контрастом | Светлый, с несколькими уровнями яркости |
| Кнопки | Видимый фон и состояния | Различимые акцентные и нажатые состояния |
| Поля ввода | Контрастная граница | Светлая граница или мягкая подсветка фокуса |
| Изображения | Нет засветки на светлом фоне | Нет потери деталей на темной поверхности |
| Отключенные элементы | Пониженная насыщенность | Пониженная яркость, но сохраненная читаемость |
| Диалоги | Единый фон с приложением | Отдельная поверхность без резкого контраста |
Проверьте масштабирование интерфейса на мониторах с высокой плотностью пикселей и на мобильных экранах. FireMonkey использует масштабируемую графику, но вручную заданные размеры, тонкие границы и небольшие иконки могут выглядеть по-разному. Также протестируйте смену ориентации устройства, появление клавиатуры и повторное открытие формы после изменения темы.
Завершать работу стоит проверкой производительности и поведения при запуске. Если большие файлы стилей загружаются долго, пользователь может увидеть промежуточное оформление. В таком случае тему лучше подготовить до показа основной формы или уменьшить объем ресурсов. После этого темный режим будет восприниматься как цельная часть приложения, а не как отдельный эксперимент с цветами.