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" provides a set of ready-made combinations you can instantly use

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

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

Last updated

Was this helpful?