Compose 除了在架構上有很高的彈性外，在外觀上也給開發者很大的自由。由於 Jetpack Compose 是先針對 Android 作業系統而設計的，因此原生的 Theme（佈景主題）是遵循 Material Design 而設計的。若有客製化的需求，只要依照官方文件的說明，開發者也能打造符合需求的自訂主題。

由於 Compose for Desktop 的運行環境是 Desktop 作業系統，也就是 macOS、Windows、Linux。雖然在這個跨平台技術盛行的年代，使用者已經習慣在不同作業系統上看到各式主題的 UI，但若要給使用者最好的體驗，能讓 UI 看起來像原生的是再好不過了。

筆者在 Github 上搜尋了一下，果然已經有開發者嘗試為 Compose 實作 masOS 佈景主題。今年的耕讀筆記，就要來實驗一下更換佈景主題的效果。

macOS 佈景主題

Carson Holzheimer 在 Github 上公佈了他為 Compose 實作的 masOS 佈景主題，只要在專案裡新增一行相依套件設定，就能取用 MacTheme 及數個 Mac 開頭的元件。首先打開專案的 build.gradle.kts，找到 kotlin 底下的 sourceSets 設定，在 jvmMain 裡新增 io.github.chozzle:compose-macos-theme-desktop：

kotlin {
    // ...
    sourceSets {
        val jvmMain by getting {
            dependencies {
                // ...
                implementation("io.github.chozzle:compose-macos-theme-desktop:0.4.2")
                // ...
            }
        }
        // ...
    }
}

安裝好相依套件後，只要把原本寫在 MaterialTheme 的元件，改放到 MacTheme 底下，整個 Look & Feel 就會換成 macOS 風格啦！

MacTheme {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Column {
            Text(
                text = "Count: $count",
            )
            Row {
                MacButton(
                    macButtonStyle = MacButtonStyle.Large,
                    onClick = { count++ }
                ) {
                    Text(
                        text = "Add"
                    )
                }
                MacButton(
                    macButtonStyle = MacButtonStyle.Large,
                    onClick = { count = 0 }
                ) {
                    Text(text = "Reset")
                }
            }
        }
    }
}

從上面的例子可以看到，這個套件還另外提供許多 Mac 開頭的元件，比方說 MacButton，另外還有像 MacCheckbox、MacRadioButton、MacSearchField…等。想要了解更多的讀者，可以在 UI 裡放一個 MacExampleView 元件，就可以看到套件作者準備的示範 UI。

JetBrains 佈景主題

在這個幾乎所有應用程式都 Web 化的時代，到底還有什麼情境會寫 Desktop App 呢？答案之一就是打造 Compose for Desktop 的公司 JetBrains 在做的事 - 做 IDE！在經歷 20 年的 IDE 開發之後，JetBrains IDE 所創造出來的 UI 風格也廣為人知。既然 Compose 能支援自訂佈景主題，那能拿來做出 JetBrains IDE 風格的 UI 嗎？

當然可以！在 Github 就可以找到 JetBrains UI Kit for Compose Desktop 專案，一樣在專案裡安裝相依套件後就可以有 JBTheme 及 J 開頭的元件使用，打開專案的 build.gradle.kts，找到 kotlin 底下的 sourceSets 設定，在 jvmMain 裡修改 compose.desktop.currentOs 的設定，並新增 io.github.chozzle:compose-macos-theme-desktop：

kotlin {
    // ...
    sourceSets {
        val jvmMain by getting {
            dependencies {
                // ...
                implementation("com.bybutter.compose:compose-jetbrains-theme:1.1.0")
                // ...
            }
        }
        // ...
    }
}

安裝好相依套件後，只要把原本寫在 MaterialTheme 的元件，改放到 JBTheme 底下，整個 Look & Feel 就會換成 JetBrains IDE 風格啦！

JBTheme {
    JPanel(
        modifier = Modifier.fillMaxSize()
                           .jBorder(top = 1.dp, color = JBTheme.panelColors.border)
    ) {
        // ...
    }
}

經過今天的兩個範例，相信讀者都能感受到 Compose Theme 的美妙之處。隨著 Compose for Desktop 更趨穩定，相信會有更多成熟的佈景主題可以套用。在開發多平台應用程式時，將可以提供使用者更好的體驗。

參考資料

• Theming in Compose
• Chozzle/compose-macos-theme
• ButterCam/compose-jetbrains-theme