如何在 Next.js 13 或 14 中动态更改深色和浅色模式的 Favicon？

Question

我正在开发一个Next.js 14应用程序App Router，我想根据用户的配色方案偏好（深色或浅色模式）动态更改图标。目前，我有一个黑色的图标和一个白色的图标。如何设置 Next.js 14 应用程序，以便在激活深色模式时自动将图标切换到适当的版本，并在浅色或默认模式下恢复为黑色版本？

在以前的版本中，这可以使用该组件来实现<Head/>。然而，在版本 14 中，引入了Next.js新的接口来描述所有元数据字段。Metadata但是，现在我不确定如何实现基于颜色模式的图标更改。

我的期望：

• 在我的Next.js版本 14 应用程序中，我想动态更改favicon基于颜色模式。

• favicon我希望我可以根据用户的配色方案偏好（深色或浅色模式）以编程方式/自动在黑白版本之间切换。

Answer 1

由于我发布问题时没有立即得到答案，所以我在互联网上搜索并没有找到任何解决方案。因此，我阅读了有关图标的官方文档，并自己找到了解决方案。虽然文档中没有直接的解决方案，但得到了提示，它解决了我的问题。

\n

我分享代码是因为如果将来有人遇到同样的问题，这会对他们有所帮助，

\n

// app/layout.tsx\nexport const metadata: Metadata = {\n  title: \'Website Title\',\n  description: \'Website description\',\n  icons: {\n    icon: [\n      {\n        media: \'(prefers-color-scheme: light)\',\n        url: \'/images/icon-light.png\',\n        href: \'/images/icon-light.png\',\n      },\n      {\n        media: \'(prefers-color-scheme: dark)\',\n        url: \'/images/icon.png\',\n        href: \'/images/icon-dark.png\',\n      },\n    ],\n  },\n};\n

\n

我必须删除app/icon.png默认映射图标的任何文件才能激活界面Metadata的icon. 并且，我favicon or icon images存储在public/images/icon-light.png和中public/images/icon-dark.png。而且，现在它根据颜色模式动态工作。

\n

快速程序：

\n

\n
• 从目录中删除任何favicon或icon图像app/。
\n
• 存储favicon or icon images到public/images/目录。
\n
• 在app/Layout.tsx metadata.icons.icon添加url和href路径到存储的images相对路径。\xe2\x9c\x85
\n

\n