JetBrains Compose for Desktop title bar background color or dark mode

Question

Is there a way in JetBrains Compose for Desktop to change the title bar background color or just change it for dark mode? I'm using MacOS, so the bar can be light or dark. It would also be fine to make titlebar itself invisible (but keep the close, minimise and maximise buttons) and create your own view below it.

I was looking in the compose window code, but couldn't find it there.

Answer 1

Compose is build on top of Swing, and it doesn't seems possible to change the title bar color.

But at least you can follow system dark/light mode with the following option in your build.gradle.kts:

compose.desktop {
    application {
        // ...
        nativeDistributions {
            // ...
            jvmArgs(
                "-Dapple.awt.application.appearance=system"
            )
        }
    }
}

An other option is building your own title bar, like shown in this tutorial, but this will also hide the system buttons, which is far from perfect.

Answer 2

Building on the tutorial referenced in the above answer, I created an extension function to the DialogWindowScope and added it as the first element in an undecorated Dialog

Dialog(...) {
    Column (...) {
        dialogTitleBar("dialog title") { on close clicked }
    }
}

@Composable
fun DialogWindowScope.dialogTitleBar(
    title: String? = null,
    onClick: () -> Unit
) = WindowDraggableArea{
    Column(modifier = Modifier.fillMaxWidth()) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                modifier = Modifier.padding(start = 10.dp, bottom = 4.dp, top = 4.dp),
                color = MaterialTheme.colors.primary,
                fontSize = MaterialTheme.typography.body2.fontSize,
                text = title ?: ""
            )

            CloseButton(onClick)
        }
        Divider(
            Modifier.fillMaxWidth(),
            color = MaterialTheme.colors.primary.copy(alpha = .95f)
        )
    }
}

@Composable
fun CloseButton(onClick: () -> Unit) {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    Icon(
        modifier = Modifier.size(24.dp)
            .background(if (isHovered) Color.Red else MaterialTheme.colors.onPrimary)
            .hoverable(interactionSource)
            .clickable(onClick = onClick),
        imageVector = Icons.Default.Close,
        contentDescription = "Close",
        tint = MaterialTheme.colors.primary
    )
}```