https://kotlinlang.org logo
#kobweb
Title
# kobweb
c

Christiano

11/23/2023, 9:27 PM
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? 🤔
d

David Herman

11/23/2023, 9:31 PM
Welcome back! You can use
LaunchedEffect(colorMode) {...}
Neat way in Compose to turn any changing value into an event I believe
c

Christiano

11/23/2023, 9:35 PM
Hmm I just found out I could trigger an event manually by using
dispatchEvent
So this triggers the event after updating the colorMode
Copy code
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!
d

David Herman

11/23/2023, 9:37 PM
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!
c

Christiano

11/23/2023, 9:44 PM
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
Copy code
onClick = {
    // Toggle the color mode
    colorMode = colorMode.opposite
    window.dispatchEvent(Event("update-color-mode"))
},
and in another file I can listen to this event
Copy code
window.addEventListener("update-color-mode", {
    recalculateGridItems()
})
d

David Herman

11/23/2023, 9:49 PM
Very neat, I didn't know it was that easy to create custom events. Thank you for sharing!