You are currently viewing the new Anvil Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the new Anvil Editor Docs

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’.

Location of the Colour Schemes menu within an app

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.

Location of the Colour Schemes menu within an app

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.

Choosing the background colour of a Button
from the Properties Panel

Choosing the background colour of a Button
from the Properties Panel

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']
This is an advanced feature. You don’t need to write HTML and CSS to use Anvil!

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.

The &lsquo;Choose Colour Scheme&rsquo; dropdown menu lets you
choose a different colour scheme.

The ‘Choose Colour Scheme’ dropdown menu lets you
choose a different colour scheme.

The &lsquo;Choose Colour Scheme&rsquo; dropdown menu lets you
choose a different colour scheme.

The ‘Choose Colour Scheme’ dropdown menu lets you
choose a different colour scheme.

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:

Changing the Primary Colour in a Material Design app

Changing the Primary Colour in a Material Design app

Changing the Primary Colour in a Material Design app

Changing the Primary Colour in a Material Design app