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

Click "Retry" to fetch a new set of colors from your website using the "Get my website’s colors" feature.

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 revert all changes

• Click Cancel to discard changes and exit

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