清单文件和网站图标取决于浅色/深色模式,是否有办法在用户更改操作系统的模式时进行更改?
我已经使事件监听器触发。
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( "change", (e) => {
if (e.matches) console.log('your in dark mode);
});
但是清单文件是从React的public文件夹中加载的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My Site</title>
</head>
<body>
<noscript>Please enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
不确定如何处理位于公共文件夹根目录中的网站图标。另外,theme-color 的元标记也需要更改。