When the user’s device is set to dark mode, your flow can change its colors and backgrounds accordingly — display a darker gradient or a theme-appropriate image. To set this up, you use styles with a separate version for each theme — light and dark.

Each version is a fill: a solid color, gradient, image, or video. A single fill can layer multiple elements: a semi-transparent color layer can tint the image under it. If there’s no difference between the two themes, the two versions can be identical.

All you need to do is apply the style to an element, and the flow automatically uses the correct version for the device’s mode.

Add a dark theme

By default, a new flow has a light theme. To add a dark theme:

1. Open the Styles panel and select the Colors tab.
2. Click the icon to open the theme management menu.
3. Select Add dark theme. The dark variant is added to every color style, with two identical values. You can now configure the dark theme.

Configure the dark theme

After you add the dark theme, every entry in the Color Style list has two theme-specific settings: Light and Dark.

To edit a style:

1. Open the Styles panel
2. Select the Colors tab.
3. Click a style entry. If the necessary style doesn’t exist yet, create a new one.
4. The Light value and the Dark value are listed one after the other. Each value can hold several layers. Click the swatch to set the layer in accordance with its fill type:
   • Solid color
   • Gradient
   • Image or video
5. Click Save.

The Light and Dark values can use different fill types.

Mix and match fill types

You can mix fill types between the two versions of a style:

• Solid colors, gradients, and images: In any combination. For example, a background can be a solid color in light mode and an image in dark mode.
• Videos: If the light version includes a video, the dark version must also include a video — and vice versa. The two videos can be different.

Apply the theme to an element

If an element property doesn’t use a color style, the dark theme doesn’t apply to it. Image and Video elements take no color style: to change their file in dark mode, add a dark file.

To make an element follow the theme, click the swatch of its fill layer, text color, border color, or icon color. Replace the static value with the style by clicking the Styles tab and selecting the style entry. If no style has the value you need, save the current value as a style.

A screen background follows the theme the same way: apply the style to its fill layer in Screen settings. For the steps, see Show a different background in dark mode.

To apply a style to many elements on a screen, ask the AI Editor, for example: Apply the Card background style to all cards.

Preview the flow in dark mode

Click the theme icons below the canvas to switch between Dark mode and Light mode.

The icons only appear if the flow has a dark theme, or an Image or Video element with a dark file.

Show a different image or video in dark mode

An Image or Video element shows its file in both modes until you add a dark file. To show a different file in dark mode:

1. Select the Image or Video element.
2. In the Image or Video section of the property panel, select the Dark tab. The canvas switches to the dark mode preview.
3. Upload the file for dark mode.

To edit the file for light mode again, select the Light tab.

Set the status bar theme

The time and battery icons in the status bar may clash with the colors of your flow in one of the modes. To keep the icons readable, set the Status bar theme in Screen settings while the Status bar switch is on:

• : White icons, for a background that is dark in both modes.
• : Black icons, for a background that is light in both modes.
• : Icons that follow the device setting, for a background that is light in one mode and dark in the other.

Delete a theme

1. Open the Styles panel and select the Colors tab.
2. Click the settings icon to open the theme management menu.
3. Select a menu item:
   • Delete Dark theme: Keeps the light version of every color style for both modes.
   • Delete Light theme: Keeps the dark version of every color style for both modes.