Metadata: Add support for theme-color media queries

[michaelcummings12]

Describe the feature you'd like to request

Some browsers support the ability to change the theme-color based on a media query. For example, if the device prefers dark mode, the browser can display a different theme-color than if the device prefers light mode.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

Describe the solution you'd like

The themeColor type on the Metadata type could be something like

interface ThemeColor {
     color: string;
     media?: string;
}

interface Metadata {
     ...,
     themeColor?: string | ThemeColor[] | null,
}

Describe alternatives you've considered

It is possible to create custom metadata tags that handle this, but it would be really nice to have the new metadata features be comprehensive.

[yasinkavakli]

Hopefully this gets worked on soon, can't believe you guys shipped this on canary without this. Should be always the default to include support for ThemeColor imo.

[balazsorban44]

The browser support is relatively low right now, and less useful on Desktop devices as Chrome only utilizes it for installed PWAs. See https://caniuse.com/meta-theme-color

Hence, this has not been a priority.

[johanguse]

Lighthouse warn me about the meta theme-color

My metadata config

[poziomekk]

the actual code for now as nextjs 14 docs says:

export const metadata= {
    themeColor: "#000000",
};

transform into:

export const viewport = {
    themeColor: "#000000",
};

[MarcusDelvecchio]

cool could you please provide source?

[poziomekk]

sorry, found on other site/thread but it works ;)

[johanguse]

I found this https://nextjs.org/docs/app/api-reference/functions/generate-viewport
Before 14, it was part of metadata, but now it has its own API. Just like the Metadata