使用jQuery向localStorage添加暗模式样式表

<button id="darkModeToggle">切换暗模式</button>

$(document).ready(function() {
  // 检查localStorage中的暗模式状态
  var darkMode = localStorage.getItem('darkMode');

  // 如果darkMode为true，则启用暗模式
  if (darkMode === 'true') {
    enableDarkMode();
  }

  // 监听按钮的点击事件
  $('#darkModeToggle').click(function() {
    // 切换暗模式状态
    darkMode = !darkMode;

    // 更新localStorage中的暗模式状态
    localStorage.setItem('darkMode', darkMode);

    // 根据当前状态切换样式表
    if (darkMode) {
      enableDarkMode();
    } else {
      disableDarkMode();
    }
  });

  // 启用暗模式的函数
  function enableDarkMode() {
    // 添加暗模式样式表到localStorage
    var darkModeStyleSheet = '<link rel="stylesheet" href="dark-mode.css">';
    localStorage.setItem('darkModeStyleSheet', darkModeStyleSheet);

    // 动态插入暗模式样式表到文档头部
    $('head').append(darkModeStyleSheet);
  }

  // 禁用暗模式的函数
  function disableDarkMode() {
    // 从localStorage中移除暗模式样式表
    var darkModeStyleSheet = localStorage.getItem('darkModeStyleSheet');
    if (darkModeStyleSheet) {
      $('head').find('link[href="dark-mode.css"]').remove();
      localStorage.removeItem('darkModeStyleSheet');
    }
  }
});