如何 - 切换暗黑模式
使用 CSS 和 JavaScript 在暗黑模式和浅色模式之间切换。
切换类
步骤 1) 添加 HTML
使用任何应该存储您想要切换设计的元素。在我们的示例中，为了简单起见，我们将使用 <body>
示例
<body>
步骤 2) 添加 CSS
设置 <body> 元素的样式，并创建一个 .dark-mode 类用于切换
示例
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
步骤 3) 添加 JavaScript
获取 <body> 元素并在 .dark-mode 类之间切换
示例
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
自己试试 »
提示： 也请查看 如何添加类。
提示： 在我们的 JavaScript 参考中了解有关 classList 属性的更多信息。
