深色模式

当用户设备开启深色模式时,你的流程可以相应调整颜色和背景——例如显示更暗的渐变或适合该主题的图片。要实现这一效果,你需要使用样式,并为亮色和深色两种主题分别配置一个版本。

每个版本都是一个填充:纯色、渐变、图片或视频。单个填充可以叠加多个元素:半透明的颜色层可以为其下方的图片着色。如果两种主题之间没有差异,两个版本也可以完全相同。

你只需将样式应用于某个元素,流程便会自动根据设备的模式选用正确的版本。

A screen previewed in light and dark mode side by side

添加深色主题

默认情况下,新建的流程使用浅色主题。要添加深色主题:

  1. 打开 Styles 面板,选择 Colors 标签页。
  2. 点击 图标,打开主题管理菜单。
  3. 选择 Add dark theme。深色变体将添加到每个颜色样式中,初始两个值相同。现在你可以配置深色主题。
样式面板的“颜色”标签页,主题菜单展开,显示“添加深色主题”菜单项

配置深色主题

添加深色主题后,颜色样式列表中的每个条目都会包含两个主题专属设置:Light 和 Dark。

要编辑某个样式:

  1. 打开 Styles 面板
  2. 选择 Colors 标签页。
  3. 点击一个样式条目。如果所需样式尚不存在,请创建一个新样式。
  4. Light 值和 Dark 值依次列出。每个值可以包含多个图层。点击色块,根据填充类型设置图层:
  5. 点击 Save。
编辑样式表单,浅色和深色部分使用不同的图片,以及深色图片的图片选择器

浅色和深色的值可以使用不同的填充类型。

混合使用不同填充类型

你可以在同一样式的两个版本之间混合使用不同的填充类型:

  • 纯色、渐变色和图片:可以任意组合。例如,背景在浅色模式下可以是纯色,在深色模式下可以是图片。
  • 视频:如果浅色版本包含视频,深色版本也必须包含视频,反之亦然。两个版本的视频可以不同。

将主题应用于元素

如果某个元素的属性未使用颜色样式,则深色主题不会对其生效。图片和视频元素不支持颜色样式:若要在深色模式下替换其文件,请添加深色文件。

要使元素跟随主题,请点击其填充图层、文本颜色、边框颜色或图标颜色的色块。点击 Styles 标签页并选择对应的样式条目,将静态值替换为样式。如果没有满足需求的样式,可将当前值保存为样式。

屏幕背景同样遵循主题:在 Screen settings 中将样式应用于其填充图层。具体步骤请参阅在深色模式下显示不同背景。

如需将某个样式应用到屏幕上的多个元素,可以向 AI Editor 发出指令,例如:Apply the Card background style to all cards。

在深色模式下预览流程

点击画布下方的主题图标,可在 深色模式 和 浅色模式 之间切换。

仅当流程包含深色主题,或存在带有深色文件的图片或视频元素时,这些图标才会显示。

dark-mode-preview.webp

在深色模式下显示不同的图片或视频

在未添加深色模式文件之前,图片或视频元素会在两种模式下显示同一个文件。若要在深色模式下显示不同的文件:

  1. 选择图片或视频元素。
  2. 在属性面板的 Image 或 Video 区域,选择 Dark 标签页。画布会切换到深色模式预览。
  3. 上传深色模式下使用的文件。
The Image section of an Image element with the Dark tab selected and a dark-mode image uploaded

要再次编辑浅色模式的文件,请选择 Light 标签页。

设置状态栏主题

状态栏中的时间和电量图标,可能会在某种模式下与你的流程颜色产生冲突。为保证图标清晰可读,请在 屏幕设置 中开启 Status bar 开关后,设置 Status bar theme:

  • :白色图标,适用于两种模式下均为深色的背景。
  • :黑色图标,适用于两种模式下均为浅色的背景。
  • :跟随设备设置的图标,适用于一种模式为浅色、另一种模式为深色的背景。
status-bar-theme.webp

删除主题

  1. 打开 Styles 面板,选择 Colors 标签页。
  2. 点击 设置图标,打开主题管理菜单。
  3. 选择菜单项:
    • Delete Dark theme:为所有模式保留每种颜色样式的浅色版本。
    • Delete Light theme:为所有模式保留每种颜色样式的深色版本。