I'm trying to figure out if compose-desktop could ...

# compose-desktop

[phisch]

I'm trying to figure out if compose-desktop could be a potential replacement for gtk4 in one of my projects. The main use-case i am looking for is themeability. So a user should be able to provide a configuration (could be custom or css or whatever) to theme the used components. A friend that has used compose-desktop before told me that it isn't possible to change style properties at runtime, and this seems like it can't be true.

[Kirill Grouchnikov]

Like a specific button (rollover effect) or the whole app?

[Kirill Grouchnikov]

Certainly both are possible today, and you can see that in a variety of Compose demos

[Kirill Grouchnikov]

I don't think you want to change the padding or the insets or anything related to layout, as you don't want things to shift around.

[phisch]

please link me a single one, i am struggling to find any examples that would show this

[Kirill Grouchnikov]

What is "this"? Rollover effect?

[phisch]

and yes i want to change paddings, margins and all this stuff, it is important for my use-case

[phisch]

"this" is any example that changes a components background color, its padding, margin, border-radius, border size, border-style, background image or anything related to that once the component is clicked

[Kirill Grouchnikov]

You can track rollover with

var rollover by remember { mutableStateOf(false) }

[Kirill Grouchnikov]

And then the pointerMoveFilter on your component like

.pointerMoveFilter(
    onEnter = {
        rollover = true
        false
    },
    onExit = {
        rollover = false
        false
    },
    onMove = {
        false
    })

[Kirill Grouchnikov]

and then in your canvas look at the rollover value to use a different color

[phisch]

so there is no way to say something like button.style.backgroundColor = Color.red when it is clicked?

[Kirill Grouchnikov]

It's not css

[phisch]

well yeah i know, but it still has to have some properties of what should be rendered

[Kirill Grouchnikov]

You can see a smaller example in https://github.com/androidx/androidx/blob/androidx-main/compose/material/material/src/commonMain/kotlin/androidx/compose/material/Button.kt#L294

[Kirill Grouchnikov]

Where the material button colors are queried based on the enabled state

[Kirill Grouchnikov]

The state-specific colors come from your theme

[Kirill Grouchnikov]

https://github.com/androidx/androidx/blob/androidx-main/compose/material/material/src/commonMain/kotlin/androidx/compose/material/Checkbox.kt#L[…]65 is a bit more complicated, with colors that depend also on checked bit

[phisch]

I mean the main use-case is that the style properties are defined externally. Lets say the app loads a config file with a color and i want to use that color then

[phisch]

the stuff i am seing all seems like it is immutable stuff that has to be compiled into the application

[Casey Brooks]

To my knowledge, pretty much all theming attributes are provided by Ambients, many of which are in the MaterialTheme, so you can customize most of the the theme at runtime by providing new values for those ambients, though I’m not sure how granular you can actually get with those.

But you can absolutely change the theme at runtime. Here’s an example showing it being done in an app I’m working on

Screen Recording 2021-03-04 at 4.37.20 PM.mov

[Kirill Grouchnikov]

How do you guarantee that the same color is returned every single time you query that "key"?

[Kirill Grouchnikov]

Compose certainly supports switching the whole "theme" at runtime - in its Material layer

[phisch]

yeah i don't want to guarantee that the same color is returned, this is literally the point of that external configuration

[phisch]

@Casey Brooks i am not sure how your example is implemented, but would you be able to read a color from a file and set that as the color?

[Kirill Grouchnikov]

You can get that color from wherever

[Kirill Grouchnikov]

Even change it on every recomposition

[Kirill Grouchnikov]

If it causes UI lag because you're hitting disk I/O to read that theme file, that's on you

[Casey Brooks]

Yup! I currently have it hard-coded to those 4 specific themes, but the selected theme is persisted and re-read on application load. You can definitely read those colors from file to avoid hard-coding themes, allowing the user to specify hex values, etc. Here’s the relevant snippet:

class Theme(
    val displayName: String,
    val lightBase: Boolean,
    val primaryColor: Long,
    val secondaryColor: Long,
)

@Composable
fun Theme.useTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = if (lightBase) {
            lightColors(
                primary = Color(primaryColor),
                secondary = Color(secondaryColor),
            )
        } else {
            darkColors(
                primary = Color(primaryColor),
                secondary = Color(secondaryColor),
            )
        }
    ) {
        Surface {
            content()
        }
    }
}