Using theme variables in Layouts mode

So, since the New MD3 and the new Routing Dependecy were announced I was trying them out to understand better how to use it and to create new apps in the new design.

However, currently my apps offer a customizable theme using trick in this comment: Change Theme Colour Scheme values Programmatically - #2

I noticed that all the HTML and CSS is inside the dependency. So I can’t change the CSS to use colors variables. Is the new Layout mode and the Customizable Theme just not compatible then?

1 Like

It might be useful - anvil-extras added support for a theme updater recently (v2.7)

It uses the anvil.app.theme_colors object and updates the colors

Here’s the file

anvil-extras/client_code/theme.py at main · anvilistas/anvil-extras · GitHub

It currently uses the Material 3 rather than the M3 beta
but there’s a PR that will update this

Fix variant bug and use m3 beta theme colors by s-cork · Pull Request #579 · anvilistas/anvil-extras · GitHub

Here’s an example that copies this file into an app and allows you to do theme switching

7 Likes

This is almost the same way that I do it, but I never knew that anvil.app.theme_colors was updatable. I always thought that it was read-only or that changing it wouldn’t result in changes to the colors used by the UI.

I’m gonna try it later to change the way I do it to use this instead of updating css variables. Thanks!

1 Like