3

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

Abhimanyu
  • 11,351
  • 7
  • 51
  • 121
Zoltan Zarlow
  • 97
  • 1
  • 8

2 Answers2

3

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.

You need to put some view inside, size it and apply some background color, for example:

MaterialTheme(colors = darkColors()) {
    Box(Modifier.fillMaxSize().background(MaterialTheme.colors.background))
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • 1
    The question remains, how to make the window in dark mode? I would expect it to theme the window background in a dark gray color. – Chapz Jan 05 '22 at 21:23
  • 1
    @Chapz it doesn't seems to be supported so far, you can [create a feature request](https://github.com/JetBrains/compose-jb/issues/new), or made a custom one based on [this](https://github.com/JetBrains/compose-jb/tree/master/tutorials/Window_API_new#draggable-window-area) approach for now. – Phil Dukhov Jan 06 '22 at 00:35
1

You can use Scaffold to see changes. In your example:

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

You can read about it: https://developer.android.com/jetpack/compose/layouts/material or here: https://metanit.com/kotlin/jetpack/4.11.php

yakovbenalex
  • 11
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 29 '22 at 06:55