I'm having issues with edge-to-edge and OS Dark Th...

# compose

[Pablo]

I'm having issues with edge-to-edge and OS Dark Theme. I'm using Modifier.safeDrawingPadding() It is explained here. "_this ensures that interactable elements don't overlap with the system UI, it also means that none of the app will draw behind the system UI to achieve an edge-to-edge effect_".

The issue is that it leaves white spaces top and bottom of the screen even in Dark Mode. I checked other apps of the OS like chrome, and these spaces are dark, not white. I can't find anywhere why this happens and how to solve it. Supposedly this is the correct function to add the minimum required padding to avoiding overlapping with top or bottom OS bars.

[Stylianos Gakis]

Put the color before this padding is applied

[Pablo]

Hi, what do you mean? I'm not setting any color there. The app has his theme, generated with official material design theme generator, supporting dark theme and light theme.

[Pablo]

I just apply the padding like google did, on the main composable of my app

[Pablo]

everything turns dark theme but the top and bottom padding added by the that function to avoid overlapping OS components in status bar and bottom bar, which appears white

[Pablo]

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                App(modifier = Modifier.safeDrawingPadding())
            }
        }
    }
}

[Stylianos Gakis]

App at some point applies a color. Probably due to you using a Surface somewhere.

[Pablo]

that is the main and single activity of my app, you can see how I initialize my App composable with AppTheme in those lines

[Pablo]

to be more clear, this proces exactly the same issue:

AppTheme {
    Box(modifier = Modifier.safeDrawingPadding().fillMaxSize().background(Color.Black))
}

In dark theme, the padding up and bottom is white

[Pablo]

image.png

[Stylianos Gakis]

We're back to this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1741650679042919?thread_ts=1741647749.285999&cid=CJLTWPH7S

[Pablo]

But Stylianos, what you mean?

[Pablo]

I can't understand you

[Pablo]

I don't put colours

[Pablo]

I'm using a theme generated by official theme generator from material design 3, which supports dark theme

[Pablo]

supposedly the colors are already being applied before the padding

[Pablo]

when I embed the "Box" inside "AppTheme"

[Stylianos Gakis]

You do:

Box(modifier = Modifier.safeDrawingPadding().fillMaxSize().background(Color.Black))

Do this instead

Box(modifier = Modifier.fillMaxSize().background(Color.Black).safeDrawingPadding())

[Stylianos Gakis]

supposedly the colors are already being applied before the padding

Why do you think that?

[Stylianos Gakis]

AppTheme does not paint anything on the screen. Only sets up composition locals.

If you do

setContent {
 AppTheme {
 }
}

Do you expect it to paint black in dark mode and white in light mode?

[Pablo]

let me explain better

[Pablo]

I'm not painting any color in any part of the application

[Pablo]

all the colors of all the components are specified on the theme

[Pablo]

I'm not doing .background anywhere

[Pablo]

so, how can I put .safeDrawingPadding() after setting the colors if I'm not setting the colors anywhere?

[Pablo]

that Box sample was not my app, was a sample but now I understand it's not a good one

[Pablo]

on the other hand, doing what you tell me, .background(Color.Black).safeDrawingPadding() the padding is black on that sample, but how can I do that with my real app if I'm not specifying colors anywhere?

[Pablo]

App is the container of the screens, manages the navigation, this is the content of App:

Box(modifier = modifier.fillMaxSize()) {
    NavigationSuiteScaffold(

[Pablo]

I tryed moving the safeDrawingPadding function to inside App's Bos composable, but didn't work, the issue is the same:

Box(modifier = modifier.fillMaxSize().safeDrawingPadding()) {
    NavigationSuiteScaffold(

[Stylianos Gakis]

I'm not doing .background anywhere

Do you have any surface anywhere in your app?

[Pablo]

no, searched, and no

[Stylianos Gakis]

You should put a surface around your App composable, and after you set the theme.
This will ensure the right background color is added, and that the right content color composition local is set.

[Pablo]

great stylianos, thank you very much

[Pablo]

that worked

[Pablo]

how did you manage to find that solution?

[Pablo]

after reading carefully a lot of documentation and doing a lot of research, didn't found anything related to this solution

[Pablo]

on the other hand, you seem to have a lot of knowledge in this concept, maybe do you know why the splash screen added by the OS into our apps don't get black background when dark theme is ON? I'm not using any custom splash screen, it's simply the one added by the system withoud even adding the dependency for customizing it. That splash should be affected by OS/App dark theme, but instead of that, is always white too

[Stylianos Gakis]

https://developer.android.com/develop/ui/views/theming/darktheme#change-themes
if you call UiModeManager#setApplicationNightMode correctly the splash screen should also reflect the choice

[Stylianos Gakis]

how did you manage to find that solution?

Well, if the color is inseted by the modifier you put in there, it's quite straightforward I'd say to imagine that you just need the color to be set before that inset.

[Stylianos Gakis]

You should try searching in this slack channel old thread with questions like yours. This question regarding splash screen colors was discussed here too https://kotlinlang.slack.com/archives/CJLTWPH7S/p1725377765354019?thread_ts=1725345760.365989&cid=CJLTWPH7S

[Pablo]

thanks, but that is not related to this issue. I'm not using Splash Api. My app is displaying the automated splash generated by the OS when app is starting. That splash shows the icon of the app, but the background doesn't paint black with night theme.

[Pablo]

In that link, that developer is using splash api for developing a custom splash, and his app allows to customize light and dark separately from the system

[Pablo]

so my case is completly different

[Pablo]

as I'm not using splash api, OS should care of applying dark theme, but is not doing it

[Pablo]

I wonder why and how to solve this

[Pablo]

I'm using the AppTheme generated by official material design 3 app theme generator:

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit,
) {
    val colorScheme = when {
        darkTheme -> darkColorScheme
        else -> lightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content,
    )
}

[Pablo]

so I'm not calling UiModeManager#setApplicationNightMode anywhere because I'm not allowing user to customize it

[Stylianos Gakis]

I'm not using Splash Api. My app is displaying the automated splash generated by the OS when app is starting.

Then I don't know