Halyul/hexo-theme-mdui

<script type="text/javascript">
  (function() {
    var appbarTopFlag = false;
    var appbarEl = document.querySelector('.theme-appbar');
    function appbarShadow() {
      var bodyScrolled = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
      if (bodyScrolled > 0 && !appbarTopFlag) {
        appbarEl.classList.add('theme-appbar--shadow');
        appbarTopFlag = true;
      } else if (bodyScrolled === 0 && appbarTopFlag) {
        appbarEl.classList.remove('theme-appbar--shadow');
        appbarTopFlag = false;
      }
    }
    appbarShadow()
    window.addEventListener('scroll', appbarShadow);
  })();
  (function() {
    function detechTheme() {
      var modeFlag = localStorage.getItem('darkMode');
      // true for dark mode, false for bright mode
      if(modeFlag === "true"){
        document.querySelector('body').classList.add('mdui-theme-layout-dark')
        document.querySelector('meta[name="theme-color"]').setAttribute("content", "#212121")
        return true
      } else if(!window.matchMedia) {
          return false;
      } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
        document.querySelector('body').classList.add('mdui-theme-layout-dark')
        document.querySelector('meta[name="theme-color"]').setAttribute("content", "#212121")
          return true;
      } else if(window.matchMedia("(prefers-color-scheme: light)").matches) {
        document.querySelector('body').classList.remove('mdui-theme-layout-dark')
        document.querySelector('meta[name="theme-color"]').setAttribute("content", "#fff")
          return false;
      } else {
        return false;
      }
    }
    var modeFlag = detechTheme();
    var modeEl = document.querySelector('.theme-appbar__mode-switch');
    function modeSwitch() {
      if (!modeFlag) {
        // default bright mode, switch to dark mode
        document.querySelector('body').classList.add('mdui-theme-layout-dark');
        document.querySelector('meta[name="theme-color"]').setAttribute("content", "#212121")
        localStorage.setItem('darkMode', true);
        modeFlag = true;
      } else {
        // dark mode, switch to bright mode
        document.querySelector('body').classList.remove('mdui-theme-layout-dark');
        document.querySelector('meta[name="theme-color"]').setAttribute("content", "#fff")
        localStorage.setItem('darkMode', false);
        modeFlag = false;
      }
    }
    modeEl.addEventListener('click', modeSwitch);
  })();
</script>