Theme & Style

The Theme & Style settings allow you to configure your application's default theme (light or dark mode) and set a global background for your app.

Accessing theme & style

To configure theme and style settings:

1. Open the Settings tab in the top bar and click Interface Settings
2. Click Theme & Style

This opens the theme configuration modal.

Default theme

You can choose between two default themes for your application:

• Light — A light color scheme for your app
• Dark — A dark color scheme for your app

The default theme sets the initial appearance when users first load your application.

Allowing users to switch themes

You can allow users to dynamically switch between light and dark themes in your app using the Change theme workflow action. This gives users control over their viewing experience.

Learn how to create a theme toggle →

App background

The app background appears behind all your pages and content. Configure up to three layers — Gradient, Image, and Color — then choose which layer takes priority using the background order dropdown.

Gradient background

1. Set your gradient colors and stops
2. Choose the background order (for example, gradient first, then image, then color as fallback)
3. Save your changes

Image background

1. Click Choose image and select an image from your assets
2. Adjust the background order if you also use a gradient or color
3. Save your changes

TIP

When using an image background, ensure it doesn't interfere with the readability of your content. Consider using a subtle or low-contrast image.

Color background

1. Choose your color (or set it to transparent)
2. Set the background order so color is used when higher-priority layers are not set
3. Save your changes

Background priority

You can set multiple background types at once using the dropdown selector. The order in the dropdown (Gradient > Image > Color) represents the priority order:

1. Gradient — Displays first if set
2. Image — Displays if gradient is not set
3. Color — Displays as the fallback if neither gradient nor image is set

This allows you to create layered backgrounds or have fallbacks in case images don't load.

Best practices

Readability

• Ensure your background doesn't make content hard to read
• Use subtle backgrounds that don't compete with your content
• Test readability in both light and dark themes

Performance

• Optimize background images for web (compress and resize appropriately)
• Avoid very large background images that slow down page load
• Consider using solid colors or gradients instead of images when possible

Consistency

• Use backgrounds that align with your brand
• Keep backgrounds consistent with your overall design
• Test how your background looks across different pages and screen sizes

CONTINUE LEARNING

Learn about managing other app settings:

Learn about headers →