Waline无法跟随博客开关暗黑模式

[xiaowang266]

Describe the bug 描述问题
Waline无法跟随博客开关暗黑模式

To Reproduce 如何复现
打开Waline评论之后默认配置就能复现

Environment 使用环境
hexo: 5.3.0
hexo-cli: 4.3.2
Kaze: v1.1.0-beta6

Additional context 额外信息
我发现在博客网页源代码中，Waline配置的dark的参数是'html[data-user-color-scheme="dark"]'。可能和这个有关系？

[xiaowang266]

OK，我知道是怎么回事了
首先，由于YAML和HTML的符号问题，"会变成"且在这里最后不会变回来，导致CSS选择器选择不到。其次，由于Kaze主题的开关暗黑模式是通过删加data-user-color-scheme="light"实现的，这导致即使"不会变，也选择不到
因此，把dark的参数改为:not([data-user-color-scheme]):root就可以啦~

[xiaowang266]

不对，Kaze会根据浏览器暗黑模式的开关来决定加light还是dark，所以得把删除data-user-color-scheme的功能给删了。
幸好这个功能还算好找，在kaze\layout\_partial\head.ejs里的// apply current darkmode setting附近。
改成下面这样就行了。

  <% if(config.prismjs && config.prismjs.enable && theme.prism && theme.prism.darkTheme) { %>
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else {
        document.documentElement.setAttribute('data-user-color-scheme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
        prismThemeChange();
      }
    };
    setDarkmode();
    </script>
  <% } else { %>
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
      } else {
        document.documentElement.setAttribute('data-user-color-scheme'), window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
      }
    };
    setDarkmode();
    </script>
  <% } %>

然后"还是会变成"，所以dark的参数还是要改，但这次只用CSS 2的选择器即可。
参数：'[data-user-color-scheme=dark]'。