pwa | Next.js | Page 1

Hi @burnt solstice. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Based on the provided knowledge sources, there isn't a direct way to change the background and theme color in the web manifest depending on the chosen theme (light or dark) dynamically. The web manifest file is a static file that is used by the browser and isn't typically modified at runtime.

However, you can define the background_color and theme_color in your web manifest file as shown in the example below:

import type { MetadataRoute } from 'next'
 
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js App',
    short_name: 'Next.js App',
    description: 'Next.js App',
    start_url: '/',
    display: 'standalone',
    background_color: '#fff',
    theme_color: '#fff',
    icons: [
      {
        src: '/favicon.ico',
        sizes: 'any',
        type: 'image/x-icon',
      },
    ],
  }
}

(Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest#generate-a-manifest-file))

For dynamic theme changes, you might want to handle that within your application's CSS or JavaScript. For example, you can use cookies to store the current theme and apply it to your application:

import { cookies } from 'next/headers';

export default function RootLayout ({ children }: Props) {
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')?.value

  return (
    <html lang='en' data-theme={theme || 'auto'}>
      <body>{children}</body>
    </html>
  )
}

(Source: Github Issue Comment (https://github.com/vercel/next.js/issues/43402))

#pwa

Please note that these theme changes would only affect the look of your application and not the colors defined in the web manifest file.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: