Themes and Styling
When you create an Anvil app, you’re prompted to choose a theme (such as “Material Design”). Themes contain Form templates, so you have some options to pick from when creating a new Form. For example, the Material Design theme contains Form templates for a page with a navbar and optional sidebar, and a simple blank page.

The Material Design Theme has two pre-defined Form types (plus Custom HTML Forms).
Some themes also define Roles; these are particular styles you can add to components to modify them in ways that fit well with the theme. For example, the Material Design theme defines a Card role that you can apply to ColumnPanels:

Styled components using Roles in the Material Design theme.
Themes consist of:
- Assets that can be applied to and used in your Forms (HTML templates, CSS files, and images).
- Roles that you can apply to components.
Customising the theme
The theme is defined by HTML and CSS files that are available in the Assets Editor (under “Assets” in the App Browser).
You can add, remove and edit theme assets in the Assets Editor. Choose the asset you wish to edit from the drop-down box, and make any necessary changes. You can rename or delete the asset by clicking the buttons in the top-right.

You can edit the HTML and CSS that go into your app.
Roles
Roles work by applying CSS classes to components. For example, a component with a role named foo
will get the .anvil-role-foo
CSS class applied to it.
For themes that have Roles, you can add new roles in the Roles Editor (under “Roles” in the App Browser). You can write CSS rules in a CSS file in the Assets Editor to define how Roles affect components.
(For Material Design, theme.css
is a good place: search for .anvil-role-card
for examples.)

Roles modify the look and feel of components by applying CSS classes. Some Roles come pre-defined in Themes.
Changing the HTML template of a Form
You can change the HTML template of a Form by modifying its html
property.
If you set the html
property of a Form to the name of an HTML file from Assets, the Form will use it as its template.
You do this in a drop-down box in the Properties Panel when the Form is open and no components are selected.
html
property, they are simply ColumnPanels.
Selecting the HTML template of a Form using the Form’s Properties Panel.
If you select ‘Custom HTML’, you can write HTML directly into the Form. This is useful if you want to tie the HTML template to this Form rather than making it a global Asset.
Adding your own asset files
You can add your own files to Assets. These could be additional HTML templates, CSS files, JavaScript files or images that you use in your Theme.
To upload or create a file, use ‘Create file’ or ‘Upload file’ in the dropdown box in the Assets Editor.

Creating a new Asset file

Uploading an Asset file
Asset file URL
You can also access Asset files via URL. They are hosted at
<your-app-url>/_/theme/<filename>
For example, if I have an asset named earthrise.jpg
in an app published at myapp.anvil.app
,
my file is hosted at
https://myapp.anvil.app/_/theme/earthrise.jpg
This allows you do things like setting your asset as the source
property of an Image component.