CSS实现暗黑模式

作者：System 时间：2024年08月17日分类：所有,css 字数：1329

这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。

要在网页中实现一个简单的暗黑模式，你可以通过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中的一些选择器用于更改切换状态下页面内容的样式。

CSS实现暗黑模式

评论已关闭

推荐阅读