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. Click on the Settings icon (cog icon) in the Interface section sidebar
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. You can choose from three types of backgrounds:

Gradient background

Set a gradient as your app's background:

1. Select Gradient from the background type dropdown
2. Choose or configure your gradient
3. Save your changes

Image background

Use an image as your app's background:

1. Select Image from the background type dropdown
2. Click Choose image
3. Upload or select an image from your assets
4. 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

Set a solid color as your app's background:

1. Select Color from the background type dropdown
2. Choose your color or set it to transparent
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 →