Hey! What would be the best way to have a native look&feel `title bar` on MacOS and Windows for ...

# compose-desktop

[Max]

Hey! What would be the best way to have a native look&feel title bar on MacOS and Windows for my Compose Desktop window?

Meaning:
• 🌙 dark mode if system is in dark mode
• 📏 Double the height, like default macOS title bar
For Comparison the Slack app title bar on top, Compose Desktop below.

[Michael Paus]

Have you tried

val isMac = System.getProperty("os.name").startsWith("Mac")

if ( isMac ) {
    System.setProperty("apple.awt.application.appearance", "system")
}

in your desktop main method already?

[Max]

@Michael Paus just tried it, by forcefully adding the line (System.setProperty("apple.awt.application.appearance", "system")), the window didn’t change however.

[Michael Paus]

In my application it does. When I switch the theme from light to dark in the macOS settings, the color of the title bar changes in the running application.

[Max]

@Michael Paus this is my most basic code:

fun main() = application {
    System.setProperty("apple.awt.application.appearance", "system")

    Window(
        onCloseRequest = ::exitApplication,
        title = "KMP-Template-Project",
    ) {
        Box(
            modifier = Modifier
                .width(400.dp)
                .height(300.dp)
               
        )
    }
}

Could you maybe share your entrance main.kt file?

[Michael Paus]

fun main(args: Array<String>) {

    val isMac = System.getProperty("os.name").startsWith("Mac")

    if ( isMac ) {
        System.setProperty("apple.awt.application.appearance", "system")
    }

    application {
    ...

[Michael Paus]

Maybe it has to moved out of “application”.

[Max]

System.setProperty("apple.awt.application.appearance", "system")

Has to be outside the application{} tag, then it works👍 cool, looks better already. Thanks!
Do you know if we can also increase the size of the toolbar? I will later check if i find more useful flags inside apple.awt.application.appearance

[Michael Paus]

https://www.formdev.com/flatlaf/macos/

[Max]

Perfect! Thx!

[Max]

For anyone interested:

add inside the Window element:

window.rootPane.putClientProperty("apple.awt.fullWindowContent", true)
window.rootPane.putClientProperty("apple.awt.transparentTitleBar", true)

For full native feel

[Daniel Pitts]

FWIW, here is how I set up my app:

fun main() {
    System.setProperty("apple.awt.application.appearance", "system")
    System.setProperty("skiko.rendering.laf.global", "true")
    System.setProperty("skiko.rendering.useScreenMenuBar", "true")
    System.setProperty("skiko.linux.autodpi", "true")

    application {
        Window(
            onCloseRequest = ::exitApplication,
            title = "My App",
        ) {
            App()
        }
    }
}

I don't think you need to check if it is apple beefore setting the properties btw. They are just ignored if not applicable.

[Michael Paus]

@Daniel Pitts Can you provide any pointer to some documentation for these skiko properties?

[Daniel Pitts]

I don’t remember where I found them, but searching google probably will take you there.

[Michael Paus]

I tried Google already but did not find anything relevant.

[Daniel Pitts]

Hmm, you're right. I really don't recall where I figure it out, probably source spelunking. Just found some more interesting things in org.jetbrains.skiko.SkikoProperties

[Daniel Pitts]

Also, apparently you can just call androidx.compose.ui.configureSwingGlobalsForCompose for the same effect.