Colour Schemes

Some Anvil app themes have built-in colour schemes. You can find the colour scheme of your app by navigating to the ‘Theme’ tab in the Sidebar menu, then choosing ‘Colour Scheme’.

Some Anvil app themes have built-in colour schemes. You can find the colour scheme of your app by choosing ‘Colour Scheme’ under ‘Theme’ in the App Browser.

Using the colour scheme

In the Anvil Editor

Colour scheme colours can be used in the Properties Panel to change the appearance of a component. Choose the paintbrush icon next to a property to choose a colour from the app’s colour scheme.

In Python code

From Python code, you can access your app’s colour scheme using app.theme_colors, which returns a dictionary of the form {'Colour Name': '<value>'}. Colours can then by accessed by indexing the dictionary:

#set the background colour of the Button to Secondary
self.button_1.background = app.theme_colors['Secondary']

In CSS code

Your app’s colours are accessible in CSS code by using %color:Colour Name%.

/* Set the background and foreground colours of the filled-button role*/
.anvil-role-filled-button {
    background-color: %color:Primary%;
    color: %color:On Primary%; 
}

Changing the colour scheme

You can also change individual colours by modifying the colour’s code. (Any type of color value valid in CSS will work.)

Single colour scheme

Newer themes (currently the Material Design 3 and Rally themes) have a dropdown menu that lets you choose from a number of pre-defined colour schemes.

These newer themes follow the colour system defined by Google’s Material Design 3 design system. Learn how to create a custom Material Design 3 colour scheme for your apps by following the how-to guide: Creating a custom Material Design 3 colour scheme

Multiple colour palettes

Older versions of the Material Design system, as used by Anvil’s Material Design and Classic themes, have simpler colour schemes built around primary and secondary hues. There are separate dropdown menus for changing the theme’s primary and secondary colours:

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.