CODEWITHSUNDEEP
compose-desktopcompose-multiplatform
Kevin van Mierlo
Kevin van Mierlo

Reputation: 9814

JetBrains Compose for Desktop title bar background color or dark mode

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.

Upvotes: 3

Views: 3753

Answers (4)

AmirHossein Abdolmotallebi
AmirHossein Abdolmotallebi

Reputation: 624

I found another library which you can use it in your project.

  • this library is designed for swing but since compose also uses swing for its window management under the hood, you can use this library as well.

  • it is multiplatform (windows/linux/mac) and also handles custom window decorations out of the box

Upvotes: 0

AmirHossein Abdolmotallebi
AmirHossein Abdolmotallebi

Reputation: 624

check this for custom title bar

I wrote this to solve my problem in windows but you should get the idea

I hope jetbrains team provide a solution out of the box

Update

Also check Jetbrains Jewel

It seems they used native buttons (for windows and mac ,but linux buttons are custom) as I read their code

Upvotes: 4

TimA
TimA

Reputation: 21

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
    )
}```

Upvotes: 0

Phil Dukhov
Phil Dukhov

Reputation: 88172

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.

Upvotes: 5

Related Questions