Hello, here I am again :sweat_smile: Currently I have this to switch between light and dark mode `c...

# kobweb

[Christiano]

Hello, here I am again 😅

Currently I have this to switch between light and dark mode colorMode = colorMode.opposite. Exactly the same way the actual Kobweb site does it.
Besides that I also have a function that measures the height of grid items to make them span across the correct amount of rows. The recalculation is done when the window resize event is triggered.

Changing the colorMode makes the page reload but of course does not trigger the window resize event. Is there another event that gets triggered when changing the colorMode that I can use? 🤔

[David Herman]

Welcome back!

You can use LaunchedEffect(colorMode) {...}

[David Herman]

Neat way in Compose to turn any changing value into an event I believe

[Christiano]

Hmm I just found out I could trigger an event manually by using dispatchEvent

So this triggers the event after updating the colorMode

colorMode = colorMode.opposite
window.dispatchEvent(Event("storage"))

I will also try to use your suggestion and see what suits the project more! Thank you again for the quick response!

[David Herman]

Ah if you actually want to dispatch a system event that sounds reasonable. I'm not too familiar with that, let us know here if it works for you!

[Christiano]

Just tested your suggestion and seems that both options do the trick.

For now I think I'll be using a custom event, that way I can track that it will not get triggered unintentionally 😄


So a little summary (for myself or anyone else stumblin on this)

The button where I can change the colorMode

onClick = {
    // Toggle the color mode
    colorMode = colorMode.opposite
    window.dispatchEvent(Event("update-color-mode"))
},

and in another file I can listen to this event

window.addEventListener("update-color-mode", {
    recalculateGridItems()
})

[David Herman]

Very neat, I didn't know it was that easy to create custom events. Thank you for sharing!