To set the theme-color meta field on your website, you can use the viewport object or the generateViewport function in your Next.js application. This will allow you to customize the color that appears in the browser's address bar.

Here's how you can do it using both methods:

Using the viewportObject

You can define a static viewport object in your layout.tsx or page.tsx file:

Using the generateViewportFunction

Alternatively, if you need to set the theme-color dynamically based on some parameters, you can use the generateViewport function:

Notes

• Replace 'black' with any valid CSS color value (e.g., '#ff0000' for red, 'rgba(255, 0, 0, 0.5)' for a semi-transparent red, etc.).
• Make sure to place this code in a file that is part of your Next.js app's layout or page structure, such as layout.tsx or page.tsx.

This will ensure that the theme color of your website is reflected in the browser's address bar.