Make your apps look pretty with the new Material 3 Theme (Beta)

[patricia]

Hi everyone!

We are very excited to announce the beta release of our new Material Design 3 theme! But this is more than just another theme – it’s a new way of building themes in Anvil.

---

A new Material 3 theme

This theme is based on Google’s Material 3 design system. Unlike previous themes, this doesn’t just mean styling the built-in Anvil components, plus some static HTML thrown in. This theme provides loads of brand-new components that precisely implement M3’s look and behaviour, and dynamic, responsive layouts to describe M3 page structure.

We’ve also added extra customisation options that make it easier to style your apps without CSS. The M3 components offer M3-specific styling properties, as well as full control over their margin and spacing:

Bonus: Yes, these spacing properties are now available on built-in Anvil components!

We are releasing a new theme based on the specs and guidelines of Google’s Material 3 design system.

To learn more about the New Material 3 theme, take a look at the documentation – then head to the Anvil Editor and create a New M3 app!

A new approach to themes

The new Material 3 theme is built entirely in Anvil. It builds on all the features we’ve been releasing over the last year: it’s built with custom components driving HTML from Python, with live updates made possible by the new designer, tied together with layouts.

In fact, the Material 3 theme is just an Anvil app, used as a dependency. We’ll be putting it up on GitHub soon so you can take a look!

Everything that we did to build M3 uses public APIs – so everything we did, you could do to create your own theme. (Hint, hint.)

Because the New Material Theme is just an Anvil app, updating to new versions is also easy! Just go into your Dependencies and choose a new version. (You can even add it to existing apps – its third-party dependency key is 4UK6WHQ6UX7AKELK – although it might fight with your existing CSS.)

And more…

Read the full announcement blog post to learn more about the new Material 3 and all the handy features that come with it:

Introducing the new Material 3 Theme

Get started

To get started simply head to the Anvil dashboard and create a New Material 3 app.

This is a beta release, which means there might be some issues. As always, please let us know in the Q&A forum if you run into trouble. We’re looking forward to hearing what you think!

Happy coding!

[duncan_richards12]

Amazing! I like the new direction y’all are taking for applying new themes as dependencies!

[stein]

Brilliant! You’ve done an excellent job!

[owen.campbell]

Excellent job. That adds a whole world of possibility.

[Harlequin]

Thanks @patricia ,
This is fantastic. Just the kind of news I was hoping for. Definitely a game changer for my projects!

[stein]

I have started to use the M3 theme in my app.

It is a joy to work with, and the new components are amazing!

Thank you @patricia and @brooke!

[stein]

Having used the M3 theme, I think it is a huge step forward for Anvil! Apps look and feel so much better!

If you want to “cross the chasm” from the early adoptors to appeal to a broader market, I think you should start emphasizing beautiful apps in your messaging and show some beautiful examples.

[gabriel.duro.s]

I completely agree with this. I’ve been using anvil for about 5 or 6 years, so I saw a lot of internal development with the introduction of packages, the beta editor, beta designer, MD3 (now classic MD3), new MD3, layouts, etc.

The apps made with anvil never were ugly or nothing like it, but they were never as beautiful as they can be now.

I feel like every old app looked the same because, while it was easy to create a new great app, it wasn’t that easy for everyone to adapt and change the visual. Now, mainly with layouts, it’s so much easier to make distinct and unique apps and easily pretty.

Also, shoutout for how MUCH we have been getting lately. It’s been long since we received the layouts update, but now the new M3 Beta and Routing.