如何用jQuery将网站主题切换的select标签替换为切换开关？

没问题！我帮你把原来的下拉选择器改成类似YouTube的切换开关，同时保留你现有的主题切换、淡入淡出动画和Cookie记忆功能。下面是完整的实现方案：

把原来的<select class="style-change">替换成自定义的切换开关，用原生checkbox配合CSS美化，实现YouTube的开关样式：

<!-- 主题切换开关 -->
<label class="theme-toggle">
  <input type="checkbox" id="theme-switch">
  <span class="toggle-slider"></span>
</label>
<!-- 可选：添加模式说明文字 -->
<span class="theme-label">深色模式</span>

通过CSS隐藏原生checkbox，把滑块美化成YouTube风格的圆角切换按钮：

/* 隐藏原生复选框 */
#theme-switch {
  display: none;
}

/* 开关容器 */
.theme-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  cursor: pointer;
}

/* 滑块背景 */
.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.3s ease;
}

/* 滑块圆点 */
.toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* 开启深色模式后的样式（可自定义颜色） */
#theme-switch:checked + .toggle-slider {
  background-color: #2196F3; /* 匹配YouTube的蓝色开关，可换成你的品牌色 */
}

#theme-switch:checked + .toggle-slider::before {
  transform: translateX(24px);
}

/* 可选：主题标签样式 */
.theme-label {
  margin-left: 8px;
  font-size: 14px;
  vertical-align: middle;
}

调整原来的事件监听逻辑，适配checkbox的切换状态，同时保留淡入淡出动画和Cookie存储：

$(function() {
  // 定义主题文件路径，请根据你实际的CSS文件名修改
  const themeMap = {
    light: "light",
    dark: "dark"
  };

  // 页面加载时：读取Cookie，恢复之前保存的主题和开关状态
  const savedTheme = $.cookie("cs-theme") || "light";
  $('link[rel="stylesheet"]').attr("href", `${themeMap[savedTheme]}.css`);
  // 如果之前是深色模式，自动勾选开关
  if (savedTheme === "dark") {
    $("#theme-switch").prop("checked", true);
  }

  // 监听开关切换事件
  $("#theme-switch").change(function() {
    const isDarkMode = $(this).is(":checked");
    const targetTheme = isDarkMode ? "dark" : "light";

    // 执行淡入淡出切换动画
    $('body').fadeOut("slow", function() {
      // 替换主题CSS文件
      $('link[rel="stylesheet"]').attr("href", `${themeMap[targetTheme]}.css`);
      // 保存主题到Cookie，有效期设为365天（可自行调整）
      $.cookie("cs-theme", targetTheme, { expires: 365, path: "/" });
      // 页面淡入显示新主题
      $('body').fadeIn("slow");
    });
  });
});

• 确保你已经引入了jQuery和jQuery Cookie插件（和你原来项目中的依赖保持一致）
• 调整themeMap中的值，匹配你实际的CSS文件名（比如如果深色主题是dark-style.css，就改成dark: "dark-style"）
• 可以根据网站风格自定义开关的颜色、尺寸，比如把激活态的背景色换成你的品牌主色

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