Butterfly魔改4：自动检测深色/浅色模式

前言

添加功能：根据系统的深色/浅色模式，自动切换网站的深色/浅色模式。

方法1

在 \themes\butterfly\layout\includes\head.pug 的最后添加如下代码：

script.
  function updateTheme() {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
  }

  // 初始设置
  updateTheme();

  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);

方法2（推荐）

先跟着Butterfly魔改准备工作：文件管理魔改代码完成准备。

在 custom.js 最后（最外层）直接添加如下代码即可，也就是 .pug 文件去掉最前面的 script. 即可：

function updateTheme() {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
}

// 初始设置
updateTheme();

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);