Does kobweb css support @media(prefers-color-scheme)? If so, do I have to do anything to enable it i...

# kobweb

[Don.Robertson]

Does kobweb css support @media(prefers-color-scheme)? If so, do I have to do anything to enable it in kotlin?

[David Herman]

You should be able to set media queries in Kobweb, yes. Let me link to an example ..

[David Herman]

Basically you create a ComponentStyle and use a cssRule in it, like this: https://github.com/varabyte/kobweb/blob/72d7706038d2aad649b12937cbef4ff1cce37315/frontend/silk-foundation/src/jsMain/kotlin/com/varabyte/kobweb/silk/components/layout/breakpoint/BreakpointConditions.kt#L25

[David Herman]

And toMinWidthQuery looks like this: https://github.com/varabyte/kobweb/blob/72d7706038d2aad649b12937cbef4ff1cce37315/frontend/silk-foundation/src/jsMain/kotlin/com/varabyte/kobweb/silk/theme/breakpoint/BreakpointExtensions.kt#L33

[David Herman]

That said, I'm not 100% sure how to query that color mode now that I think about it

[David Herman]

I may need to investigate this a bit more

[David Herman]

Ah so you set the query to light or dark. That should work. Just know that this is separate from how Silk UI handles dark and light modes.

[Don.Robertson]

Thanks so much for your response.

[David Herman]

You're welcome, although I'm worried it might be useless

[David Herman]

Give it a try but let me know if you have any more questions, or if you can't accomplish what you're trying to do.