JS在启用darkmode时更改浏览器选项卡图标

Question

我有这个脚本，它的工作原理是:

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

我(与我不存在的JS知识)正试图改变最后一行:

console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);

到，而不是显示它在console.log更改浏览器选项卡图标。我的想法(我还没有实现)是:

if (dark-mode = on){ 
$icon = "images/icon_dark.png";
}else{
$icon = "images/icon_light.png";
} 
}

然后在<link rel="icon" href="$icon">中使用$icon.
我知道我上面写的不是JS的工作原理，但它只是为了说明我想要的。我看过其他的解决方案，但我发现这个想法最符合我的意图。
非常感谢您的帮助。

Answer 1

是的，这里不需要PHP，但可以使用JavaScript。

将id附加到元素

<link rel="icon" href="images/icon_light.png" id="favicon-icon">

JS

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
document.getElementById("favicon-icon").href = darkModeOn ? 'images/icon_dark.png' : 'images/icon_light.png'
});