1

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.

Kevin van Mierlo
  • 9,554
  • 5
  • 44
  • 76

2 Answers2

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.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • Thanks for the response! Too bad it's not possible, would've loved just a dark title bar. But the jvmArgs is nice and could be set to dark instead of system as well, didn't know that could be done. It's hard to find resources about it. The thing I found as well is `putClientProperty("apple.awt.fullWindowContent", true)` `putClientProperty("apple.awt.transparentTitleBar", true)` `putClientProperty("apple.awt.windowTitleVisible", false)`. Which will make it invisible, but keeps the system buttons. If I or you or somebody else finds the answer I'll wait for a bit, otherwise I will accept yours – Kevin van Mierlo Jan 31 '22 at 07:46
0

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
    )
}```
TimA
  • 21
  • 3