CSS实现暗黑模式
要在网页中实现一个简单的暗黑模式，你可以通过CSS为网页的不同元素设置不同的颜色。以下是一个基本的示例，演示如何切换网页的主题颜色：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<h1>Welcome to Dark Mode</h1>
<p>Toggle the switch to change the theme.</p>
<label for="theme-switch" class="theme-switch-label">Dark Mode</label>
<input type="checkbox" id="theme-switch" class="theme-switch">
</div>
</body>
</html>CSS (styles.css):
/* Default light theme */
body {
background-color: white;
color: black;
}
/* Dark theme */
.dark-theme body {
background-color: black;
color: white;
}
/* Toggle switch styles */
.theme-switch {
display: none;
}
.theme-switch-label {
cursor: pointer;
text-transform: uppercase;
color: grey;
}
/* Toggle switch checked state */
.theme-switch:checked + .theme-switch-label {
color: #fefefe;
}
.theme-switch:checked ~ .content {
background-color: black;
color: white;
}
.theme-switch:checked ~ .content h1 {
color: white;
}
.theme-switch:checked ~ .content p {
color: grey;
}在这个示例中，我们有一个切换开关和一些内容。当切换开关被选中时，页面会通过.dark-theme类切换到暗黑模式。CSS中的一些选择器用于更改切换状态下页面内容的样式。
评论已关闭