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.
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 3 theme defines an Elevated Card role that you can apply to ColumnPanels:
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.
The theme is defined by HTML and CSS files that are available under “Assets” in the App Browser.
You can add, remove and edit theme assets from the App Browser. Choose the asset you wish to edit and a new tab will open in the Editor. You can rename or delete assets by clicking the dots menu next to the asset in the App Browser.
Changing the HTML template of a Form
You can change the HTML template of a Form by modifying its
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.
htmlproperty, they are simply ColumnPanels.
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
To upload or create a file, use ‘Create file’ or ‘Upload file’ in the dropdown box in the Assets Editor.
To upload or create a file, click on “Create or upload Asset” under “Assets” in the App Browser. This will bring up a menu for creating and uploading new Assets.
Most assets are lazily loaded when running the app, except for html files and the
theme.css file, which are eagerly loaded.
Asset file URL
You can also access Asset files via URL. They are hosted at
For example, if I have an asset named
earthrise.jpg in an app published at
my file is hosted at
This allows you do things like setting your asset as the
source property of an Image component.
Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.