暗模式和亮模式html、css、javascript怎么样？答案

【问题标题】：Dark mode and light mode html, css, javascript how?暗模式和亮模式html、css、javascript怎么样？
【发布时间】：2021-12-30 11:46:37
【问题描述】：

您好，提前谢谢您，我想制作一个暗模式按钮，如果你点击它，它就会变成暗模式，然后按钮被称为白色模式，然后当你再次点击它时，它变成白色模式，按钮再次被称为暗模式。

代码：

<!DOCTYPE html> 
<html>
<head>
<style>
.page {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<div class="page">Hello</div>

<button onclick="myFunction()">dark mode</button>

<script>
function myFunction() {
   var element = document.page;
   element.classList.toggle("dark-mode");
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript html css themes darkmode

【解决方案1】：

您正在尝试切换 document.page 上的 dark-mode 类，该类不存在。

相反，您应该在document.body 上切换它。

<!DOCTYPE html> 
<html>
<head>
<style>
.page {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<div class="page">Hello</div>

<button onclick="myFunction()">dark mode</button>

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

</body>
</html>

要仅在 div 上切换类，请使用 querySelector：

<!DOCTYPE html> 
<html>
<head>
<style>
.page {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<div class="page">Hello</div>

<button onclick="myFunction()">dark mode</button>

<script>
function myFunction() {
   var element = document.querySelector('div.page');
   element.classList.toggle("dark-mode");
}
</script>

</body>
</html>

【讨论】：

是的，但是我必须在我的在线网站上将一个 div 框变成暗模式，我在互联网上找到了它，但我不明白它是如何用于 div 类的。
@Kangoroo 我已经更新了我的答案。
我想在我的网站上包含这个但它不起作用gecko.achmeindein.de（网站是德语）左上角是按钮
@Kangoroo 您需要覆盖默认的color 和background-color。将您的 .dark-mode CSS 更改为：.dark-mode { background-color: #36393F !important; color: white !important; }。
我该如何做第二页（.scrollseite2），如果暗模式是从按钮到白色模式的写入

【解决方案2】：

function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
   if (element.classList.contains("dark-mode")){
    document.getElementById('btn').innerHTML = "Light Mode";
   }
   else{
    document.getElementById('btn').innerHTML = "Dark Mode";
   }
}

.page {
  display:inline;
  background:#FFF;
  color: #121212;
  font-size: 25px;
}

.dark-mode,
.dark-mode .page {
  background-color:#202020;
  color: #FFF;
}

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
<div class="page">Hello</div>
<br><br><br>
<button onclick="myFunction()" id="btn">Dark mode</button>
</body>
</html>

【讨论】：