Colors and themes

How to apply a default color theme to your app, and edit colors within specific parts of your app.

Setting the color theme for your app means that your selected colors are reflected throughout every part of your app. So, if you have a branding palette, it's easy to add these into the color theme to reflect your company's style and brand.

You can change the primary, secondary, accent, surface, neutral, text, background, and loading colors. You can set 'information', 'success', 'warning', and 'error' colors, although these colors are usually standard. For example, error messages are typically red, and success is typically indicated by green. But you can change them if you like.

How To Set Up Theme Colors and Apply Colors To Parts

Setting the Color Theme For Your App

Changing the look and feel of your app after you have started building it or even after you have deployed is straightforward by using Settings.

Go into Settings on the left menu, then click on 'Colors'.

The color mixer will open, and you can adjust everything you need to change. You can select from the preconfigured colors, mix your color, or key in HEX, RGBA, or HSLA codes if you know them.

General Settings - Colors

You'll notice when setting your theme colors that you can set light and dark mode colors.

Dark Mode

All apps made in Appeggio come standard with a dark theme. The dark theme colors you choose are available when you see the moon icon. The light theme colors are those where you see the sun icon.

If you choose to not enable dark mode in your app, simply go to Settings > General, then scroll down to the section titled 'Overall Features'.

Then, uncheck the box next to 'Has dark mode?'.

Settings - Enabling Dark Mode

Applying Color to Parts

Now that you've set your theme colors, applying colors to various parts is easy.

Select the part that to change. Then go to the 'Colors' editor on the right. You'll see two tabs in the editor - Foreground and Background. Most parts in Appeggio can change the foreground and background colors.

To illustrate this, let's take the example of a button, which usually has text and/or an icon in it. The text and/or icon are considered the foreground colors, and the button itself has the background color applied:

Applying Background and Foreground Theme Colors a Button

Next to the theme colors, you'll notice a button with three vertical dots. If you click on that, you'll see that your theme colors can be applied in up to four shades lighter or darker:

Theme Colors Can Easily Be Applied Up to 4 Shades Lighter or Darker

You don't have to stick to the colors in your color palette. For your theme colors, stick to those labeled 'Theme'. Otherwise, you can mix your color using 'Color', or you can choose 'Gradient' if you want to apply a color gradient effect to your part.

Making a Color Transparent

Sometimes, parts come with a color already applied, and you may wish to remove the color from the part. Select the part, then go to the 'Colors' editor on the right. Click on 'Transparent'.