Adding app colors

Created by Glen Barnes, Modified on Thu, 10 Oct at 10:51 PM by Natalie Nguyen

Adding colors to your app is a great way to personalize the look and feel of your app. You can choose a color scheme for your app in the Branding section. 

Where to add the app colors

To access the app colors go to Projects (1) and then click on Branding (2).


 CleanShot_2021-07-06_at_11.23.17_2x.png

Here you will see the available options for color changes you can make to the app.

App color options

  • Page: The background-color
  • Title bar: The bar shown at the top of the app
  • Text: All text throughout the app
  • Accent: Not currently shown
  • Download: The button color
  • Start: The button color
  • Delete: Not currently shown
  • Coupon: The button color if coupon codes are added

    CleanShot_2021-07-06_at_11.21.49_2x.png

 

Below you can see some examples of the color selections shown above displayed in an app.

iVBORw0KGgoAAAANSUhEUgAABwgAAA1ICAYAAACDu8CkAAAACXBIWXMAAAsTAAALEwEAmpwYAAALMWlUWHRYTUw6Y29tLmFkb2Jl-2_4.PNGiVBORw0KGgoAAAANSUhEUgAABwgAAA1ICAYAAACDu8CkAAAACXBIWXMAAAsTAAALEwEAmpwYAAALMWlUWHRYTUw6Y29tLmFkb2Jl-2_6.PNGiVBORw0KGgoAAAANSUhEUgAABwgAAA1ICAYAAACDu8CkAAAACXBIWXMAAAsTAAALEwEAmpwYAAALMWlUWHRYTUw6Y29tLmFkb2Jl-2_5.PNG


Changing the color

To change the default app color for each option, click on the colored squared and it will open a color selection pop-up.   

Now you can either drag the selection tool around to select your color or enter the Hex number if you have a branding guideline to follow.

 CleanShot_2021-07-06_at_11.33.24_2x.png

Once the colors are selected don't forget to hit Save at the bottom right of the screen.

 

Accessibility Warning: Contrast and color use is vital to accessibility. So you may see warnings for contrast ratios for color selections that break accessibility guidelines. Colors will either be too light or too dark.

 CleanShot_2021-07-06_at_11.14.08_2x.png


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article