Want to build better looking apps? Today we are launching some brand new features to help you do just that!
New Themes
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. If none of our colour schemes suit you, you can always define your own!
Plotly Templates
You can also now change the look of Plot components using new templates! This means you can now use all the pre-set Plotly templates or create your own. We’ve also added three new templates to match our new themes. You can learn all about using plot templates in our documentation.
Want to learn more?
Check out the blog post to learn more about these new features:
Learn more about using the new Material Design 3 theme with this handy guide:
Or just start building! Go to the Anvil Editor and create a new Material Design 3 or Rally app!
Happy coding!
Your favorite Developer Advocates,
Brooke and Patricia
Can the color paletts be changed via code? → That would be awesome to implement a dark mode for example.
And if so - is there a way to convert an app build in the original Material Design to the new MaterialDesign3?
I mean copy and pasting the roles should not be a problem but is it possible to upgrade to color scheme dropdown menu?
Right now, you can’t change the colour scheme in code, but I’ll add it to our list.
Technically, you could update the color scheme dropdown menu by editing the app’s yaml file, but the color schemes won’t work with the original Material Design’s theme.css. You’d have to also copy and paste Material Design 3’s theme.css and standard-page.html files. You can clone a new Material Design 3 app locally to copy the yaml file.
Great work! I feel overjoyed and yet sad at the same time because these themes weren’t there for my previous projects (I know there are hacks to switch your theme but I have made too many changes to my current theme already).
Will look forward to trying them out in my future projects!
The conversion went smooth. It took me around 5 hours to do a complete make-over of my app (which is quite large). It was definitely worth it. I recommend you just do it!
Here is what I did:
Created a blank Material3 app, ‘Mat3’, and git cloned it locally for reference.
Took a backup of ‘MyApp’ to be on the safe side.
Created a new branch ‘to-material3’ in ‘MyApp’ and git cloned it locally.
Updated ‘theme/templates.yaml’, ‘theme/parameters.yaml’, ‘theme/assets/standard-page.htm’ and ‘theme/assets/theme.css’ from the same files in the ‘Mat3’ clone, while making sure I kept the roles, css and html that I had added for ‘MyApp’.
Created a PyCharm project in the cloned folder and did a search-all-replace for ‘role: card’ → ‘role: elevated-card’ (ColumnPanel) and ‘role: primary-color’ → ‘role: outlined-button’ (Button).
git pushed the changes to Anvil.
Went through all my forms in Anvil editor to make adjustments and apply filled-button and tonal-card where it made sense (Read the Material 3 documentation)
Merged ‘to-material3’ into the ‘master’ branch and published.
I more or less used the steps documented by @stein to convert my app to m3. Something I noticed when using the dark themes is that the elevated-button shadows are also dark, which works well when using one of the light theme’s but are almost impossible to see in the dark theme’s. This causes the elevated-button type to more or less disappear.
To fix this I created shadow colours for each colour scheme and modified all ‘shadow’ entries in theme.css accordingly. Light for dark and dark for light theme’s.
Below is a screenshot from one of the dark theme’s.
