javascript - 启用暗模式时JS更改浏览器选项卡图标

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";
  } 
}

然后使用$iconin <link rel="icon" href="$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'
});