Include media attribute for themeColor on the new Metadata API

[nicholas5538]

Describe the feature you'd like to request

Currently, the themeColor for Metadata API only accepts string. Is it possible to include media attribute into it as well?

Describe the solution you'd like

I'm was trying to migrate from Nextjs 13 depreciated head.js to its new Metadata API but there was one meta tag that I couldn't transferred.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f8f8f8" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#212529" />

The current Metadata API only accepts string for themeColor as shown below. Is there a way to add that media attribute so I can change its content accordingly to the users' theme preference?

export const metadata: Metadata = { themeColor: '#212529' }

Describe alternatives you've considered

NIL

[huozhi]

It's same as #45854, we're planned to add it soon

[poziomekk]

the actual code for now as nextjs 14 docs says:

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

transform into:

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

[homocodian]

Use this

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#f8f8f8' },
    { media: '(prefers-color-scheme: dark)', color: '#212529' },
  ],
}

[daveycodez]

Can't seem to get this to synchronize with next-themes from shadcn....

[daveycodez]

Got it fixed, needs to be done client side -

layout.tsx

"use client"

import { ReactNode, useEffect } from "react"
import { ThemeProvider, useTheme } from "next-themes"

export function Providers({
    children,
}: { children: ReactNode }) {
    return (
      <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
      >
          <MetaTheme />
          {children}
      </ThemeProvider>
    )
}

function MetaTheme() {
    const { resolvedTheme } = useTheme()

    useEffect(() => {
        const themeColor = resolvedTheme === "dark" ? "black" : "white"

        document.querySelectorAll("meta[name='theme-color']")
            .forEach((meta) => {
                meta.setAttribute("content", themeColor)
            })
    }, [resolvedTheme])

    return <></>
}