TailwindCSS 项目中夜间模式无法自动切换

[miniwater]

不管后台设置了auto还是inherit不生效

[miniwater]

项目hugo，主题hextra

目前临时解决办法

  const artalk = Artalk.init({
    el: "#Comments", // 绑定元素的 Selector
    pageKey: "{{ .Permalink }}", // 固定链接
    pageTitle: "{{ .Title }}", // 页面标题 (留空自动获取)
    server: "https://xxx.xxx.com", // 后端地址
    site: "{{ .Site.Title }}", // 你的站点名
  });
  // artalk.setDarkMode(true)
  const htmlElement = document.documentElement; // 或者 document.body

  // 首次加载时检查 dark 类
  if (htmlElement.classList.contains("dark")) {
    artalk.setDarkMode(true);
  } else {
    // console.log("亮色");
  }

  // 监听 dark 类的变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (
        mutation.type === "attributes" &&
        mutation.attributeName === "class"
      ) {
        artalk.setDarkMode(htmlElement.classList.contains("dark"));
      }
    });
  });

  observer.observe(htmlElement, { attributes: true });