Colour

🎨 App Centre: Colour

Overview

The Colour page controls the main colour scheme used within your app.

These settings affect the visual identity of the app, including gradients, backgrounds, and font colours.

A live preview is shown on the page to help you see how your chosen colours work together.

What this section does

From this page, you can:

  • Set the first main colour
  • Set the second main colour
  • Set the primary font colour
  • Set the background colour
  • Preview how the colours will look together in the app

Where to find it:

App Centre → Colour


How to use Colour settings

First Colour

This is one of the two main brand colours used in the app gradient styling.

Second Colour

This is the second main brand colour used in the gradient.

Together, the first and second colours create the main app gradient effect.

Primary Font Colour

This controls the main text colour used in relevant app areas.

Choose a colour that remains easy to read against your backgrounds.

Background Colour

This controls the main app background colour.

Use a colour that works well with your content and keeps the app easy to read.


Preview area

The preview section gives you a visual guide to how the colours will appear together.

This helps you see the gradient effect before saving.

Best practice

  • Use brand colours that are already part of your website or logo
  • Make sure there is enough contrast between text and background
  • Avoid overly bright or low-contrast combinations
  • Test colours with readability in mind, not just appearance

Did you find this article useful?

  • Settings

    📱 App Centre: Settings Overview The Settings page controls some of the main appearance and b...
  • Useragent

    🧪 App Centre: Useragent Overview The Useragent page manages the custom user-agent strings th...
  • Translation

    🌍 App Centre: Translation Overview The Translation page allows you to change the wording use...
  • Add Useragent

    ➕ App Centre: Add Useragent Overview The Add Useragent page allows you to create a new user-a...
  • Edit Useragent

    ✏️ App Centre: Edit Useragent Overview The Edit Useragent page allows you to update an ...