Dynamic theme-color for Safari

[pandermatt]

Hey,

I wanted to add dynamic theme-colors as done in https://pinia.vuejs.org/ for Safari. I couldn't figure out how they did it.
According to the apple documentation, there is a meta tag:

<meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

How can I make this dynamic? I'm looking for something like this:

['meta', { name: "theme-color", content:  defineConfig.appearance? === 'dark' ? '#000000' : '#ffffff'}],

[userquin]

you can use transformHead (will work only on build): here an example, return the entry you need https://github.com/vueuse/vueuse/blob/main/packages/.vitepress/transformHead.ts and https://github.com/vueuse/vueuse/blob/main/packages/.vitepress/config.ts#L189, use userConfig.appearance:

transformHead({ userConfig }: TransformContext) {
 // userConfig.appearance
}

[userquin]

if you also need it in dev mode use transformPageData

[userquin]

if you mean dynamic at runtime, you can try using useData composable and access the appearance using useData().site.value.appearance, then use useData().page.value.headers, I have no idea if will work changing the headers

[pandermatt]

Thank you! This works but it is not instant (a refresh of the website is needed). But after a long time of debugging and inspecting https://pinia.vuejs.org/ , the easy solution is, to not include any theme-color options 😅

[pandermatt]

I also updated VitePress

        "vitepress": "^1.0.0-alpha.61"
        "vitepress": "^1.0.0-rc.39",