Currently I try to use Silk without KobWeb, my problem is that the CSS variables (like `--silk-butto...

# kobweb

[Norbi]

Currently I try to use Silk without KobWeb, my problem is that the CSS variables (like --silk-button-color) seem to remain unset (see the attached image).

My bootstrap is the following, what is missing?

renderComposable("root") {
            prepareSilkFoundation({
                it.stylesheet.registerStyleBase("*") {
                    Modifier.boxSizing(BoxSizing.BorderBox)
                }

                it.config.initialColorMode = LIGHT
                initSilkWidgets(it)

                it.theme.registerComponentStyle(CustomStyle)
            }) {
                renderWithDeferred {
                    Surface {

Thanks.

[Norbi]

image.png

[David Herman]

That variable is only set when you call `Button`: https://github.com/varabyte/kobweb/blob/14e9ccffb889907cb3ee9d94a0c3e90c3d33db74/frontend/silk-widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/components/forms/Button.kt#L159

[David Herman]

Note that the variables are not really considered part of the public API for Silk

[Norbi]

I call Button() inside Surface {} , that's how I could examine the CSS properties...

[David Herman]

Looking at it now I'm surprised that --silk-color is not defined

[David Herman]

That's set here <https://github.com/varabyte/kobweb/blob/14e9ccffb889907cb3ee9d94a0c3e90c3d33db74/frontend/silk-widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/init/InitSilkWidgets.kt#L275>

You might have to also set this line somewhere in your own site: <https://github.com/varabyte/kobweb/blob/14e9ccffb889907cb3ee9d94a0c3e90c3d33db74/frontend/kobweb-silk/src/jsMain/kotlin/com/varabyte/kobweb/silk/SilkApp.kt#L12>

[David Herman]

It's possible my README is missing that -- apologies if that's the case!