Hello, I’m trying to make status bar in Android Ch...

# webassembly

[Andrey Yegorov]

Hello, I’m trying to make status bar in Android Chrome respect app colors but it doesn’t work. Now app is dark and status bar is white. 😟 I try to do following way but it doesn’t work:

<meta name="theme-color" content="#FFFBFF" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#201A1B" media="(prefers-color-scheme: dark)">

and:

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) {
        SystemTheme()
        App()
    }
}

@Composable
fun SystemTheme() {
    DisposableEffect(Unit) {
        val mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")

        fun updateThemeColor() {
            val metaTag = document.querySelector("meta[name='theme-color']") as? HTMLMetaElement
            metaTag?.content = if (mediaQueryList.matches) "#201A1B" else "#FFFBFF"
        }

        updateThemeColor()

        val listener: (Event) -> Unit = { updateThemeColor() }
        mediaQueryList.addEventListener("change", listener)

        onDispose {
            mediaQueryList.removeEventListener("change", listener)
        }
    }
}

ChatGPT says that maybe wasm kmp app overrides it somewhere?

[Skaldebane]

"wasm kmp app overrides it somewhere" is just AI nonsense. I doubt ChatGPT could help you much with most KMP things.

[Skaldebane]

Regarding your question, if you want to sync the top bar's color to your app's color, why are you checking the media query?

[Skaldebane]

You should instead get that from your app (whatever state you use to hold the color, e.g. MaterialTheme.colors.isLight or similar)

[Skaldebane]

A quick google search also shows that you'd need to use setAttribute on the HTMLMetaElement instead of reassigning `content`:

// replace #000000 with whatever color value you want
metaTag?.setAttribute("content", "#000000")

[Andrey Yegorov]

didn’t help but thanks anyway

[Skaldebane]

Can you share your code (after the suggested edits)? I can't see why this shouldn't work.
A few other things to note:
• Some people reported that Chrome won't respect this meta tag unless the website is on HTTPS (i.e. it's gotta be deployed, development server won't work), but some others suggest otherwise. Try deploying it to an actual domain just in case that's the issue.
• Chrome ignores this tag when the device is in dark mode and/or battery saver mode.
• Regarding getting your app's theme, if you use MaterialTheme.colors.isLight to check it, make sure to do that after defining your theme (e.g. if you set the theme in App, then you should call your SystemTheme() function under MaterialTheme or whatever theme wrapper you have), otherwise it's always going to return true.