如何切换SweetAlert2模态框主题？现有代码致页面加载停滞求修复

你的代码导致页面停止加载的核心原因：每次打开弹窗时，只要处于暗黑模式就会重复向页面头部添加dark.css样式表，重复加载同一资源会触发浏览器资源请求阻塞、样式优先级冲突，最终引发页面卡顿或停止响应。

正确实现方案 #

1. 提前加载暗黑主题样式（推荐）

先在页面初始化时一次性引入暗黑主题样式，避免动态重复加载：

<!-- 在页面<head>中添加，仅需引入一次 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css">

2. 优化SweetAlert2代码

利用SweetAlert2内置的theme属性直接切换主题，同时绑定开关的实时切换事件：

Swal.fire({
  title: 'Settings',
  icon: 'question',
  iconHtml: '<i class="fa fa-cog settings-modal-icon"></i>',
  html: settingsMenuHtml,
  showCloseButton: true,
  showCancelButton: true,
  confirmButtonText: 'Save',
  // 根据当前暗黑模式状态设置初始主题
  theme: Nightly.isDark ? 'dark' : 'light',
  onOpen: () => {
    const darkToggle = document.querySelectorAll('input[type="checkbox"]')[0];
    darkToggle.checked = Nightly.isDark;

    // 绑定开关切换事件，实时更新弹窗主题
    darkToggle.addEventListener('change', (e) => {
      Nightly.isDark = e.target.checked;
      Swal.update({
        theme: Nightly.isDark ? 'dark' : 'light'
      });
    });
  }
})

3. 备选方案：动态加载但避免重复添加

如果必须动态加载样式，需先判断样式表是否已存在，防止重复加载：

Swal.fire({
  // 其他配置项不变
  onBeforeOpen: () => {
    const darkStyleExists = document.querySelector('link[href*="theme-dark"]');
    if (Nightly.isDark && !darkStyleExists) {
      const ss = document.createElement('link');
      ss.rel = "stylesheet";
      ss.href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css";
      document.head.appendChild(ss);
      Swal.update({ theme: 'dark' });
    } else {
      Swal.update({ theme: Nightly.isDark ? 'dark' : 'light' });
    }
  },
  onOpen: () => {
    // 开关初始化与事件绑定同上述方案
    const darkToggle = document.querySelectorAll('input[type="checkbox"]')[0];
    darkToggle.checked = Nightly.isDark;
    darkToggle.addEventListener('change', (e) => {
      Nightly.isDark = e.target.checked;
      Swal.update({
        theme: Nightly.isDark ? 'dark' : 'light'
      });
    });
  }
})

内容的提问来源于stack exchange，提问作者benz