如何切换深色模式

使用 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");
}