如何为明暗模式切换滑块添加日月切换图片并保留过渡效果？

下面是实现需求的具体修改方案，完全保留你原有滑块的过渡动画，同时实现亮色模式显示月亮、暗色模式显示太阳的效果：

核心修改说明 #

• 将滑块按钮（slider:before）的白色背景替换为SVG图标，通过复选框checked状态切换太阳/月亮图标
• 保留原有滑块的滑动位移、背景色过渡动画
• 页面加载时自动匹配本地存储的明暗模式，同步图标与复选框状态

修改后的HTML（无需改动，沿用原有结构）

<main id="main">
  <label class="switch">
    <input type="checkbox" onclick="darkLight()" id="checkBox" >
    <span class="slider"></span>
  </label>
</main>

修改后的CSS（关键改动在图标切换逻辑）

body {
  margin: 0;
  padding: 0;
}
main {
  height: 100vh;
  width: 100vw;
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main p {
  align-self: center;
  font-family: sans-serif;
  transition: color 0.3s ease;
}
/*TOGGLE COLORS*/
.dark {
  background: #545454;
  color: #efefef;
}
p {
  background: none !important;
}
/*SWITCH*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  align-self: center;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  /* 亮色模式显示月亮图标 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>');
  background-size: cover;
  background-position: center;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  /* 暗色模式显示太阳图标 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>');
}

/* Rounded sliders */
.slider {
  border-radius: 30px;
}

.slider:before {
  border-radius: 50%;
}

修改后的JS（优化初始状态同步逻辑）

$('#main').toggleClass(localStorage.toggled);

function darkLight() {
  /*DARK CLASS*/
  if (localStorage.toggled != 'dark') {
    $('#main, p').toggleClass('dark', true);
    localStorage.toggled = "dark";
     
  } else {
    $('#main, p').toggleClass('dark', false);
    localStorage.toggled = "";
  }
}

/* 根据明暗模式同步复选框状态，确保图标正确显示 */
const isDarkMode = $('main').hasClass('dark');
$('#checkBox').prop("checked", isDarkMode);

关键细节说明 #

1. 图标嵌入方式：使用base64编码的SVG图标，避免外部图片依赖，同时保证图标清晰度
2. 动画保留：滑块的滑动位移（transform: translateX）和背景色变化均保留原有的0.4秒过渡动画，切换流畅自然
3. 状态同步：页面加载时自动检测本地存储的明暗模式，同步复选框的checked状态，确保图标与当前模式匹配

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