如何切换sweetalert2主题？

Question

我有一个sweetalert2模式，它有一个暗模式的切换开关，我想要切换这个模式的暗模式。

我试过：

Swal.fire({
            title: 'Settings',
            icon: 'question',
            iconHtml: '<i class="fa fa-cog settings-modal-icon"></i>',
            html: settingsMenuHtml,
            showCloseButton: true,
            showCancelButton: true,
            confirmButtonText: 'Save',
            onOpen: () => {
                document.querySelectorAll('input[type="checkbox"]')[0].checked = Nightly.isDark;
            },
      onBeforeOpen: () => {
        if(Nightly.isDark){
          var ss = document.createElement('link');
          ss.rel = "stylesheet";
          ss.href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css";
          document.head.appendChild(ss);
        }  
      }
})

但是这阻止了整个页面的加载。

我该怎么解决这个？？

Answer 1

请检查Sweetalert2文档的willOpen和didOpen，您应该使用它而不是onBeforeOpen和onOpen。

除此之外，我将Nightly.isDark设置为true (用于黑暗模式)，并为settingsMenuHtml添加了一些最低限度的代码，这是使您的模式工作所必需的。

此外，为了启用切换，我创建了一个setCSSLink()函数，可以在触发willOpen和单击“设置”复选框时调用该函数。

下面是一个工作代码片段：

​

Nightly.isDark = true;

settingsMenuHtml = 
  '<input type="checkbox" onclick="Nightly.isDark = !Nightly.isDark; setCSSLink()">';

Swal.fire({
  title: 'Settings',
  icon: 'question',
  iconHtml: '<i class="fa fa-cog settings-modal-icon"></i>',
  html: settingsMenuHtml,
  showCloseButton: true,
  showCancelButton: true,
  confirmButtonText: 'Save',
  didOpen: () => {
    document.querySelectorAll('input[type="checkbox"]')[0].checked = Nightly.isDark;
  },
  willOpen: () => {
    setCSSLink()
  }
})

function setCSSLink() {
  var ss = document.createElement('link');
  ss.rel = "stylesheet";
  if (Nightly.isDark) {
    ss.href = "//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css";
  } else {
    ss.href = "//cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal/minimal.css";
  }
  document.head.appendChild(ss);
}

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/gh/fcmam5/nightly.js@v1.0/dist/nightly.min.js"></script>

​