Nuxt•9mo ago

How to set meta theme-color in nuxt.config

  app: {
    head: {
...
      meta: [{
        theme_color: '#ffffff',
      }],
    },
  },

  app: {
    head: {
...
      meta: [{
        theme_color: '#ffffff',
      }],
    },
  },

Why isn't theme_color or theme-color valid? What can I set here?

23 Replies

pyplacca•9mo ago

you need to define it as a regular meta tag, where the object's keys and values are the attribute names and values respectively. use this as reference

MDN Web Docs

theme-color - HTML: HyperText Markup Language | MDN

The theme-color value for the name attribute of the element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS .

TincanOP•9mo ago

we're actually using this package apparently. That changes things I assume https://nuxt.com/modules/vite-pwa-nuxt

    registerType: 'autoUpdate',
      manifest: {
...
      theme_color: "#085781",
      background_color: "#085781",
    },

    registerType: 'autoUpdate',
      manifest: {
...
      theme_color: "#085781",
      background_color: "#085781",
    },

Nuxt

Vite-pwa-nuxt · Nuxt Modules

Zero-config PWA Plugin for Nuxt

pyplacca•9mo ago

you can check the manifest section in the application tab to see if the configuration is being deisplayed there. if it is, I'd assume vite-pwa-nuxt only injects the theme color when the app is installed also, I don't know how you're testing the implementation, but it's easier using a Safari

TincanOP•9mo ago

I'm checking it in lighthouse Chrome

pyplacca•9mo ago

do you see something like this in there?

TincanOP•9mo ago

yes sorry for the delay it wasnt loading for some reason

TincanOP•9mo ago

pyplacca•9mo ago

cool. follow up question: do you see a meta tag with the theme color injected in the DOM?

TincanOP•9mo ago

so it is actually working, its just lighthous eisnt detecting it?

pyplacca•9mo ago

means your pwa config is working fine

TincanOP•9mo ago

no its not in DOM

pyplacca•9mo ago

yeah. I don't vite-pwa-nuxt injects it in the DOM until the app has been installed

TincanOP•9mo ago

hm so I guess this is fine then. That issue i screenshotted is listed under PWA optimized so not neccessary to be ticked off then

pyplacca•9mo ago

you can also add the theme color in the app.head.meta array of your nuxt.config.js that should help

TincanOP•9mo ago

that takes us back to the first post in the thread. theme-color and theme_color don't exist in the array

pyplacca•9mo ago

the definition is different there

// nuxt.config.ts
{
  app: {
    head: {
      meta: [{ name: 'theme-color', content: '#085781' }]
    }
  },
  ...
}

// nuxt.config.ts
{
  app: {
    head: {
      meta: [{ name: 'theme-color', content: '#085781' }]
    }
  },
  ...
}

just as you'd see in the mdn doc

TincanOP•9mo ago

ah i see, let me try that gotcha @pyplacca so whats that doing differently than setting in in PWA?

pyplacca•9mo ago

pretty much the same but in a different scenario

TincanOP•9mo ago

shouldnt it be changing my broswer colour or something then?

pyplacca•9mo ago

depends on what browser you're using ...and whether you're viewing on mobile or desktop Safari does a better job at that

TincanOP•9mo ago

ok sounds good thanks for your help 🙂

pyplacca•9mo ago

happy to assist

Gaming

Programming

How to set meta theme-color in nuxt.config