https://kotlinlang.org logo
#compose
Title
# compose
d

Davide Giuseppe Farella

08/31/2020, 6:46 PM
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
j

Javier

08/31/2020, 6:55 PM
The status bar is transparent or translucent
d

Davide Giuseppe Farella

08/31/2020, 6:57 PM
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
j

Javier

08/31/2020, 7:07 PM
Surface changes its color based on elevation I guess
d

Davide Giuseppe Farella

08/31/2020, 7:08 PM
Oh, that sucks 😄
I mean: that’s cool, as long as you want it 😄
l

Louis Pullen-Freilich [G]

08/31/2020, 7:38 PM
Yes, take a look at the 'elevation subsection here https://material.io/design/color/dark-theme.html#properties
🙏 1
👍 1
b

brandonmcansh

09/01/2020, 1:59 AM
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
The nice part of compose is your TopBar doesn't have to be a top app bar and could be a Row{}
you do lose some of the niceties with TopAppBar though
d

Davide Giuseppe Farella

09/01/2020, 3:38 PM
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
l

Louis Pullen-Freilich [G]

09/01/2020, 3:51 PM
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
a

Anastasia Rozovskaya

09/16/2021, 4:06 PM
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.
3 Views