我的页面在暗模式下无法正常工作，我该如何解决？

Question

I have This simple website that i need to make it change from light theme to dark theme, the light theme works fine, but the dark theme only changes its button properly because when i click in the button to change the "body" elements should change its class from "light-theme" to "dark-theme", instead it changes to "light-theme dark-theme" here's HTML `我有这个简单的网站，我需要将其从浅色主题更改为深色主题，浅色主题工作正常，但深色主题只会正确更改其按钮，因为当我单击按钮更改“正文”元素时，应该更改它的类从“light-theme”到“dark-theme”，改为“light-theme dark-theme”这里是 HTML `

<body class="light-theme">
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
    <div>
      <button class="btn">Dark</button>
    </div>
    <script src="app.js"></script>
    <noscript>You need to enable JavaScript to view the full site</noscript>

Heres CSS

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

.btn:focus {
  outline-style: none;
}

body {
  background: var(--bg); 
}

ul {
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme{
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

and heres JavaScript

'use strict';
const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function () {
  document.body.classList.toggle('dark-theme')

  var className = document.body.className;
  if(className == "light-theme") {
    this.textContent = "Dark";
  } else {
    this.textContent = "Light";
  }
  console.log('current class name: ' + className);
});

` `

I tried to change some things in css but later found that the problem might be in the javascript, but my code is exactly as the code in my course is.我尝试更改css中的一些东西，但后来发现问题可能出在javascript中，但我的代码与我课程中的代码完全一样。

Answer 1

when i click in the button to change the "body" elements should change its class from "light-theme" to "dark-theme", instead it changes to "light-theme dark-theme"当我单击按钮更改“body”元素时，应将其类从“light-theme”更改为“dark-theme”，而不是更改为“light-theme dark-theme”

That's indeed true - your JS code is only toggling the class "dark-theme" and does nothing with the "light-theme" class.这确实是真的——你的 JS 代码只是切换类"dark-theme" ，而对"light-theme"类没有任何作用。

So a simple fix would be to toggle both classes:因此，一个简单的解决方法是切换这两个类：

switcher.addEventListener('click', function () {
  document.body.classList.toggle('dark-theme')
  document.body.classList.toggle('light-theme'); // add this line

  var className = document.body.className;
  if(className == "light-theme") {
    this.textContent = "Dark";
  } else {
    this.textContent = "Light";
  }
  console.log('current class name: ' + className);
});

But you could simplify your code because you really don't need 2 classes here.但是你可以简化你的代码，因为你真的不需要这里的 2 个类。 If light theme is the default, just remove the light-theme class and all its CSS rules, and apply those to body instead.如果 light 主题是默认的，只需删除light-theme类及其所有 CSS 规则，并将它们应用于body 。 The .dark-theme rules will override these when the class is set, but not otherwise. .dark-theme规则将在设置类时覆盖这些规则，否则不会。

我的页面在暗模式下无法正常工作，我该如何解决？

问题描述

1 个解决方案

解决方案1
0 2022-12-13 17:39:32

我的页面在暗模式下无法正常工作，我该如何解决？

问题描述

1 个解决方案

解决方案1 0 2022-12-13 17:39:32

解决方案1
0 2022-12-13 17:39:32