App-bar colour dynamically change

Anvil Q&A
#1

Hello Anvil user.

I have an app that has a user side and an admin side. I am using the Material Design Theme. I want to help highlight this by dynamically changing the app-bar’s (top horizontal bar) colour from primary to secondary depending on whether the user is in Admin mode or User mode.

I have dug into the CSS and see the relevant portion to change. I could create a new entry in the CSS theme, and use some javascript to make the change. But, that seems to defeat the purpose of using Anvil.

Any good ideas of how to do this without resorting to CSS+JS?

It seems the natural thing would app-bar to be another object with a colour attribute. But, I don’t think it currently exists as such.

If that were the case, when I navigate to the admin portion, I could add something like:

self.app-bar.colour = 'secondary'

And, when navigating back to the user portion, I could add something like:

self.app-bar.colour = 'primary'

Thank you in advance for any help.

Cheers. A.

Change Material Theme color scheme programmatically
#2

No Js required - just a bit of CSS will do (and not a lot).

Go to the roles and create a new role called
secondary-app-bar

55
(I couldn’t work out how to restrict to ‘Form’ so had to Allow for all components)

in theme.css add the following

.anvil-role-secondary-app-bar .app-bar {
  background-color: %color:Secondary 500%;
}

Now you can dynamically change the role of the MainForm in your python code.
Either in design view under appearance

or Somewhere in the form itself

self.role = 'secondary-app-bar'

or anywhere in your app

get_open_form().role = 'secondary-app-bar'
5 Likes
#3

Thank you @stucork. It worked a treat.

I added this function to my home form, which I call when navigating around:

def set_app_bar_colour(self, cmpt):
    """
    If component is admin, then set role to secondary
    """
    self.role = None if cmpt != 'admin' else 'admin-app-bar'

And, now I get the desired effect.

Cheers. A.

1 Like