В Experience Builder тема представляет собой набор спецификаций дизайна, которые во многом определяют внешний вид вашего приложения. Можно использовать настройки темы для определения цветов, шрифтов, стилей кнопок и других параметров оформления глобально для всего приложения, вместо того, чтобы изменять эти настройки для отдельных виджетов и других элементов приложения.
Настройки темы определяют основные и дополнительные цвета, функциональные цвета, которые отражают какую-либо информацию, окна успешного выполнения, предупреждения, ошибки, а также нейтральные цвета. Все эти цвета можно настраивать, чтобы обеспечить соответствие визуальной идентичности приложения фирменному стилю вашей организации или вашим личным предпочтениям. Можно задать цвета поверхностей, таких как страницы, ячейки виджета Таблица и окна, а также цвета интерактивных элементов – кнопок ниспадающего меню, переключателей в состояниях вкл. и выкл. и индикатора фокуса клавиатуры. Тема также влияет на шрифтовое оформление, радиус границ элементов приложения, стиль подчеркивания текста ссылки и многое другое. Тема не влияет на компоновку и содержание приложения.
Тема определяет внешний вид многих элементов приложения по умолчанию, но в настройках виджета, страницы и других элементов можно переопределить тему приложения, чтобы изменить оформление отдельного элемента.
Чтобы просмотреть настройки темы для приложения Experience Builder или шаблона, щелкните Тема, чтобы открыть панель Тема.
Выбор темы
При открытии панели Тема появляется список готовых тем. Значки на образцах тем указывают, является ли тема светлой 
или темной 
.
Можно выбрать одну из следующих готовых тем:
- Основная — светлая тема с синим и фиолетовым в качестве основного и второстепенного цветов. Это тема по умолчанию.
- Астро — темная тема с синим и фиолетовым в качестве основного и второстепенного цветов.
- Океан — светлая тема с синим и зеленым в качестве основного и второстепенного цветов.
- Бархат — светлая тема с красным и синим в качестве основных и второстепенных цветов.
- Бездна — темная тема с фиолетовым и синим в качестве основных и второстепенных цветов.
- Луг — светлая тема с зеленым и коричневым в качестве основных и второстепенных цветов.
- Общая тема — синхронизирует тему с настройкой общей темы в вашей организации. При выборе этой темы вы не можете настраивать цвет, шрифты или любые другие параметры темы. Если вы не выбрали эту тему, вы все равно можете выбрать цвета общей темы организации при настройке виджета.
Примечание:
В обновлении ArcGIS Online за октябрь 2025 года была представлена новая система тем. Все приложения, созданные после этого обновления, используют новую систему. Приложения, созданные до этого обновления, сохраняют темы из предыдущей системы, если только вы не измените темы в настройках Темы.
Обратите внимание, что если вы переключаете существующее приложение со старой темы на новую, некоторые части вашего приложения могут иметь неожиданный внешний вид, поскольку различные переменные темы не отображаются одинаково. Рекомендуется сохранить старую тему приложения.
Если вы переключаетесь на новую тему, выбирайте тему с тем же режимом, что и у старой. Переключитесь со старой светлой темы на новую светлую тему или со старой темной темы на новую темную тему.
Настройка темы
Выбрав тему, щелкните Настроить, чтобы открыть дополнительные настройки темы.
Примечание:
Щелкните Сбросить, чтобы восстановить настройки темы по умолчанию.
Настройки цвета
Настройки на вкладке Цвет определяют цвета для различных частей вашего приложения.
Вы можете использовать компонент выбора цвета для определения цветов бренда, функциональных цветов, нейтральных цветов, цветов поверхности и интерактивных элементов.
Цвета бренда и функции
Цвета бренда — это цвета, которые чаще всего используются в вашем приложении. Это основные цвета, используемые для привлечения внимания и передачи информации в интерактивном режиме.
- Основные цвета предназначены для наиболее заметных компонентов пользовательского интерфейса, таких как плавающие кнопки действия, кнопки с высокой степенью значимости и активные состояния. Их следует использовать для выделения важных фрагментов, текста и значков.
- Второстепенные цвета предназначены для менее заметных заливок, текста и значков в пользовательском интерфейсе.
Цвета функций используются в предупреждающих сообщениях, например, в сообщениях, которые появляются, когда виджеты успешно выполняют задачу.
- Информационные цвета используются для информационных сообщений.
- Цвета успешного выполнения используются для обозначения состояния успешного выполнения, например, сообщений, которые отображаются по окончании работы виджета.
- Цвета предупреждений используются для предупреждающих сообщений.
- Цвета ошибки используются для сообщений об ошибке, например, сообщений, которые отображаются при сбое в работе виджета.
Можно использовать компонент выбора цвета, чтобы определить один базовый цвет для каждого из шести цветов бренда и функции.
Чтобы сделать приложения более динамичными, Experience Builder использует разные оттенки каждого цвета вокруг приложения. Рядом с каждым цветом бренда или функции предварительный просмотр показывает, как текст появится в трех оттенках: светлом, основном и темном. Цвет текста выбирается автоматически для оптимальной контрастности и отображения.
Например, кнопки используют три оттенка цвета для передачи информации о состояниях и взаимодействии. На следующей схеме кнопка использует основной цвет темы. Цвет кнопки по умолчанию — основной оттенок, цвет состояния при наведении мыши — темный оттенок, а цвет состояния нажатия — светлый оттенок.
Примечание:
Цвет состояния при нажатии некоторых кнопок может отличаться от светлого оттенка, поскольку некоторые кнопки имеют эффект пульсации при нажатии. Анимация включает прозрачность, благодаря которой цвет кнопки выглядит светлее.
Информационные, предупреждающие сообщения и сообщения об успешном выполнении или ошибке также используют три оттенка цвета.
Если вы меняете какой-либо из цветов бренда или функции по умолчанию, можно отметить опцию Оптимизировать мой выбор цветов, чтобы автоматически генерировать оттенки выбранных вами цветов, оптимальные для контрастности и отображения.
Нейтральные цвета
Нейтральные цвета определяют основные цвета вашего приложения. В частности, нейтральные цвета определяют цвет текста, фона, границ и разделительных линий по умолчанию.
В разделе Нейтральный вы можете воспользоваться инструментом выбора цвета, чтобы выбрать базовый нейтральный цвет. На основе этого базового цвета появится 13 оттенков. Это все нейтральные цвета, используемые в приложении.
В совокупности цвета бренда, функциональные и нейтральные цвета представляют собой цвета темы, которые отображаются в компоненте выбора цвета в настройках виджета, настройках страницы и других настройках элемента, где вы можете определить цвет.
Цвета поверхности и интерактивного элемента
Можно использовать настройки цвета в разделе Поверхность, чтобы определить цвета фонов элементов и текста, отображаемого на этих элементах. По умолчанию эти цвета связаны с нейтральными цветами.
- Цвета страниц применяются к страницам, разделам и основным сценам групп экранов.
- Цвета контейнера применяются к виджетам Карточка, элементам списка в виджетах Список и ячейкам в виджетах Таблица.
- Цвета наложения применяются к окнам, подсказкам инструментов, модальным вкладкам и всплывающим окнам.
Можно использовать настройки цвета в разделе Интерактивные элементы, чтобы определить цвета таких элементов, как кнопки ниспадающего меню, кнопки пагинации, активные вкладки в меню и кнопки-переключатели.
- Цвет по умолчанию применяется к состоянию интерактивных кнопок по умолчанию. По умолчанию этот цвет связан с нейтральными цветами.
- Выбранное состояние применяется к выбранному состоянию интерактивных кнопок. По умолчанию этот цвет связан с основным цветом темы.
- Цвет Фокуса клавиатуры применяется к индикатору, который показывает, на каком интерактивном элементе страницы приложения сфокусирован ввод с клавиатуры. Это удобно, когда вы используете клавиатуру для навигации по приложению. По умолчанию этот цвет связан с основным цветом темы.
Примечание:
По умолчанию все цвета поверхности и интерактивных элементов связаны либо с нейтральным цветом, либо с основным цветом темы. Изменение нейтрального или основного цвета темы также изменяет связанный цвет. Если вы измените цвета любой поверхности или интерактивного элемента с помощью их соответствующих инструментов выбора цвета, цвета перестанут быть связанными с нейтральным или основным цветом темы, но вы можете нажать Сброс, чтобы снова их связать.
При изменении любого цвета поверхности или цвета интерактивного элемента связанные цвета текста автоматически меняются на цвета с достаточной контрастностью. Минимальный коэффициент контрастности — 3:1. Если изменить цвет текста на цвет, не соответствующий стандарту контрастности, появится предупреждение с предложением выбрать другой цвет.
Настройки шрифтового оформления
На вкладке Шрифтовое оформление можно изменить следующие параметры текста:
- Шрифт — выберите шрифты для заголовка и основного текста.
- Заголовки — выберите шрифт для текста заголовка.
- Основа — выберите шрифт для основного текста. Основной текст включает весь остальной текст приложения, включая надписи.
- Размер шрифта — Используйте скользящую линейку для определения общего размера шрифта. Диапазон размеров от Очень маленький до Очень большой. Меньший размер шрифта позволяет разместить больше текстовых ресурсов, а больший размер шрифта облегчает чтение.
Experience Builder включает шрифты по умолчанию. Можно добавить шрифты, нажав Добавить шрифты Google в ниспадающем меню шрифтов. Появится окно Добавить шрифты Google, в котором можно ввести URL-адрес шрифта в текстовое поле. Нажмите OK, чтобы добавить шрифт.
Другие настройки темы
На вкладке Дополнительно можно изменить следующие настройки:
- Радиус границы — выберите общий стиль для радиуса границы элементов приложения. Радиус границы влияет на форму углов таких элементов, как контейнеры, кнопки и окна ввода. Можно выбрать, будет ли радиус границы определяться выбранной темой или выбрать Нет, Маленький, Средний, Большой или Очень большой.
- Компоненты — настройте внешний вид полей ввода и текста ссылки.
- Поле ввода — выберите цвет для полей ввода. Поля ввода включают поля ввода текста, поля поиска, а также состояния по умолчанию полей для проставления отметок, для кнопок переключателей.
- Ссылка — выберите стиль подчеркивания и цвет текста ссылки. Для стиля подчеркивания можно выбрать, будет ли стиль определяться выбранной темой или выбрать Без подчеркивания, Сплошное подчеркивание или Пунктирное подчеркивание.