How to change theme_color programatically?

[suchorski]

I'm using Nuxt 3.16 and Vite PWA plugin. I'm using SPA and I can't found anything related to change the theme_color to match with the theme from NUxtUI

[userquin]

If you have a ui theme just pick the color and use manifest: { theme_color: '<your-theme-color>'} in the pwa options.

If the issue is about changing the theme at runtime, you cannot change it in the pwa manifest since it will require to change the pwa manifest when the theme changes and reload the page, and will take some time the user agent (the browser) to change/refresh it: check https://web.dev/articles/manifest-updates

If you have a set of themes you can generate 1 pwa manifest per theme color and swicth the pwa manifest in the head, check:

• building manifest per locale and per theme (only dark and light, will not match the set of theme we can configure at elk.zone): https://github.com/elk-zone/elk/blob/main/modules/pwa/i18n.ts#L206-L241 (webmanifest per locale and mode)
• adding the webmanifest to nitro route rules: https://github.com/elk-zone/elk/blob/main/modules/pwa/index.ts#L211-L224
• change the manifest when switching between dark and light mode: https://github.com/elk-zone/elk/blob/main/app.vue#L2 , https://github.com/elk-zone/elk/blob/main/composables/setups.ts#L54-L61 and https://github.com/elk-zone/elk/blob/main/composables/vue.ts#L43-L63
• you need to set manifest: false in the pwa options to do this

Anyway, this module is agnostic to the ui lib used with Nuxt.

[suchorski]

Too many work...

I did like this. Put the meta tag in the nuxt.config And change it with basic JavaScript