Skip to content

Themes Configuration

Overview

The Themes tab of the application configuration lets you create and manage custom themes for your application. A theme controls the visual appearance of all built-in components — colors, fonts, borders, and more — across both desktop and mobile. You can define reusable custom theme variables, configure styles per component, and preview changes in real time.

What You Will Learn

🔒 Heads up: This feature is limited to paid plans only.

  • What a Bellini application theme is and how it controls component appearance
  • How to create, import, and export custom themes
  • How to configure desktop and mobile theme settings independently
  • How to define and use custom theme variables across your application

When To Use This

Use this tab when:

  • You want to apply a consistent visual style across all built-in components in your application.
  • You need separate theme configurations for desktop and mobile.
  • You want to support automatic light/dark mode switching based on the user's OS preference.
  • You need to import a theme from another application or export themes for reuse.
  • You want to apply company branding (colors, fonts) consistently across an internal application.

Setting the Active Application Theme

The Active dropdown at the top of the Themes tab controls which theme is applied to the application. The available options are:

Option Behaviour
Default The built-in Bellini default theme is applied. No custom theme is required.
Custom A specific custom theme is applied. A Theme dropdown appears to select from the available app themes.
Auto The theme switches automatically based on the user's OS dark/light mode preference. A Light Theme and Dark Theme dropdown appear, each allowing selection from available app themes (including Default).

Adding and Importing Themes

If no themes have been created yet, the tab shows two buttons:

  • Add Theme — creates a new blank custom theme.
  • Import Themes — opens an import wizard where you can select a .json theme file to import. The imported theme is added to the application.

Once themes exist, you can also add a new theme using the + button in the theme tab bar, and import using the Import button described below.

Existing themes are displayed as tabs across the bottom of the Themes panel, each named after the theme. Click a tab to open and edit that theme.

Alongside the tab bar are:

  • Search bar — filters theme fields by name within the active theme.
  • Import button — imports a theme from a .json file (same as above).
  • Export button — opens a dialog listing all available themes with a checkbox for each. Select the themes you want to export and click Export to download a .json file that can be imported into another application.

Configuring an Application Theme

Each theme has a Name field (required, must be unique) and two tabs: Desktop and Mobile. Both tabs share the same structure but allow independent configuration of values.

Desktop and Mobile Theme Relationship

Theme configuration is shared between the Desktop and Mobile tabs in the following way:

  • Custom Theme Variables — variables declared in one tab are also present in the other, but can have different values per tab.
  • All other theme sections — desktop values serve as the default for mobile. Mobile can override any desktop value by providing a different value; fields left empty in mobile inherit from desktop.

Theme Configuration Sections

Within each tab, theme settings are divided into sections:

Section Description
Custom Theme Variables Declare reusable CSS variables used throughout the application (e.g. in component styles and custom CSS).
App Theme Global application-level styles such as background and base text color.
UI Components Theme Shared styles that apply across all built-in components.
Per-component sections Individual sections for each built-in component and UI element (e.g. Button Theme, Side Panel Theme, Notification Theme, Context Menu Theme). Each section contains fields for that element's specific styles. A live preview is shown within each section so you can see changes immediately.

Color fields use a color picker input for visual selection.

Managing Custom Theme Variables

Custom theme variables are reusable CSS custom properties you define once and reference anywhere in the application.

To add a variable:

  1. Enter a name — must be a valid CSS custom property name (e.g. --brand-primary).
  2. Select a type: Color, Font Family, Font Size, or Font Weight.
  3. Enter a value valid for the selected type.
  4. Click the + button to add the variable.

To remove a variable: click the × button on the variable's row.

Once defined, custom theme variables are available as standard CSS custom properties and can be referenced anywhere you write CSS in the application — for example, in a component's Styles panel or a global stylesheet:

1
2
3
4
.my-element {
  background-color: var(--brand-primary);
  font-family: var(--body-font);
}

This means you can update the variable value in one place and have it automatically applied across all components and styles that reference it.

Helpful Resources