讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 >

正文

0

0

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

心靈之曲

心靈之曲

发布时间：2025-11-13 15:47:40

|

457人浏览过

|

来源于php中文网

原创

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

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

概述与现有组件分析

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

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

HTML 结构

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

这里，

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状态切换不同的背景图片。

AskAI
AskAI

无代码AI模型构建器，可以快速微调GPT-3模型，创建聊天机器人

下载

CSS 样式修改

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

  1. 移除纯色背景： 将.slider:before中的background-color: white;注释掉或删除，因为我们将使用背景图片。
  2. 添加背景图片：
    • 在.slider:before中，设置默认（浅色模式）图标，例如太阳。
    • 在input:checked + .slider:before中，设置选中（深色模式）图标，例如月亮。
  3. 调整背景图片属性： 使用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


  
  
这是一个示例文本，将随模式切换颜色。

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库，例如：
// 

$(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逻辑，并在页面加载时进行初始化。

注意事项与总结

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

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

相关文章

轮播图怎么制作html带过渡动画_加html轮播图动画效果法【动效】

HTML怎样用CSS加背景图片_HTML用CSS加背景图片法【关联】

HTML下拉框怎么设缩进_HTML下拉框调textindent缩选项字【排版】

JavaScript 导航菜单点击失效问题的完整解决方案

html5网站模板怎样替换视频播放封面_html5换视频封面技巧【要点】

相关标签:

css javascript java jquery html js ajax go svg 伪元素 浏览器 ai JavaScript jquery css html webkit switch checkbox undefined 事件 dom position 伪元素 background input ui 图标设计

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JavaScript教程：根据HTML data-* 属性构建唯一数据集合 下一篇：解决HTML邮件模板中条纹表格样式兼容性问题：深入理解与实践

作者最新文章

Go 项目中如何组织同包文件到不同子目录（如 models）

2026-01-15 15:43

国产像素《菲尔纳传说》登陆Steam 5年打造复古RPG

2026-01-15 15:45

如何让按钮在响应式布局中保持固定位置不随屏幕缩放偏移

2026-01-15 15:48

标题：使用 AspectJ 实现对带注解成员变量的读写访问拦截

2026-01-15 15:48

使用 Socket.IO 连接 Node.js 与 Go 服务端的潜在缺陷分析

2026-01-15 15:50

程序员笔记 CherryTree 1.6.3 发布

2026-01-15 15:52

搜打撤热门新游《ARC Raiders》Steam版现已封锁国区

2026-01-15 15:56

美团外卖开学季红包怎么领取

2026-01-15 15:59

Go 项目中如何正确组织多目录结构的同包代码

2026-01-15 16:02

标题：使用 AspectJ 实现基于字段注解的读写访问拦截教程

2026-01-15 16:06

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

554

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

551

2023.09.20

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程，阅读专题下面的文章了解更多详细内容。

2

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 19.3万人学习

最新文章

更多
HTML转HTML5怎样避免SEO下降_保留关键标签强化语义【SEO】
html5网站模板怎么调整卡片圆角大小_html5调圆角方法【说明】
如何在 Ant Design 的 Col 组件中居中显示 Card？
html5网站模板怎么更改表格边框样式_html5改表格边框方法【技巧】
HTML5如何通过URLSearchParams取查询数据_HTML5查询串取数法【总结】
HTML5的SpeechRecognition能做语音识别吗_HTML无接口吗【科普】
HTML怎样设背景图片圆角_HTML背景图片圆角设置法【造型】
html空格符号怎么打_注释中写空格符号会被解析吗【测试】
HTML5怎样实现前端数据加密_HTML5前端数据加密实现方式【指南】
html空格符号怎么打_登录页提示信息空格技巧【技巧】
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部