Styling your Audiorista app: Colors and appearance – Audiorista Help Center

This article explains how to customize the look of your app using the styling section in the Audiorista dashboard.

You'll learn how carousel height affects content layout, how appearance settings like light/dark mode work, and how to use color settings effectively, including a full reference table for where each color is applied.

Table of Contents

Getting started with styling
Carousel height and corner radius
- Carousel height
- Corner radius
Device theme: Light, dark, and automatic
Key customizable areas
Light vs. dark mode colors
Previewing your changes

Getting started with styling

When you first create your app, Audiorista’s setup wizard helps you get started by generating a default set of colors based on your selected branding. These are meant to be a starting point, where everything can be fully customized afterward.

To find the styling section, start by:

Logging in to your Audiorista dashboard
Go to My App in the sidebar and select Styling

You'll now see a split view: the left side shows all available styling options, and the right side displays a live preview of your changes.

Carousel height and corner radius

These settings let you control the size of images in carousels and the roundness of UI elements, helping you create a look that fits your brand and improves the user experience.

Carousel height

Controls how large artworks (like podcast covers) appear in the Browse screen.

Lower values = smaller images
Higher values = larger, more prominent images
Corner radius

Sets how rounded corners appear on elements.

- A value of 0 gives sharp corners

- Higher values create more rounded edges

There are two types:

Corner radius (large): for bigger elements
Corner radius small: for buttons or smaller UI parts

Device theme: Light, dark, and automatic

The Device theme section lets you choose how your app behaves with different color schemes:

device theme on the styling section, no code app builder

Light mode: Black status bar icons for light backgrounds on your mobile device. For example:
Dark mode: White status bar icons for dark backgrounds on your mobile device. For example:
Automatic: Matches the user’s device settings (recommended if supporting both light and dark modes)

If you want your app to respond to device-level appearance settings, choose Automatic. See the section below for how to configure color schemes for both light and dark mode used with the Automatic setting.

Key customizable areas

Background

To adjust your app’s background colors, focus on the Backdrop color (main screen background) and the Bar color (bottom navigation bar). These two settings control the overall visual tone of your app and should be tested together in both light and dark modes for consistency.

Backdrop color: Main app background
This is an example of how the background looks in the preview app:
Bar color: Bottom tab/navigation background
And here is a preview of how the bar looks in the preview app. As you can see, when you hover over the menu, the colors also change based on the bar_on_color.
Surface

Surface colors apply to components like cards and modals that sit above the main background. Use them to define the background and text colors for these layers. They help separate content visually and should be checked in both light and dark modes.

Primary colors

The primary color plays a crucial role in your app's identity. It controls key highlights like the selected tab icon, progress bars, and header text. Choose a color that stands out clearly against both the backdrop and bar colors to ensure good visibility and brand consistency.

Using the same settings, here’s an example of how the primary colors appear in the preview app:

preview of primary colors on the preview app, no code app builder

Secondary Colors

Secondary colors are used to support your primary color by adding variety and depth to your app’s visual language.

For example, while the primary color might highlight the main call to action (like “Play” or “Subscribe”), the secondary color could be used for supporting actions such as “More Info” or “Share.” It should still contrast well with your background and remain consistent with your brand.

Let’s take two different colors from the primary palette as an example:

This is how the secondary colors will look on the preview app: preview of the secondary colors on the preview app, no code app builder

Other Elements

Error

Error colors are used to indicate problems or failed actions, such as form validation errors or playback issues. Use Error for the background or highlight ,and Error On for the text or icon that appears over
Success

Success colors signal completed actions, confirmations, or positive outcomes. Use Success for the highlight or background color and Success On for any text or icons that appear on top of it.
Other

Other colors are used for extra accents or special elements in your app. Use them carefully to keep your design clear. Always check how they look in both light and dark modes.

App color variables and their purpose

Color Category	Color Variable	Description
Backdrop	`backdrop_color`	Main background color of the app.
	`backdrop_on_color`	Text and icons are displayed on the backdrop.
	`backdrop_muted_color`	Secondary text or subtle elements on the backdrop.
Surface	`surface_color`	Background for cards, modals, and layered UI components.
	`surface_on_color`	Text and icons on surface elements.
	`surface_muted_color`	Less prominent text/icons on surface layers.
Bar	`bar_color`	Background color of bottom and top navigation bars.
	`bar_on_color`	Active icons/text in navigation bars.
	`bar_muted_color`	Inactive or secondary icons/text in navigation bars.
Primary	`primary_color`	Main accent color for buttons, headers, and progress bars.
	`primary_on_color`	Text/icons shown on primary-colored elements.
	`primary_muted_color`	Disabled or less prominent primary elements.
Secondary	`secondary_color`	Secondary accent color for supporting UI elements/actions.
Secondary	`secondary_on_color`	Text/icons on secondary-colored elements.
Error	`error_color`	Color indicating errors or critical states.
Error	`error_on_color`	Text/icons on error-colored elements.
Success	`success_color`	Color indicating success or confirmation states.
Success	`success_on_color`	Text/icons on success-colored elements.
Other	`separator_color`	Lines or dividers separating content sections.
	`border_color`	Borders around UI elements.
	`app_icon_color`	Default color for app icons.
	`reader_primary_color`	Primary color used in reader or content display features.

Light vs. dark mode colors

To support dark mode:

Scroll to the bottom of the color section and open the dropdown labeled Dark Mode Colors.
Set a second set of values specifically for dark mode, just like you did for the light mode.
Use the preview toggle to see how your app looks in both modes

This ensures a consistent and readable experience for users regardless of their system preferences.

Previewing your changes

Changes made in the styling section are reflected instantly in the preview on the right. For full testing:

Use the right built-in preview toggle to switch between modes
Open the Audiorista Preview App to check styling on a real device

This helps ensure your app looks consistent and polished across different settings and screens. Take your time to experiment with colors and layouts until you achieve the perfect look for your brand.

📱 Note: On your mobile device, you can switch your phone’s appearance settings (light or dark mode) to see how your app’s colors adapt in real-time. This is a great way to quickly verify contrast and readability in both modes.