Change Material Theme color scheme programmatically

Is there a way to change the material theme’s colour scheme or title bar colour programmatically?

I have Customer and Supplier main forms (the new ‘Standard page’ layout) in the same app and would like to have the two forms to have different primary colours in the colour scheme.

Whilst I’m sure you could use some javascript to manipulate the css of the main template , I’d be minded to try something like:

Create a custom HTML form based on the portion of the main template that you want to manipulate.

Make that a custom component and add properties that you can adjust for the effect you want. I suspect roles might help here somehow.

Remove that portion from the main template, replace it with a drop zone and add your new custom component via the designer.

Adjust the properties in the form’s code.

You will probably need javascript in the custom component, but that feels cleaner than messing around with the main template somehow.

All off the top of my head, typed on my phone and not coded up at all, so apologies in advance if it’s of no use!

Thanks @owen.campbell, I am not even close to being able to html or css efficiently enough but… I did find a similar thread (not sure how I didn’t find it before) which provides a work around. Thanks to @andersgs and @stucork for the css role solution.

App-bar colour dynamically change

If there is a way to change the primary and secondary colour on the fly, this would definitely be preferable.

1 Like

Changing the color-scheme dynamically in code isn’t supported so i think the work around is a good approach here. This could be a feature request.

It is possible to change the colour scheme in code, with a little ingenuity!

You can do it by dynamically updating the CSS. I’ve assembled an app to show you how you can do that, with code you can copy into your own apps. Here’s the clone link:

https://anvil.works/build#clone:6DIBMMLRAVNSXNBM=KCVZYQKMYH4VW62NABALWTKY

How it works:

  • The ColourChanger module contains some CSS - I got it by taking theme.css and picking every rule that had a %color substitution
  • The set_theme() function takes that CSS, and substitutes in values for colours such as Primary 500 . It then passes this assembled CSS to the setThemeCss() function, which is written in Javascript.
  • The setThemeCss() function, which lives in a <script> tag under Native Libraries, is a two-line JS function that inserts a new <style> tag into your page, containing the new colour-changing CSS your Python has assembled.
  • Form1 shows you how to use this - it’s really simple! Just assemble a dict with the theme colours you want, and call set_theme()
6 Likes

This works a treat! Very simple to implement.
Thanks @meredydd

Performing some thread necromancy here. For anyone who stumbles onto this while searching for a solution (like I did), I’ve created an all-Python solution to switch between the built-in color schemes. You can also add your own. Info:

2 Likes