Colors play an essential role in the user experience and the branding of your App. This guide will show you how to customize the appearance and colors of your App’s interface.
- Before you start: install Audiorista's preview App
- Find the Editor in Audiorista
- Choose a style
- Edit the colors to match your brand
- Edit Dark-mode colors
- Make the changes visible in the app
Before you start: install Audiorista's preview App
Before you start making changes, we recommend you install the Audiorista Preview App. This allows you to test your styling options before the App goes live, and avoid surprises later on. The app is free and available on the App Store. It can be installed with only few clicks.
→ Go to article: Preview your App
Find the Editor in Audiorista
- From Audiorista’s main menu on the left, select Apps
- Select Branding from the top menu
- Scroll to find the relevant section
Choose a Style
Style refers to the color theme applied to your App, and it mainly refers to the background color. You can choose between 3 different options:
- Light
- Dark
- Automatic
By choosing automatic, the app style is determined by the display setting (light or dark mode) on the user's device. Therefore, for this to work, your user must have a device that supports this option.
Edit the colors to match your brand
In the color section, you can customize the color scheme of your app to match your brand. We have included some examples in this guide to help you navigate this process. The color examples are shown in light green.
- Backdrop color
- Backdrop on color
- Backdrop muted color
- Bar color
- Bar on color
- Bar muted color
- Primary color
- Primary on color
- Primary muted color
- Secondary color
- Secondary on color
- Error color
- Success color
- Separator color
- Border colors
Backdrop color
Backdrop on color
Backdrop muted color
Bar color
Bar on color
Bar muted color
Primary color
Primary on color
Primary muted color
Secondary color
Secondary on color
Error color
Success color
Separator color
Border colors
Edit Dark-mode colors
If you select either the Dark or Automatic style, you must configure your colors in that modality.
- Scroll to the bottom of the page and select Edit dark-mode colors
- Edit the colors
- Save Changes
Make the changes visible in the app
After each change, you must tap or click on Save Changes for the changes to be visible in the app. The changes should be visible immediately after you have reloaded the app.