为深色/浅色模式切换滑块集成月亮与太阳图标-html教程-PHP中文网

为深色/浅色模式切换滑块集成月亮与太阳图标

本教程详细介绍了如何通过CSS为深色/浅色模式切换器中的滑块添加自定义图标，例如月亮和太阳。通过利用`:before`伪元素和`background-image`属性，我们可以在不改变原有HTML和JavaScript逻辑的前提下，实现滑块在不同模式下显示对应图标的视觉效果，从而提升用户体验和界面美观度。

概述与现有组件分析

在现代网页设计中，深色模式（Dark Mode）已成为一项常见功能，它能有效缓解用户眼部疲劳并节省OLED屏幕电量。通常，这种模式切换通过一个滑动开关（Toggle Switch）来实现。本教程将在此基础上，进一步美化滑动开关，使其在浅色模式下显示“太阳”图标，在深色模式下显示“月亮”图标，直观地指示当前模式。

我们首先回顾一下现有的HTML、CSS和JavaScript结构。

HTML 结构

一个典型的滑动开关由一个隐藏的复选框（input type="checkbox"）和一个可见的<span>元素（作为滑块的视觉呈现）构成。

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

登录后复制

这里，<label>元素包裹了input和span，使得点击label区域也能触发复选框。input上的onclick="darkLight()"用于调用JavaScript函数切换模式，id="checkBox"则用于JavaScript获取元素。

CSS 样式（核心部分）

原始CSS定义了滑块（.slider）及其内部的圆形按钮（.slider:before）的样式和过渡效果。

/* 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; /* 默认背景色 */
  transition: 0.4s;
  border-radius: 30px; /* 圆角 */
}

/* 滑块内部的圆形按钮（默认状态） */
.slider:before {
  position: absolute;
  content: ""; /* 必须有content才能显示伪元素 */
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white; /* 默认圆形按钮颜色 */
  transition: 0.4s;
  border-radius: 50%; /* 圆形 */
}

/* 复选框选中时滑块的样式 */
input:checked + .slider {
  background-color: #2196f3; /* 选中时的背景色 */
}

/* 复选框选中时滑块内部圆形按钮的样式 */
input:checked + .slider:before {
  transform: translateX(26px); /* 按钮向右移动 */
}

登录后复制

JavaScript 逻辑

JavaScript负责实际的深色/浅色模式切换，通常通过添加/移除CSS类来实现，并利用localStorage来持久化用户选择。

// 页面加载时根据localStorage恢复模式
$('#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 = "";
  }
}

/* 根据当前模式设置复选框的checked状态 */
if ($('main').hasClass('dark')) {
   $( '#checkBox' ).prop( "checked", true )
} else {
  $( '#checkBox' ).prop( "checked", false )
}

登录后复制

这段代码使用jQuery来操作DOM。darkLight()函数根据localStorage.toggled的值来切换#main和p元素的dark类。页面加载时会检查localStorage并设置复选框的checked属性，确保UI与存储的状态同步。

实现滑块图标切换

核心思想是利用CSS的background-image属性来替代.slider:before伪元素的纯色背景，并根据input:checked状态切换不同的背景图片。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

CSS 样式修改

我们需要修改.slider:before和input:checked + .slider:before的样式。

移除纯色背景： 将.slider:before中的background-color: white;注释掉或删除，因为我们将使用背景图片。
添加背景图片：
- 在.slider:before中，设置默认（浅色模式）图标，例如太阳。
- 在input:checked + .slider:before中，设置选中（深色模式）图标，例如月亮。
调整背景图片属性： 使用background-size: contain;确保图片完整显示在按钮区域内，background-repeat: no-repeat;避免图片重复，background-position: center;使图片居中。

以下是修改后的CSS代码：

/* 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; /* 默认背景色 */
  transition: 0.4s;
  border-radius: 30px;
}

/* 滑块内部的圆形按钮（默认状态 - 浅色模式，显示太阳图标） */
.slider:before {
  background-image: url("https://i.imgur.com/6NVOxEL.png"); /* 太阳图标URL */
  background-size: contain; /* 图片适应容器 */
  background-repeat: no-repeat; /* 不重复 */
  background-position: center; /* 居中 */
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  /* background-color: white;  移除或注释掉此行 */
  transition: 0.4s;
  border-radius: 50%;
}

/* 复选框选中时滑块的样式 - 保持不变 */
input:checked + .slider {
  background-color: #2196f3; /* 选中时的背景色 */
}

/* 复选框选中时滑块内部圆形按钮的样式（深色模式，显示月亮图标） */
input:checked + .slider:before {
   background-image: url("https://i.imgur.com/L8cR8EK.png"); /* 月亮图标URL */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center; /* 居中 */
  transform: translateX(26px); /* 按钮向右移动 */
}

/* 圆角样式 - 保持不变 */
.slider {
  border-radius: 30px;
}

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

登录后复制

重要提示：

请将url()中的图片链接替换为您自己的图标文件路径。建议将图标文件托管在您的服务器上，以确保链接的稳定性和可用性。
图标图片应为透明背景的PNG或SVG格式，这样可以更好地融入滑块背景。
图标的尺寸应与.slider:before的height和width相匹配或略小，以便background-size: contain能良好地工作。

HTML 和 JavaScript

HTML结构和JavaScript逻辑在此次图标切换的修改中无需做任何改动。HTML的input元素仍然负责状态管理和事件触发，JavaScript继续处理模式切换和状态持久化。CSS的修改是纯粹的视觉层面的增强。

完整示例

将上述修改后的CSS与原始HTML和JavaScript结合，即可实现带有图标的深色/浅色模式切换器。

HTML

<main id="main">
  <label class="switch">
    <input type="checkbox" onclick="darkLight()" id="checkBox" >
    <span class="slider"></span>
  </label>
  <p>这是一个示例文本，将随模式切换颜色。</p>
</main>

登录后复制

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; /* 添加字体以美化示例 */
}
main {
  height: 100vh;
  width: 100vw;
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 居中内容 */
}
main p {
  margin-top: 20px; /* 增加段落与开关的间距 */
  font-family: sans-serif;
  transition: color 0.3s ease;
}
/*TOGGLE COLORS*/
.dark {
  background: #545454;
  color: #efefef;
}
p {
  background: none !important; /* 确保p标签背景不被覆盖 */
  color: #333; /* 默认文本颜色 */
}
/*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;
  border-radius: 30px;
}

.slider:before {
  background-image: url("https://i.imgur.com/6NVOxEL.png"); /* 太阳图标 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  /* background-color: white; */ /* 移除或注释掉 */
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

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

input:checked + .slider:before {
   background-image: url("https://i.imgur.com/L8cR8EK.png"); /* 月亮图标 */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

登录后复制

JavaScript

// 请确保在HTML中引入了jQuery库，例如：
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function() {
  // 页面加载时根据localStorage恢复模式
  if (localStorage.toggled === 'dark') {
    $('#main, p').addClass('dark');
    $('#checkBox').prop("checked", true);
  } else {
    $('#main, p').removeClass('dark');
    $('#checkBox').prop("checked", false);
  }
});

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

  } else {
    $('#main, p').removeClass('dark');
    localStorage.toggled = "";
  }
}

登录后复制

注意： 原始JavaScript中的$('#main').toggleClass(localStorage.toggled); 可能会在localStorage.toggled为undefined时导致问题。上述示例已将其优化为更明确的addClass/removeClass逻辑，并在页面加载时进行初始化。

注意事项与总结

图片托管： 务必使用稳定可靠的图片托管服务或将图片文件放置在项目本地。使用公共图床链接存在失效的风险。
图标设计： 选择简洁、高对比度的图标，确保在小尺寸下也能清晰辨识。SVG格式是最佳选择，因为它具有矢量特性，在任何尺寸下都不会失真。
无障碍性： 虽然视觉图标增强了用户体验，但对于依赖屏幕阅读器的用户，应确保有适当的ARIA属性或文本描述来辅助理解开关的功能和当前状态。例如，可以为input添加aria-label="Toggle dark mode"。
性能： 优化图标文件大小，避免加载过大的图片影响页面性能。
兼容性： 现代浏览器对CSS伪元素和background-image属性的支持良好，但仍需注意webkit前缀的使用，以确保更好的兼容性。

通过以上步骤，我们成功地为深色/浅色模式切换器添加了直观的图标，不仅提升了界面的美观度，也增强了用户对当前模式的理解，提供了一个更加友好和互动的用户体验。这种方法利用了CSS的强大功能，在不增加复杂JavaScript逻辑的前提下，实现了丰富的视觉效果。

以上就是为深色/浅色模式切换滑块集成月亮与太阳图标的详细内容，更多请关注php中文网其它相关文章！