Theme

Define color schemes for your app and switch between them easily.

The module includes the definition of the anvil standard Material Design color schemes and those are used as the default. You can also define your own color schemes and use them in the same way.

Examples

Create an instance of the theme.Colors class:

from anvil_extras import theme

colors = theme.Colors()

By default, that instance will have a schemes attribute that contains the standard Material Design color schemes.

You can use the instance to set the color scheme of your app to either the ‘light’ or ‘dark’ variant of one of those standard schemes.

When the object is instantiated, it will set the current scheme to the first defined scheme - ‘Material’ in this case - and the variant to the first defined within that scheme - ‘dark’ in this case.

You can change those defaults by passing arguments to the constructor. e.g. to set ‘Manarola Dark’ as the default scheme:

from anvil_extras import theme

colors = theme.Colors(scheme="Manarola", variant="dark")

You can then use the your Colors instance to set the color scheme or variant of your app at any time:

colors.scheme = "Mykonos"
colors.variant = "light"

If your scheme has two variants, you can toggle between them:

colors.toggle()

If you want to set both the scheme and variant at the same time, you can use the set_scheme method:

colors.set_scheme("Material", "dark")

colors.set_scheme("Material", "dark")

You can define your own color schemes and use them in the same way. For a material design scheme, follow the Creating a custom Material Design 3 color scheme docs.

my_schemes = {
     "scheme_one": {
         "light": {
             "primary": "#ff0000",
             "secondary": "#00ff00",
             "background": "#0000ff",
             "text": "#ffffff",
             "accent": "#ffff00",
             "disabled": "#888888",
             "divider": "#444444",
         },
         "dark": {
             "primary": "#ff0000",
             "secondary": "#00ff00",
             "background": "#0000ff",
             "text": "#ffffff",
             "accent": "#ffff00",
             "disabled": "#888888",
             "divider": "#444444",
         }
     },
     "scheme_two": {
         "light": {
             "primary": "#ff0000",
             "secondary": "#00ff00",
             "background": "#0000ff",
             "text": "#ffffff",
             "accent": "#ffff00",
             "disabled": "#888888",
             "divider": "#444444",
         },
         "dark": {
             "primary": "#ff0000",
             "secondary": "#00ff00",
             "background": "#0000ff",
             "text": "#ffffff",
             "accent": "#ffff00",
             "disabled": "#888888",
             "divider": "#444444",
         }
     }
}

colors = theme.Colors(schemes=my_schemes)
colors.scheme = "scheme_two"
colors.variant = "light"