Using CSS to style toolbars

Scripture App Builder
1

I’m currently attempting to style the App Toolbar. I can use CSS on ui.bar.action to change the background color - so I know I’m trying to use the correct identifer - but I’d like to add a drop shadow to the app toolbar and possibly increase the padding. I’ve tried using box shadow and dropshadow css without avail. Anyone have any ideas?

I’ve tried this for example:

ui.bar.action {
background-color: BackgroundColor;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
}

Additionally, is there no way to change the color of the header menu button, text, audio button, etc?

I included a pic of where I’d like to change the font color/icon color and another arrow where I’d like to add a subtle drop shadow. Thanks for the help!

Screen Shot 2022-12-14 at 11.38.13 AM
Screen Shot 2022-12-14 at 11.38.13 AM940×1888 156 KB

2

The App Toolbar is not HTML, but Native UI. SAB uses CSS to consistently specify color for UI Styles, but not all CSS properties are applied.

Thanks,
Chris

3

Thanks brother! Ok, so in laymen’s terms - dropshadow or box shadow would not be supported?

What about changing the app toolbar icon colors? Are those locked as white?

4

Chris, I’d like to confirm, is it possible to change the color of the text/hamburger/etc of the main action bar?

5

@ChrisHubbard Would LOVE to be able to change the color of the Action bar icons. Since they must remain white, it prevents us from using a lighter action bar, which significantly dates the app. Is that a complicated fix? Or is it already available to be changed?