https://kotlinlang.org logo
Join Slack
Powered by
should i update kobweb latest version 0.24.0 to 0...
# kobweb
m
should i update kobweb latest version 0.24.0 to 0.25.1 . latest version solve theme toggle issue?
Copy code
compose-html = "1.10.0"
compose-runtime = "1.10.2"
kobweb = "0.24.0"
kotlin = "2.3.10"
d
Sorry, what is the "theme toggle issue"?
That said, I would definitely recommend upgrading Kobweb in general. github.com/varabyte/kobweb/blob/…/COMPATIBILITY.md
m
In website i theme change 1 second blink page
Mobile chrome no issue
In laptop chrome website page 1 second blink when theme toggle
Official doc website same issue 1 second blink
l
Please elaborate more about the issue. In this case, attaching a video would be very helpful too.
m
ohh sorry i forget send video
let me attach now
official doc sometime blinking sometime prefect work should latest version do kobweb?
as @David Herman mention it should be update so i going update after see it happend or not
d
Do you see the blink when you use a different browser? Firefox or Safari?
I got the site to blink briefly once in Chrome but it doesn't do it every time
I wonder if it's a Chrome bug
m
let me try now
👍 1
in brave same issue both website
Screen Recording 2026-10-16 at 11.29.11 AM.mp4
d
Brave is a Chromium browser
So most likely the Chrome folks broke something. Nothing we can really do about that in Kobweb but wait I expect.
m
ok but this issue 1 year ago still not fix. hahaha
c
As far as I know, I fixed this by using this code block in my 
@InitSilk
, which is also in the example kobweb project.
Copy code
val colorMode = ColorMode.loadFromLocalStorage(COLOR_MODE_KEY) ?: ColorMode.systemPreference

    ctx.config.initialColorMode = colorMode

    // Script which runs at load time that needs to be kept in sync with `initialColorMode` above. This code checks
    // if the user's local color mode preference is different from what was exported by Kobweb, replacing it if
    // different to prevent a flash of color after the page loads.
    if (SiteGlobals.isExporting) {
        val node = document.createElement("script").apply {
            textContent = """
                {
                    const storedColor = localStorage.getItem('${COLOR_MODE_KEY}'); // 'LIGHT', 'DARK', or null
                    const desiredColor = storedColor ? `silk-${'$'}{storedColor.toLowerCase()}` : 'silk-dark';
                    const oppositeColor = desiredColor === 'silk-dark' ? 'silk-light' : 'silk-dark';
                    document.documentElement.classList.replace(oppositeColor, desiredColor);
                }
                """.trimIndent()
        }
        document.head?.appendChild(node)
    }
Also make sure to use the CSS variables to set colors (for example 
BackgroundColorVar
). I noticed a flicker when using just 
ColorMode.current.toPalette().background
or something like that.
I only now watched the videos and noticed that this is not what was happening with me. It seems to me that you just have a race condition or something, setting the theme multiple times in close succession or something. 🤔
d
It really feels like Chrome introduced a race condition, yeah.
2 Views
Open in Slack
PreviousNext
Powered by