Is there a reason ( and a way around ) why `TopApp...

# compose

[Davide Giuseppe Farella]

Is there a reason ( and a way around ) why TopAppBar and BottomAppBar, in dark theme, have a way lighter background of what I set?
I’ve set Color(0xFF1c1c1c) but they’re so light, specially the Bottom one. I can see it very clearly compared to the status bar, which I’ve set as #1c1c1c

[Javier]

The status bar is transparent or translucent

[Davide Giuseppe Farella]

None, solid color.
Anyway the color is way lighter of what it should be. I can set both background and surface as the same color, and see how they look different anyway

[Javier]

Surface changes its color based on elevation I guess

[Davide Giuseppe Farella]

Oh, that sucks 😄

[Davide Giuseppe Farella]

I mean: that’s cool, as long as you want it 😄

[Louis Pullen-Freilich [G]]

Yes, take a look at the 'elevation subsection here

https://material.io/design/color/dark-theme.html#properties

[brandonmcansh]

Yep. In non compose I wrapped the tool bar in an app bar and elevate the app bar with the toolbar getting the surface coloring (or vice versa - can't remember) to work around it. All handled with default theming though

[brandonmcansh]

The nice part of compose is your TopBar doesn't have to be a top app bar and could be a Row{}

[brandonmcansh]

you do lose some of the niceties with TopAppBar though

[Davide Giuseppe Farella]

Is there a preferable way around it? They’re way too bright in dark mode and I don’t really wanna mess up with colors, as is a multiplatform app

[Louis Pullen-Freilich [G]]

Currently there isn't a way to turn off elevation overlays, but elevation overlays (according to specification) are only applied to surface colored components, so you can change the value of surface in dark theme to be different from the color you are setting on the app bars

In the future it will probably be a good idea to have a flag to disable this behavior, but for now just using a different color is a safe way to turn it off

[Anastasia Rozovskaya]

Based on what Javier mentioned above, there is another way around. You can lessen the elevation of TopAppBar for the dark mode, this worked for me.