通过

在模型驱动应用程序中使用现代主题

模型驱动应用的用户具有模型驱动应用的现代全新外观，可以体验与 Microsoft Fluent 2 设计系统一致的更新样式。 由于现代新外观配备了全新的主题系统，因此不采用经典主题；不过，对于启用了现代新外观的用户，制作者可以修改应用程序使用的颜色，以帮助与组织品牌保持一致。 在本文中，您将了解现代全新外观中可用的样式覆盖，以及如何为您的组织进行实施。

备注

  • 新式主题当前支持为整个应用提供自定义主题并覆盖应用标题颜色。 其他自定义（例如自定义业务流程流控件）不可用。
  • 为了让现代主题发挥作用，模型驱动应用必须使用新外观。 详细信息：面向模型驱动型应用的现代全新外观

修改应用主题

[本主题是预发行文档，有可能会有所更改。]

在应用程序中启用现代、焕然一新的外观后，制作者可以创建一个自定义主题，帮助与其组织品牌保持一致。 使用自定义主题，您可以更改应用程序标题、超链接、查找、主按钮、活动选项卡指示器、行选择和悬停效果。 自定义主题还允许您更改应用程序中使用的字体。 要实现此目的，您需要将所需的主题信息封装到 XML 资源中，使用应用设置指向此 Web 资源，然后验证新的现代主题是否符合您的期望。

重要提示

  • 这是一项预览功能。
  • 预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前已经可用，以便客户可以抢先体验并提供反馈。
  • 大部分 UI 反映了自定义主题；但是，应用中仍有一些区域不使用新式主题，例如“时间线”控件、查找下拉列表、旧网格和审核历史记录。

自定义主题 XML 资源概述

创建自定义现代主题的第一步是创建一个 XML 文件，其中包含所需的主题参数，并在 CustomTheme 标签中定义以下一个或多个属性。

  • BasePaletteColor - 种子色（HEX 代码），用于为主题生成 16 个插槽的调色板。
  • LockPrimary - 一个布尔值，用于确定如何使用选定的种子色生成 16 槽调色板。
    • 假（默认）：调色板针对可访问性进行了优化，但并不保证种子色会出现在生成的调色板的任何插槽中。 这是默认设置。 使用 Fluent 主题生成器，根据您对 basePaletteColor、vibrancy 和 hueTorsion 的选择预览生成的调色板。
    • 真：种子色位于调色板的主要（中间）位置。 剩余的颜色是通过使颜色在一侧逐渐变亮，在另一侧逐渐变暗而生成的。 生成的调色板可能不符合对比度辅助功能要求。
  • Font - 自定义主题的字体。 自定义主题呈现的字体取决于浏览器和目标计算机显示该字体的能力。
  • Vibrancy - 一个可选参数，影响调色板的明暗度，尤其是浅色。 允许的值介于 -100 和 100 之间，默认值为 0。 该选项仅在 lockPrimary="true" 时适用。
  • HueTorsion - 影响调色板（尤其是浅色）色调、明暗度或色调的可选参数。 允许的值介于 -100 和 100 之间，默认值为 0。 该选项仅在 lockPrimary="true" 时适用。

覆盖调色板

覆盖主题调色板中的单个插槽为创建者提供了对插槽颜色的完全控制，这在需要超出上述标准主题参数的其他修改时特别有用。 要覆盖特定插槽，请按其名称为所需插槽分配一个值。 例如，您可以指定 darker70、primary 或 lighter10 的 HEX 代码，从而根据自己的偏好精确定制外观。 为所有 16 个插槽设置值将完全覆盖上一节中描述的所有调色板选项，从而实现高度自定义和独特的配色方案。

调色板的槽名从深到浅依次为 darker70、darker60、…<>、darker10、primary、lighter10、lighter20、…、lighter80。 请参阅 Fluent 主题设计器，了解这些槽位在 Fluent 控件中的一般使用方式。

现代主题颜色插槽。

自定义主题的 XML 示例

例如，此 XML 指定一个使用不同字体的绿色自定义主题。

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
/>

此 XML 使用备用调色板生成算法指定自定义主题，并覆盖单个插槽。

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

修改应用程序标题颜色

制作者可以自定义应用标题的样式，使其偏离应用主题。 您可以通过扩展为自定义现代主题创建的 XML，在 AppHeaderColors 标记中定义以下一个或多个属性来实现这一功能。

  • Background – 应用程序标题的背景颜色。 要使任何更改生效，必须定义此元素。
  • Foreground – 应用程序标题的文本颜色。 如果没有指定，系统会尝试计算一个与所提供的背景颜色有足够对比度的适当颜色。
  • BackgroundHover – 悬停在应用程序标题上时按钮的背景颜色。 如果没有指定值，系统将根据背景颜色计算颜色。
  • ForegroundHover – 悬停在应用程序标题上时按钮的文本颜色。 如果没有指定值，系统会尝试计算与 backgroundHover 颜色具有足够对比度的适当颜色。
  • BackgroundPressed – 应用程序标题上按钮被按下时的背景颜色。 默认逻辑与 backgroundHover 相同。
  • ForegroundPressed – 应用程序标题上按钮被按下时的文本颜色。 默认逻辑与 foregroundHover 相同。
  • BackgroundSelected – 应用程序标题上按钮被选中时的背景颜色。 默认逻辑与 backgroundHover 相同。
  • ForegroundSelected – 应用程序标题上的按钮被选中时的文本颜色。 默认逻辑与 backgroundHover 相同。

现代主题的 XML 示例

例如，此 XML 使用黑色应用标头扩展了绿色自定义主题。 为了获得最佳可用性，我们建议为每个交互状态指定不同的颜色值。

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

备注

这些设置将忽略覆盖应用程序标题颜色设置中指定的任何颜色。

创建 web 资源

  1. 使用文本或 XML 编辑器，保存用于创建 web 资源的 XML。 现代主题的 XML 示例

  2. 登录到 Power Apps。

  3. 在左侧导航窗格中选择解决方案，然后创建一个新解决方案。

  4. 选择新建>更多>Web 资源。

  5. 勾选选择文件，浏览并选择之前创建的 XML 文本文件。

  6. 在新建 web 资源属性窗格中，输入以下值：

    • 显示名称：输入显示名称，例如绿色自定义主题。
    • 名称。 接受自动生成的名称或输入 Web 资源的唯一名称。
    • 类型：数据 (XML)

  7. 选择保存。 使用下一节中的步骤发布此自定义。

将自定义主题应用于环境中的应用

选择颜色并创建 web 资源后，按照以下步骤为您环境中所有启用了新外观的应用程序启用此应用程序页眉样式。

  1. 在您用来创建 web 资源的解决方案中，选择添加现有>更多>设置。
  2. 在搜索框中输入自定义主题，选择自定义主题定义，选择下一步，然后选择添加。
  3. 在解决方案中，选择自定义主题定义，然后选择命令栏上的编辑。
  4. 在右侧编辑自定义主题定义属性窗格中，选择设置环境值下的新环境值并输入之前创建的网络资源的唯一名称（观察解决方案中名称列中的唯一名称）。 删除双引号，并确保为 Web 资源添加发布者前缀。 例如，在本例中，名称可能显示为 contoso_green-custom-theme。 具有 Web 资源唯一名称的主题的环境设置 contoso_green-custom-theme。
  5. 选择保存。
  6. 在左侧对象窗格中选择设置，然后在命令栏中选择发布所有自定义设置。 （当未选择解决方案中的任何组件时，会出现此命令）。

使用扩展的绿色主题示例自定义模型驱动应用。 自定义模型驱动的应用程序使用自定义绿色主题，并附加了充满活力的字体。

验证新应用程序标题颜色

发布自定义主题后，您需要验证主题在应用中的应用，以确保所有内容都按预期显示。

仅修改应用标题颜色

制作者可以选择仅自定义应用标题的样式，以偏离默认的应用主题。 可以通过以下步骤完成：

  1. 创建一个 XML 文件，其中包含各种颜色选项，并在 AppHeaderColors 标签中定义应用程序标题颜色覆盖部分中的一个或多个属性。
  2. 使用自定义主题所描述的相同流程创建网络资源，但请务必为 XML 资源起一个适当的描述性显示名称，如绿色应用程序标题 XML。
  3. 在覆盖应用程序页眉颜色设置中将此网络资源分配给环境或应用程序，从而将自定义应用程序页眉颜色应用到环境中的应用程序。 请按照在您的环境中应用自定义主题中的步骤操作，但请使用覆盖应用程序标题颜色设置。

    备注

    如果已定义自定义主题定义设置，则覆盖应用程序标题颜色设置中定义的任何配置都将被忽略。

  4. 验证自定义应用标题视觉对象（包括所有按钮状态），以确保所有内容都按预期显示，并且具有足够的辅助功能对比度。 您应该验证以下颜色选择：
    • 静止时的应用程序标题和每个按钮交互状态会显示所需的颜色。
    • 对于静止状态和每个按钮交互状态，前景色和背景色之间的最小对比度为 4.5:1。

应用标题颜色替代的示例 XML

例如，此 XML 为具有白色文本的应用程序标题指定了绿色背景色，为各种按钮交互状态指定了较暗的背景色。 为了获得最佳可用性，我们建议为每个状态指定不同的颜色值。

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

使用此配置后，在运行应用程序时，应用程序页眉应如下所示。 您可能需要刷新浏览器选项卡以显示主题。
模型驱动型应用中的绿色应用标题

另请参见

经典主题

现代全新外观