CSS暗模式切换示例
首先通过JavaScript获取用户系统偏好和本地存储的主题设置，初始化页面主题；1. HTML结构包含一个按钮用于触发主题切换；2. CSS使用:root定义亮色主题变量，.dark-mode类定义暗色主题变量，并通过var()应用这些变量；3. JavaScript检测prefers-color-scheme并读取localStorage决定初始主题；4. 点击按钮时切换html元素上的dark-mode类，并将当前状态保存至localStorage；5. 所有颜色变化均带有0.3秒过渡动画，提升用户体验；最终实现了一个支持记忆选择、尊重系统偏好且视觉平滑的暗黑模式切换功能。
实现一个 CSS 暗黑模式切换（Dark Mode Toggle）功能，通常结合 HTML、CSS 和少量 JavaScript。下面是一个简洁、实用的完整示例，适合初学者或需要快速集成的项目。
✅ 基本思路
- 使用一个切换按钮（toggle）控制页面主题。
- 主题通过在
或上添加类（如dark-mode）来切换。 - 利用 CSS 变量定义亮色和暗色主题颜色。
? HTML 结构
<!DOCTYPE html>
<html lang="zh" class="light-mode">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dark Mode Toggle</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<p>点击按钮切换主题?</p>
<button id="theme-toggle">切换暗黑模式</button>
</header>
<main>
<section>
<h2>这是主要内容区域</h2>
<p>背景和文字颜色会根据主题自动变化。</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>? CSS 样式（支持主题变量）
/* style.css */
:root {
/* 亮色主题变量 */
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #007bff;
--header-bg: #f0f0f0;
}
.dark-mode {
/* 暗色主题变量 */
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #00d8ff;
--header-bg: #333;
}
/* 应用变量 */
html {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: var(--header-bg);
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover {
opacity: 0.9;
}
/* 添加一点动画效果 */
h1, h2, p {
transition: color 0.3s ease;
}⚙️ JavaScript 切换逻辑
// script.js
const toggleButton = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// 检查用户偏好（优先使用系统设置）
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentMode = localStorage.getItem('theme') || (prefersDarkMode ? 'dark' : 'light');
// 初始化主题
if (currentMode === 'dark') {
htmlElement.classList.add('dark-mode');
}
// 切换主题函数
function toggleTheme() {
const isDark = htmlElement.classList.toggle('dark-mode');
// 保存用户选择
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
// 绑定点击事件
toggleButton.addEventListener('click', toggleTheme);✅ 功能亮点
- 记忆用户选择：使用
localStorage保存主题偏好。 - 尊重系统偏好：首次访问时根据
prefers-color-scheme自动适配。 - 平滑过渡：CSS
transition让颜色变化更自然。 - 可扩展性强：通过 CSS 变量可轻松添加更多主题（如深红、紫色等）。
? 小技巧
- 你可以把按钮做成 Moon/Sun 图标，提升视觉体验。
- 使用
color-scheme: light dark;可让浏览器控件（如输入框）也适配主题。
:root {
color-scheme: light dark;
}基本上就这些，不复杂但很实用。你可以把这个结构集成到任何网页中。
以上是CSS暗模式切换示例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undress AI Tool
免费脱衣服图片
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Edge PDF查看器不起作用
Aug 07, 2025 pm 04:36 PM
testthepdfinanotherapptoderineiftheissueiswiththefileoredge.2.enablethebuilt inpdfviewerbyTurningOff“ eflblyopenpenpenpenpenpdffilesexternally”和“ downloadpdffiles” inedgesettings.3.clearbrowsingdatainclorwearbrowsingdataincludingcookiesandcachedcachedfileresteroresoreloresorelorsolesoresolesoresolvereresoreorsolvereresoreolversorelesoresolvererverenn
用Docker将Java应用程序部署到Kubernetes
Aug 08, 2025 pm 02:45 PM
容器化Java应用：创建Dockerfile，使用基础镜像如eclipse-temurin:17-jre-alpine，复制JAR文件并定义启动命令，通过dockerbuild构建镜像并用dockerrun测试本地运行。2.推送镜像到容器注册表：使用dockertag标记镜像并推送到DockerHub等注册表，需先登录dockerlogin。3.部署到Kubernetes：编写deployment.yaml定义Deployment，设置副本数、容器镜像和资源限制，编写service.yaml创建
如何在Java中实现简单的TCP客户端？
Aug 08, 2025 pm 03:56 PM
Importjava.ioandjava.net.SocketforI/Oandsocketcommunication.2.CreateaSocketobjecttoconnecttotheserverusinghostnameandport.3.UsePrintWritertosenddataviaoutputstreamandBufferedReadertoreadserverresponsesfrominputstream.4.Usetry-with-resourcestoautomati
VS代码快捷方式专注于Explorer面板
Aug 08, 2025 am 04:00 AM
VSCode中可通过快捷键快速切换面板与编辑区。要跳转至左侧资源管理器面板，使用Ctrl Shift E（Windows/Linux）或Cmd Shift E（Mac）；返回编辑区可用Ctrl `或Esc或Ctrl 1~9。相比鼠标操作，键盘快捷键更高效且不打断编码节奏。其他技巧包括：Ctrl KCtrl E聚焦搜索框，F2重命名文件，Delete删除文件，Enter打开文件，方向键展开/收起文件夹。
如何在Java中使用一个时循环
Aug 08, 2025 pm 04:04 PM
AwhileloopinJavarepeatedlyexecutescodeaslongastheconditionistrue;2.Initializeacontrolvariablebeforetheloop;3.Definetheloopconditionusingabooleanexpression;4.Updatethecontrolvariableinsidethelooptopreventinfinitelooping;5.Useexampleslikeprintingnumber
修复：Windows Update无法安装
Aug 08, 2025 pm 04:16 PM
runthewindowsupdatetrubloubleshooterviaSettings>更新＆安全> is esseShootsoAtomationfixCommonissues.2.ResetWindowSupDateComponentsByStoppingRealatedServices，RenamingTheSoftWaredWaredWaredSoftwaredSistribution andCatroot2Folders，intrestrestartingthertingthertingtherserviceSteStoceTocle
Java对象的序列化过程是什么？
Aug 08, 2025 pm 04:03 PM
JavaserializationConvertSanObject'SstateIntoAbyTeSteAmForStorageorTransermission，andDeserializationReconstructstheObjectStheObjectFromThstream.1.toenableserialization，aclassMustimustimplementTheSerializableizableface.2.UseObjectObjectObjectObjectOutputputputputputtreamToserialializeanobectizeanobectementeabectenobexpent，savin
python numpy线性代数示例
Aug 07, 2025 pm 04:52 PM
NumPy是Python中进行科学计算的核心库，擅长处理线性代数运算，提供高效的ndarray数组和numpy.linalg模块中的函数。1.使用np.linalg.solve(A,b)可求解线性方程组Ax=b，得到解向量x；2.矩阵转置通过A.T实现；3.矩阵乘法可用np.dot(A,B)或A@B；4.矩阵逆通过np.linalg.inv(A)计算，需确保矩阵可逆；5.行列式由np.linalg.det(A)给出；6.特征值与特征向量通过np.linalg.eig(A)求得，特征向量已归一化；
