Change AppToolBar Background Color

[allenvpn312]

Is there a way to change the AppToolBar background color? I tried appBar.getElement().getStyle().set("background", "var(--lumo-contrast-10pct") but it seems not to work. Thank you!

[allenvpn312]

I also tried using a custom style via css and it the background is still show as default. [part~="app-bar"] { border: 1px solid var(--lumo-shade-10pct); background-color: black; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

[appreciated]

@allenvpn312 Have you tried setting?

--app-layout-bar-background-color

[allenvpn312]

Thank you for the quick response. To be honest, I'm lost on how to do this. Could you provide a simple example? Also, I'm using the app layout with Vaadin 23 if that helps. Thank you

[appreciated]

Untested but try the following:

html {
  --app-layout-bar-background-color: black;
}

[allenvpn312]

Ahhh...I understand now. Thank you