Material 2 & Material 3

When you want a single visual identity across Mac, Windows and Linux — or you already ship a Material design system on Android — Material is the right toolkit. Nucleus publishes both Material 2 and Material 3 style adapters that wrap DecoratedWindow.

TL;DR

• decorated-window-material2 — Compose androidx.compose.material (Material 2).
• decorated-window-material3 — Compose androidx.compose.material3 (Material 3).
• The window chrome derives from your MaterialTheme colors automatically.
• Works on every backend; pair with Tao for the smallest footprint.
• Use when you want consistency over native fidelity.

Install

dependencies {
    implementation("dev.nucleusframework:nucleus.nucleus-application:<version>")
    implementation("dev.nucleusframework:nucleus.decorated-window-tao:<version>")
    implementation("dev.nucleusframework:nucleus.decorated-window-material3:<version>")
    implementation(compose.material3)
}

dependencies {
    implementation("dev.nucleusframework:nucleus.nucleus-application:<version>")
    implementation("dev.nucleusframework:nucleus.decorated-window-tao:<version>")
    implementation("dev.nucleusframework:nucleus.decorated-window-material2:<version>")
    implementation(compose.material)
}

Quickstart — Material 3

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import dev.nucleusframework.application.*
import dev.nucleusframework.window.material3.*

fun main() = nucleusApplication {
    val colorScheme = if (isSystemInDarkMode()) darkColorScheme() else lightColorScheme()

    MaterialTheme(colorScheme = colorScheme) {
        MaterialDecoratedWindow(onCloseRequest = ::exitApplication, title = "Material 3") {
            MaterialTitleBar { _ -> Text("Material 3") }
            Surface(Modifier.fillMaxSize()) { /* content */ }
        }
    }
}

Quickstart — Material 2

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import dev.nucleusframework.application.*
import dev.nucleusframework.window.material2.*

fun main() = nucleusApplication {
    MaterialTheme(colors = if (isSystemInDarkMode()) darkColors() else lightColors()) {
        MaterialDecoratedWindow(onCloseRequest = ::exitApplication, title = "Material 2") {
            MaterialTitleBar { _ -> Text("Material 2") }
            Surface(Modifier.fillMaxSize()) { /* content */ }
        }
    }
}

How it works

Both modules expose a MaterialDecoratedWindow Composable that internally derives a TitleBarStyle and DecoratedWindowStyle from the current MaterialTheme. The title bar background, content tint and caption-button colours track your ColorScheme (M3) or Colors (M2). When the user switches to dark mode, the window chrome follows.

For finer control, both modules expose remember*Style helpers:

val windowStyle = rememberMaterialWindowStyle(colorScheme)      // M3
val titleBarStyle = rememberMaterialTitleBarStyle(colorScheme)  // M3

Pass them into the underlying NucleusDecoratedWindowTheme if you need to mix Material chrome with non-Material content.

When to choose Material

• You share Compose UI between Android and desktop.
• You want a single coherent identity, not platform-native chrome.
• You don't ship to enterprise users who expect Win11 Fluent fidelity.

For native fidelity per OS, prefer Fluent, macOS or Yaru. For developer tools, prefer Jewel.

Reference

Material 3

• NucleusApplicationScope.MaterialDecoratedWindow(...) and MaterialDecoratedDialog(...)
• DecoratedWindowScope.MaterialTitleBar(...) / DecoratedDialogScope.MaterialDialogTitleBar(...)
• rememberMaterialWindowStyle(colorScheme: ColorScheme): DecoratedWindowStyle
• rememberMaterialTitleBarStyle(colorScheme: ColorScheme): TitleBarStyle

Material 2

• MaterialDecoratedWindow(...) / MaterialDecoratedDialog(...)
• MaterialTitleBar(...) / MaterialDialogTitleBar(...)