在CSS中启用黑暗模式，允许网站访问者随时切换到对眼睛友好且节省资源的设计。
可以使用几种UX模式为网站添加黑暗主题。
在本教程中，我们将向展示如何将jQuery添加到页面顶部，以便用户可以轻松地打开和关闭黑暗模式。
我们的演示案例可以自响应缩放，所以从智能手机到台式机到大屏幕，所有设备尺寸都会很好看。以下是灯光模式最终的样子：
这是同一页面的暗模式版本：
让我们开始为所属的HTML，CSS和JavaScript文件设置文件结构。
1.创建文件结构
创建一个文件夹并在其中放置三个空文本文件：一个用html，一个带有.css，一个带有.js扩展名。还要为要在页面上显示的图像创建图像文件夹。
我们的“CSS中的黑暗模式”演示使用了jQuery。
在该示例中，我们将直接从Cloudflare CDN将脚本添加到HTML文件中，以使其始终保持最新状态。
但是，如果需要，还可以下载jQuery库并将其添加为本地.js文件。
在开始使用代码之前，以下是文件结构的样子：
- dark-mode-css/
- images/
- cake.jpg
- index.html
- script.js
- style.css
2.标记HTML
在HTML中，将暗模式开关添加到页面顶部。然后，为标题创建<h1>标记，并为页面内容创建语义<article>标记。最后，在结束</ body>标记之前添加两个<script >标记。
请注意在自定义脚本之前添加jQuery库，以便它可以使用其功能。该style.css的文件进入<HEAD>页的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo | Dark Mode in CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="switch">Dark mode:
<span class="inner-switch">OFF</span>
</div>
<h1 class="title">The Best Recipes of All Time</h1>
<article>
<h1>Raspberry Cake</h1>
<p><small>Created with Cupcake Ipsum</small></p>
<p>...</p>
<img src="images/cake.jpg">
<p>...</p>
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
3.为灯光模式创建CSS
首先，让我们为灯光模式创建CSS，因为这是页面的默认状态。下面的CSS使用基于列的flexbox布局，使可以轻松地在页面上定位元素，特别是处理暗模式切换和<img>元素的包装的.switch类。
body {
font-family: sans-serif;
font-size: 1.125rem;
display: flex;
flex-direction: column;
max-width: 50rem;
margin: 0 auto;
padding: 0 0.9375rem;
}
small {
font-style: italic;
}
article {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
display: block;
align-self: center;
}
.switch {
align-self: flex-end;
margin: 0.9375rem;
}
.inner-switch {
display: inline-block;
cursor: pointer;
border: 1px solid #555;
border-radius: 1.25rem;
width: 3.125rem;
text-align: center;
font-size: 1rem;
padding: 0.1875rem;
margin-left: 0.3125rem;
}
把 display: flex;添加到<body>标签上，就可以使用align-self：flex-end; 暗模式开关。
在align-self CSS属性对横轴来分离flex元素。（对列设定flex-direction，用left-to-right ）。
通过这种方式，开关自动定位到Flex容器的右上角 - 视口。由于flexbox，.switch是布局的full-width，因此它的高度也不会在较小的屏幕尺寸下崩溃。
同样，display:flex; 和flex-direction：column; 添加到<article>标签的规则，可以使用align-self：center; 对文章内的所有图像进行设定。
因此，可以轻松地将所有图像居中，而无需为HTML添加额外的元素来定位。
4.使用JQUERY添加SWITCH功能
该script.js文件添加开关功能切换。因此，当用户单击切换时，将应用暗模式并且开关上的标签将变为“ON”。并且，如果用户在页面处于黑暗模式时单击切换，则应用灯光模式并且标签变为“OFF”。
$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
$( "body" ).removeClass( "dark" );
$( ".inner-switch" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark" );
$( ".inner-switch" ).text( "ON" );
}
});
上面的脚本使用了以下jQuery函数：
- on（“click”，function（）{...}）是一个事件处理程序，当用户单击 .inner-switch元素时触发函数内部的操作，
- hasClass（）检查 .dark类是否分配给 .inner-switch元素（这是基于切换的状态），
- 当用户切换到轻模式时， removeClass （）从HTML中删除 .dark类，
- 当用户切换到黑暗模式时， addClass（）将 .dark类添加到HTML，
- text（）设置开关上标签的文本 - 它是“OFF”或“ON”。
5.为黑暗模式添加CSS
需要做的最后一件事是为黑暗模式打开时，通过上面的jQuery脚本添加到HTML 的.dark类定义一些样式。除了.dark类之外，还可以使用.dark * universal CSS选择器将暗模式主题应用于所有直接和间接子项。
.dark,
.dark * {
background-color: #222;
color: #e6e6e6;
border-color: #e6e6e6;
}
属于.dark类的CSS将转到style.css文件的末尾。
这是因为CSS（=层叠样式表）的级联性质。
通过这种方式，级联可以覆盖整个页面上的颜色，而不会碰到特异性或其他问题。
如果要构建更复杂的页面，还可以为暗模式样式创建单独的dark.css文件。在这种情况下，请注意始终在HTML 的<head>部分中的通用style.css文件之后添加特定的dark.css，以便级联可以正常工作。
查看现场演示
就这样。现在，页面上的暗模式切换正常启动并运行。如果你想看看它在真实网站上是如何工作的，你还可以使用我们上面讨论的HTML，CSS和jQuery代码查看我们的“ CSS中的黑暗模式 ”现场演示。
组装起来
CSS中的黑暗模式不仅为的网站添加了额外的额外功能，还改善了用户体验和可访问性。在发布长格式内容片段或要求用户在较长时间内关注屏幕的网站上，暗模式切换特别有用。
如果在选择暗模式配色方案时遇到困难并需要一些帮助，也可以查看我们的编码器指南以找到完美的调色板。
