Is there a way to change in App top bar color?

Anvil Q&A
1

What I’m trying to do:
When a user on Andorid installs the web app, then opens it, it will have a top bar (with the clock and battery indicator). This bar is blue. Is there any way to change that?

What I’ve tried and what’s not working:
Looked through what I think are all settings, but I might be missing something.

My app is based off of a blank template.

Example: https://parapeet.com

2

I can’t see the app bar in your webpage. Propably visible only if you log in.

You can change that attribute only with CSS.
image

If you can’t find what is exactly controlling the style you want to change you can use Google Chrome ctrl + shif + I to check the exact structure of the page or software.

It takes time to get used to it, but it does help to test the style before you apply it in the code.

What you are looking is called ‘app-bar’

image
image1119×31 6.4 KB

In original Material 3 Design from Anvil that part controll the color:

/* Components: App Bar */
.app-bar {
  min-height: 56px;
  padding: 0 16px 0 72px;
  position: fixed;
  width: 100%;
  
  line-height: 40px;
  font-size: 20px;

  background-color: %color:Surface%;
  transition: background-color 250ms;
  -webkit-transition: background-color 250ms;
  -moz-transition: background-color 250ms;
  -o-transition: background-color 250ms;
  
  z-index: 1;
}

Just change that line:
background-color: %color:Surface%;
to HTML color, RGB or to some color from the Colour Scheme in anvil.

3

Thank you for the response, and I will try to specify exactly what I mean by app bar, because it’s not the one that is part of a material design theme or the like.

I think an image might be required to explain:

1000009120
10000091201080×2400 100 KB

I mean the baby blue bar on top. I am guessing that’s the Anvil color, and i am hoping to customize it.

4

Ok in that case I can’t help you. It’s indeed blue even on iPhone but with different icons/options.
If it has something to do with anvil. It is somwhere in theme.

Try to change all the colour schemes with blue colour and maybe you will find which one is controlling it.

5

Found the answer:
image
Search for #2b5797 and you will find that tag.

Here is a link with more info: Meta Theme Color and Trickery | CSS-Tricks - CSS-Tricks

And here is how to change it by adding this line to native queries:

document.querySelector('meta[name="theme-color"]').setAttribute("content", "#FFFFFF");

Would love to have a direct way to change it, and I think originally Anvil is supposed to be able to do that with themes. Seems though that there is still a bug in themes, but until it is fixed that is the way to go I think, let me know if you have other ideas.

1 Like