What's the workflow I'd need to follow in upgrading an app to MD3?

Anvil Q&A
1

What I’m trying to do:
Establish whether it’s worth upgrading a very old, very large existing Material Design app, to Material Design 3.

This app has around 200 distinct hand-built forms, a custom font, and menu-selected color scheme. It also uses the Tabulator dependency.

I’ll be creating several “sister” apps, and it would make sense for them all to keep the same theme, look, and feel. MD3 is more modern, has a few nice usability features, and will probably be better-supported going forward. But if it’s a lot of work to convert the big app, I’ll have to stick with MD for now.

2

I have an app called Standard Theme. The app has one form with one button, one drop down, one […]. One of each control, used to check that the css works as expected.

The app does nothing, it just holds all the styles, colors, roles and some javascript.

Every time I create a new app, I:

  • Create the app
  • Clone it to my pc
  • Delete its theme folder
  • Copy the theme folder from the Standard Theme app (which has been cloned to my pc long time ago)
  • Push the new app

Problems with existing apps could show up if you have used roles incompatible with each other.

2 Likes
3

Thanks!

I’ve used several of the old (MD) standard roles. I don’t think I’ve created any new ones. There were tweaks to allow buttons to be mixed-case, but MD3 allows that natively.

4

Two of the most important changes that come to mind are removing the transformation to uppercase on buttons and making the resize only vertical on text areas. There are many other tweaks, for example for footer and header, and new rules for many company standard roles, but these two are the ones that come to mind:

.btn {
  text-transform: none !important;
}

textarea {
  resize: vertical;
}

The reason why I opted for using that ugly !important rather than removing the text-transform rule from the original definition of .btn, was to make future maintenance easier: by not modifying the original content of the css file and only adding my own rules at the top of the file, it will be easier to apply similar changes when the next theme comes out and I want to upgrade my Standard Style.

One day when I have time I will upgrade to MD3 too.
Ahahah!!

5

Pls forgive my ignorance, but is this more involved than just changing the themes.css file? Asking for a friend :slight_smile:

1 Like
6

It depends.

I have al my apps cloned to my pc anyway. It’s my own rule.

I need it for complex apps, so I can work and debug the logic on PyCharm, I clone also the simple ones so they are all there. I can do a text search across folders, check what I did where and when, and, of course, I can change the themes folder.

Updating the whole folder includes the css and other files like the page template.

So for me, it’s just a few seconds.

7

Hi @p.colbert ,

here are the steps I took to upgrade my old MD app: Introducing New Themes and Colour Schemes - #7 by stein

I don’t know if this is still an issue, but I also had to make some changes in the css for the standard MD3 theme: Material design 3 adjustments