Color scheme

How to set the color scheme of your app

You can define how your app looks by setting a custom color scheme. This controls the colors used in the header, footer, buttons, icons, and other interactive elements.

Step 1: Open the color scheme settings

• Go to the Theme screen from the Design section in the side menu

• Click on the Color scheme button at the top of the screen

Step 2: Choose how to configure colors

• "Your app colors" option lets you manually select and apply your own brand colors

• "Preset colors" option provides a set of ready-made combinations you can instantly use

• "Get my website’s colors" option allows you to extract and apply colors from your connected website

You can apply your brand's identity using manual selections or automatically match it with your website's color scheme.

Step 3: Set each color in your palette

• Base color defines the main color used across the header, bottom bar, and background elements

• Contrast color is used for text and icons that appear on top of the base-colored areas

• Selection color is applied to selected items like tabs, active icons, and highlights

• Highlight color is used for call-to-action buttons and other accent elements between the header and footer

Step 4: Save or reset your selection

• Click Done to save your selected colors

• Click Reset to restore default color values

• Click Cancel to discard changes and exit

Preview the design on the demo app or the Preview emulator.