Material Design Theming

[PhilKes]

Hi there,

I am trying to figure out how to customize the Material Theme when using this library.
For example, I want to override the primary Material Theme color and I cant get it to work.
From m2.material.io/theming I tried to add a index.scss file containing:

@use "@material/theme" with (
  $primary: red,
  $on-primary: yellow,
);

And in my Main.kt:

@JsModule("./index.scss")
private external val Style: dynamic
fun main() {
    renderComposable(rootElementId = "root") {
        Style
        MDCButton(type = MDCButtonType.Raised ) {
            Text("Test")
        }
    }
}

But the scss does not have any effect on the Button color.
How can I change the Material Theme when using kmdc?

[PhilKes]

Ok I now figured out I can overwrite the --mdc-theme properties:

renderComposable(rootElementId = "root") {
        Div({
            style {
                property("--mdc-theme-primary","#991b1b")
                property("--mdc-theme-accent","grey")
                property("--mdc-theme-info","#2f83de")
                property("--mdc-theme-warning","#fd921f")
                property("--mdc-theme-error","#bb1919")
                property("--mdc-theme-success","green")
                property("--mdc-theme-background","#ffe9e9")
            }
        }){
            MDCButton(type = MDCButtonType.Raised ) {
                Text("Test")
            }
        }
    }

And now my Button uses the new primary color red:

[mpetuska]

Mdc (js lib) supports 2 theming approaches:

• Css variables (the one that worked for you, but it's limited)
• scss mixins (recommend, much more flexible)

Here's an example code of scss mixin in use

• Kotlin https://github.com/mpetuska/kmdc/blob/master/sandbox/src/jsMain/showcases/MDCCircularProgress.kt#L44
• scss https://github.com/mpetuska/kmdc/blob/master/sandbox/src/jsMain/resources/MDCCircularProgress.scss

For all theming in general I suggest refering to each component's mdc js docs as it differs on a component by component basis.

[PhilKes]

I have a follow up question on this, what is the best way to define that e.g. a MDCDrawer should use the theme's primary color as its backgroundColor?

[mpetuska]

Probably best done via good old css class and css variables. Create a custom class and set background colour to primary colour css variable.

Drawer component might also have a css mixin for that, in which case prefer it over css theming.

But in short, anything theming related is pure css or scss stuff and can use mdc docs as-is (with the exception of applying your custom class in composable).