启用暗模式时 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'}.`);
  });

我（用我 none 现有的 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'
});

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

JS change browser tab icon when darkmode is enabled

javascript

css

darkmode