Introducing New Themes and Colour Schemes

Hi everyone!

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.

Colour Palettes

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

23 Likes

That look awesome! Great work! :fire:

Two questions:

  1. Can the color paletts be changed via code? → That would be awesome to implement a dark mode for example.
  2. 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?

Thanks,

Mark

3 Likes

Hi Mark,

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.

3 Likes

Understood - thanks for the fast response :ok_hand:

3 Likes

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!

1 Like

I converted my app to Material 3, and now it looks 10x better!

Thanks @brooke and @patricia!

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:

  1. Created a blank Material3 app, ‘Mat3’, and git cloned it locally for reference.
  2. Took a backup of ‘MyApp’ to be on the safe side.
  3. Created a new branch ‘to-material3’ in ‘MyApp’ and git cloned it locally.
  4. 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’.
  5. 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).
  6. git pushed the changes to Anvil.
  7. 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)
  8. Merged ‘to-material3’ into the ‘master’ branch and published.
11 Likes