How Themes Work in Anvil

Anvil provides several “themes” that describe the look and feel of your apps. This page discusses how they work under the hood. If you just want to use one, check out Material 3.

Built-in themes

The first set of themes included with Anvil are “built-in” themes. They use the standard Anvil components, and CSS styling to make Anvil apps appear differently, with HTML layouts. These themes are called “built-in” because their styling is included inside the app repository, as HTML and CSS in the app’s Assets. This makes them easy to customise, but difficult to change or upgrade.

To edit a built-in theme, edit theme.css in your app’s assets to adjust the appearance of your app’s components. To adjust your page structure, edit your app’s HTML layouts (typically called standard-page.html, although you can of course have more than one).

Dependency themes

Newer themes, such as the Material 3 theme, are separate Anvil apps that are used as dependencies. They provide a combination of layouts and custom components that can be used to build an app in a particular style.

Instead of using the built-in Anvil components, dependency themes can use custom components, which makes it easier to express the details of a particular design system rather than trying to repurpose a fixed set of components. Likewise, using layouts allows for more configurability than fixed HTML layouts.

Dependency themes can be upgraded easily (just select a different version in the Dependencies dialog), and switched in and out. Because they are built with Python code, they can have interactive, design-time behaviour that is specific to the design system.

Multiple dependency themes can be added to an app at the same time (for example, to use useful components from multiple themes).

Do you still have questions?

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