Appeggio Help
Search…
Colors and styles
This section takes you through applying a default color palette to your app, and editing colors within specific parts of your app.

Applying a default style (color palette) to your app

In the styles section of the left navigation toolbar, you can set the primary and secondary color, accent color, default background color and default text color; or use the palette generator to create your own complimentary color scheme.
Click on the ‘styles’ icon:
You will see the default color options that come with your chosen template. To find complimentary color schemes, click on ‘generate palette’:
Clicking on ‘generate palette’ will bring up random color palettes of complimentary colors. Keep clicking ‘generate’ until you see a palette that appeals. You will also see your default template colors across the top (where it says primary, accent, secondary, text and background). See the image below:
You don’t need to choose colors within the same palette. You can choose the suite of colors you think will work for you and for your branding.
When you find a color that is right for you, click on it, then allocate it to either primary, accent, secondary, text or background:
To illustrate what happens, I have chosen the first color and allocated it to primary, and the second I have allocated to accent. You will see they now appear as my selected colors:
Remember to click save on your selections.
You will now see your new color scheme reflected in the left navigation drawer, and they will also be applied across all parts of your app:
You still have the ability to change your colors without using the palette generator. Say for example you wanted to change your primary color, click on the dropdown within the primary color part, and click on the palette icon to mix a color:
This will bring up the mixer and you can mix your own color. If you have a color in mind and you know the HEX code (eg #0d4886 is the HEX code for our primary color), then key it in.
You will see that the color has been applied to reflect your choice as soon as you choose it. You can continue to click on a color and see your app change until you’re happy with your color choice. When you click out of the navigation drawer your choice will remain.

Dark mode

You can choose for your app to be in dark mode. This option is available within the styles section. You’ll need to select dark theme as shown below:
When you choose dark theme, you will see that the primary, accent, secondary and background colors automatically change, as does the font color.
You’ll need to check and readjust the colors as necessary, using either the palette generator (ensuring a dark background), or by using the color mixer, or a combination of both.

Applying a color to a specific part

Whilst you can select default colors that will apply to all parts within your app, you have the ability to change colors relating to individual parts if you choose. To apply a color to a part, highlight and select the part. Then click on the color icon in the toolbar as shown here:
You can change the color of the part to your primary, accent, or other color as shown in the list.
Alternatively, you can click on the palette icon, and the color mixer will become available to mix your color. You will see that the color has been applied to your part to reflect your choice as soon as you choose it. You can continue to click on a color and see your part change until you’re happy with your color choice. When you click out of the part your choice will remain.
Last modified 8mo ago