如何在深色模式切换按钮的白色滑块内添加Font Awesome图标

1. 调整HTML结构 #

先把切换按钮的结构梳理清楚，让滑块容器包含两个图标（太阳/月亮），确保切换时能联动显示：

<div class="dark-mode-toggle">
  <input type="checkbox" id="dark-mode-checkbox">
  <label for="dark-mode-checkbox" class="toggle-slider">
    <div class="slider">
      <i class="fa-solid fa-sun"></i>
      <i class="fa-solid fa-moon"></i>
    </div>
  </label>
</div>

注意：要确保已经在页面中引入Font Awesome样式文件，比如在<head>里加：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

2. 核心CSS设置 #

重点通过定位和flex布局让图标固定在滑块内，同时保证滑块移动时图标同步跟随：

/* 切换按钮容器 */
.dark-mode-toggle {
  position: relative;
  width: 60px;
  height: 30px;
}

/* 隐藏原生复选框 */
#dark-mode-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 切换背景条 */
.toggle-slider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

/* 白色滑块容器 */
.slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-radius: 50%;
  /* 用flex让图标居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 滑块移动动画 */
  transition: transform 0.3s ease;
}

/* 图标通用样式 */
.slider i {
  font-size: 14px;
  position: absolute;
  transition: opacity 0.3s ease;
}

/* 默认浅色模式：显示太阳，隐藏月亮 */
.slider .fa-sun {
  opacity: 1;
  color: #f1c40f;
}
.slider .fa-moon {
  opacity: 0;
  color: #34495e;
}

/* 深色模式激活状态 */
#dark-mode-checkbox:checked + .toggle-slider {
  background-color: #2c3e50;
}

/* 滑块移动到右侧 */
#dark-mode-checkbox:checked + .toggle-slider .slider {
  transform: translateX(30px);
}

/* 深色模式下切换图标显示 */
#dark-mode-checkbox:checked + .toggle-slider .fa-sun {
  opacity: 0;
}
#dark-mode-checkbox:checked + .toggle-slider .fa-moon {
  opacity: 1;
}

3. JavaScript逻辑（保留原有功能） #

确保切换状态和本地存储联动，同时同步滑块的视觉状态：

const darkModeCheckbox = document.getElementById('dark-mode-checkbox');

// 页面加载时恢复之前的深色模式设置
if (localStorage.getItem('darkMode') === 'enabled') {
  document.body.classList.add('dark-mode');
  darkModeCheckbox.checked = true;
}

// 切换深色模式的逻辑
darkModeCheckbox.addEventListener('change', () => {
  if (darkModeCheckbox.checked) {
    document.body.classList.add('dark-mode');
    localStorage.setItem('darkMode', 'enabled');
  } else {
    document.body.classList.remove('dark-mode');
    localStorage.setItem('darkMode', 'disabled');
  }
});

关键细节说明 #

• 用flex布局让图标在滑块内自动居中，不用手动调试margin/padding
• 滑块移动用transform: translateX()，比修改left属性的动画更流畅、性能更好
• 图标切换用opacity配合过渡效果，避免生硬的显示/隐藏
• 所有动画都加了0.3s ease的过渡，让切换过程更自然

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