如何 - 切换暗模式

使用 CSS 和 JavaScript 在暗模式和亮模式之间切换。

切换类

使用任何应存储您要切换设计的内容的元素。在我们的示例中，我们将使用<body>为了简单起见：

<body>

样式<body>元素并创建一个.dark-mode切换类：

body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}

.dark-mode {
background-color: black;
color: white;
}

获取<body>元素并在之间切换.dark-mode类：

function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}

提示：另请参阅如何添加类。

提示：了解更多关于类列表我们的 JavaScript 参考中的属性。