A modern programming language that makes developers happier.

kotlinlang

Screenshot 2024-12-02 at 12.29.08.png

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

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

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?

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

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.

<@U01ERMR974M> 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?

```fun main(args: Array&lt;String&gt;) {

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

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

    application {
    ...```


Maybe it has to moved out of “application”.

Screenshot 2024-12-02 at 14.40.44.png

```System.setProperty("apple.awt.application.appearance", "system")```
Has to be outside the `application{}` tag, then it works:+1: 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`

Screenshot 2024-12-02 at 14.50.59.png

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

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.

<@U06474ZDNDC> Can you provide any pointer to some documentation for these skiko properties?

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

I tried Google already but did not find anything relevant.

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

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