kotlinmaterial-designandroid-jetpack-composecompose-desktop

Jetpack Compose Desktop – MaterialTheme.colors.background Not Working


Setting MaterialTheme.colors

I'm trying to make a very basic window in Jetpack Compose for Desktop (not mobile), but I'm having some difficulties with changing the colors of the window. I've looked at some tutorials and examples, but maybe I don't quite understand how color themes are correctly implemented.
The code that I wrote should create a window with a dark background, but the window when the program runs is white.
Please provide any insights you can as to what I am doing wrong.

Code (Kotlin)

import androidx.compose.desktop.*
import androidx.compose.material.*
import androidx.compose.ui.unit.*


fun main() = Window(
    title = "Window",
    resizable = false,
    size = IntSize(1200, 800),
) {
    MaterialTheme(colors = darkColors()) {

    }
}

Window

light-themed window

Other Info

macOS Big Sur
IntelliJ 2021.2
Jetpack Compose 0.4.0


Solution

  • The MaterialTheme only provides colors for all views inside the container, it does not create or render the view.

    Most Material components will use these colors as default values, but you can also use these colors in your views using, for example, MaterialTheme.colors.background. One of such views is Scaffold, so you can simply use it:

    MaterialTheme(colors = darkColors()) {
        Scaffold {
            // your content
        }
    }
    

    Or you can apply the color to your view manually, like to a Box(it can be any view):

    MaterialTheme(colors = darkColors()) {
        Box(Modifier.fillMaxSize().background(MaterialTheme.colors.background))
    }