DEV Community

Cover image for Announcing New Themes, Templates and Colour Schemes
Patricia Carro Garcia for Anvil

Posted on

Announcing New Themes, Templates and Colour Schemes

Make your Anvil apps look better than ever

Want to build better looking apps? Today we are launching some brand new features to help you do just that!

Now when you create a new app, you’ll have two brand new themes to choose from. The new Material Design 3 and Rally themes are modern and customisable so you can start building amazing new apps.

These new themes come preset with a number of different colour scheme options to change the colour palette of your app. This makes it easy to give your app a complete makeover with just one click. You can also now change the look of Plot components using new templates!

Read more below to learn how to get started making your Anvil apps more beautiful than ever.


New themes

We’ve built two new themes for you to start from when creating a new blank app. These are the Material Design 3 and Rally themes. Check them out!

Material Design 3

A Workflow app, using the new Material Design 3 theme.
A Workflow app, using the new Material Design 3 theme.

Anvil’s new Material Design 3 theme is based on the latest version of Google’s Material Design. Similarly to the previous Material Design, it has a built-in title bar and optional sidebar, but with a more modern feel. It also includes more roles, which allows for greater customisation options.

Read the guide below to learn more about using the new Material Design 3 theme:

--> Material Design 3 Theme Guide

Rally

An Expense Approval app, using the new Rally theme.
An Expense Approval app, using the new Rally theme.

The look of Anvil’s Rally theme is inspired by the Material Design Rally app. It has a sidebar to include all your navigation components, and its look is perfect for data-driven apps and visualisations.


Colour schemes

Not design-eyed? No problem! Customise the look of your apps with brand new colour schemes.

The new color schemes.
The new color schemes.

When you start with an M3 or Rally app, you’ll have the ability to change the look of your app by selecting a pre-defined colour scheme. These new colour schemes are designed to effortlessly change the feel of your app, without having to think too hard about it.

…or create your own

If none of the colour schemes that we offer suit your taste, you can define your own. Check out this handy guide where we show you how to do just that:

--> Creating a custom M3 colour scheme


Plotly templates

You can now change the appearance of Plot components using Plotly templates! This means you can now use all the pre-set Plotly templates or create your own. You can learn all about using plot templates in our documentation.

A plot styled using different templates.
A plot styled using different templates.

On top of that, we’ve also added three new templates to match our new themes. You can change your plotly plots to "material_light", "material_dark" or "rally" to have them fit the color scheme of your app. You will still be able to modify the look of your plots using the layout property, but you can now also choose the starting point from which to do so.

You can change the default template of all the plots in your app…

Plot.templates.default = "material_light"
Enter fullscreen mode Exit fullscreen mode

…or each plot individually:

self.plot_1.layout.template = "material_light"
Enter fullscreen mode Exit fullscreen mode

What next?

Start building with our new themes! We love to see what you create with Anvil, so be sure to share your new apps on our Show and Tell Forum.


More about Anvil

If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

--> Try Anvil

Top comments (0)