配置主题设置—ArcGIS Experience Builder

在 Experience Builder 中，主题是一组设计规范，用于定义应用程序外观的诸多方面。可以使用主题设置来全局定义应用程序的颜色、字体、按钮样式和其他外观设置，而无需为单个微件和其他应用程序元素单独更改这些设置。

主题设置定义主色和辅色，用于指示信息、成功、警告、错误的功能色以及中性色，并且所有这些颜色均可自定义，以确保应用程序的视觉风格与组织的品牌或者您的个人偏好保持一致。可以定义表面颜色（例如页面、“表”微件单元格和窗口）以及交互式元素的颜色（例如下拉按钮、处于开/关状态的切换开关以及键盘焦点指示器）。主题也会影响排版、应用程序元素的边框半径、链接文本的下划线样式等。主题不会影响布局或应用程序的内容。

主题定义许多应用程序元素的默认外观，但在微件、页面和其他元素设置中，可以覆盖应用程序主题以更改单个元素的外观。

要查看 Experience Builder 应用程序或模板的主题设置，请单击主题以打开主题面板。

选择主题

打开主题面板后，将显示预设主题的列表。主题缩略图上的图标将指示每个主题是浅色主题还是深色主题。

可以从以下预设主题中进行选择：

Prime - 一款浅色主题，以蓝色和紫色为主色和辅色。此主题为默认主题。
Astro - 一款深色主题，以蓝色和紫色为主色和辅色。
Ocean - 一款浅色主题，以蓝色和绿色为主色和辅色。
Velvet - 一款浅色主题，以红色和蓝色为主色和辅色。
Abyss - 一款深色主题，以紫色和蓝色为主色和辅色。
Meadow - 一款浅色主题，以绿色和棕色为主色和辅色。
共享主题 - 将主题与组织中的共享主题设置同步。选择此主题后，您将无法自定义颜色、字体或任何其他主题设置。如果未选择此主题，则在为微件配置颜色设置时，仍可以从组织共享主题中选择颜色。

注：

ArcGIS Online 2025 年 10 月更新引入了新的主题系统。在此更新之后创建的所有应用程序均使用新系统。在此更新之前创建的应用程序将保留之前系统的主题，除非您在主题设置中更改主题。

请注意，如果将现有应用程序由旧主题切换为新主题，由于各种主题变量的映射方式不同，应用程序的某些部分可能会出现显示异常。建议您保留原有应用程序主题。

如果切换为新主题，请选择与原有主题具有相同模式的主题。可以从原有浅色主题切换为新的浅色主题，或者从原有深色主题切换为新的深色主题。

自定义主题

选择主题后，请单击自定义以显示附加主题设置。

注：

单击重置以将主题恢复为其默认设置。

颜色设置

颜色选项卡上的设置用于定义应用程序不同部分的颜色。

可以使用颜色选取器组件来定义品牌色、功能色、中性色、表面色和交互元素色。

品牌色和功能色

品牌色是指应用程序中最常用的颜色。品牌色是用于吸引注意力并传达交互性的主色。

主色用于用户界面中最需要强调的组件，例如浮动操作按钮、高亮按钮和激活状态。应该将其用于需着重强调的填充区域、文本和图标。
辅色用于用户界面中不太需要强调的填充区域、文本和图标。

功能色用于提示消息中，例如当微件成功运行任务时显示的消息。

信息颜色用于信息消息。
成功颜色用于成功状态消息，例如，当微件进程成功时显示的消息。
警告颜色用于警告消息。
错误颜色用于错误消息，例如，当微件进程失败时显示的消息。

可以使用颜色选取器组件为 6 种品牌色和功能色中的每种颜色定义一种基本颜色。

品牌色和功能色设置的屏幕截图

将在每个品牌色和功能色旁边显示预览。

为了使应用程序更加生动，Experience Builder 在应用程序中使用每种颜色的不同色调。将在每个品牌色和功能色旁提供预览效果，用于显示文本在三种色调下的显示效果：浅色调、主色调和深色调。将自动选择文本颜色，以获得最佳对比度和显示效果。

例如，按钮将使用三种颜色来传达状态和交互方式。在下图中，按钮使用了主题主色。按钮的默认颜色为主色调，悬停状态颜色为深色调，按下状态颜色为浅色调。

当按钮使用主色时，按钮的默认状态、悬停状态和按下状态将使用 3 种主色调。

注：

某些按钮的按下状态颜色可能与浅色调不同，因为这些按钮在按下时会显示涟漪动画效果。动画中包含透明效果，由此使按钮颜色看起来更浅。

信息、成功、警告和错误信息也会使用这 3 种色调。

成功消息将使用成功功能色。

如果更改任何默认品牌色或功能色，可以选中优化我的颜色选择复选框，以自动生成所选颜色的色调，从而获得最佳的对比度和显示效果。

中性色

中性色定义应用程序的基础颜色。具体来说，中性色定义文本、背景、边框和分割线的默认颜色。

在中性色下方，可以使用颜色选取器选择基础中性色。基于此基础色，将显示 13 种色调。即在应用程序中使用的所有中性色。

品牌色、功能色和中性色共同构成主题颜色，这些颜色显示在微件设置、页面设置以及其他支持定义颜色的元素设置中的颜色选取器组件中。

表面和交互元素色

可以使用表面下的颜色设置来定义元素背景以及显示在这些元素上的文本的颜色。默认情况下，这些颜色将链接到中性色。

页面颜色适用于页面、部分和屏幕组的主要阶段。
容器颜色适用于“卡片”微件、“列表”微件中的列表项目以及“表格”控件中的单元格。
叠加颜色适用于窗口、工具提示、模态框和弹出窗口。

可以使用交互元素下的颜色设置来定义诸如下拉菜单按钮、分页按钮、菜单中的活动选项卡以及切换按钮等元素的颜色。

默认颜色适用于交互按钮的默认状态。默认情况下，此颜色将链接到中性色。
所选状态适用于交互按钮的所选状态。默认情况下，此颜色将链接到主题主色。
键盘焦点色适用于相应指示器，该指示器将显示具有键盘焦点的应用程序页面的交互元素。当使用键盘导航应用程序时，此选项非常有用。默认情况下，此颜色将链接到主题主色。

注：

默认情况下，所有表面色和交互元素色将链接到中性色或者主题主色。更改中性色或主题主色也会更改链接颜色。如果您使用关联的颜色选取器更改任何表面色或交互元素色，则这些颜色将与中性色或主题主色取消链接，但可以单击重置以重新链接这些颜色。

当更改任何表面色或者交互元素色时，关联的文本颜色将自动更改为具有足够对比度的颜色。最小对比度为 3:1。如果将文本颜色更改为不符合对比度标准的颜色，则将显示警告，提示您选取其他颜色。

排版设置

在排版选项卡中，可以更改以下与文本相关的设置：

字体 - 为标题和正文文本选择字体。
- 标题 - 为标题文本选择字体。
- 正文 - 为正文文本选择字体。正文文本包含所有其他应用程序文本，其中包括标注。
字号 - 使用滑动标尺以定义常规字号。大小范围介于非常小到非常大。较小的字号能够在有限区域内容纳更多文本内容，而较大的字号更利于阅读。

Experience Builder 包含默认字体。可以通过单击字体下拉菜单中的添加 Google 字体来添加字体。添加 Google 字体窗口随即出现，可以在其中的文本框中输入字体 URL。单击确定以添加该字体。

在 Google Fonts 上浏览字体系列