使用 JavaScript 切换布尔值以获得暗模式功能

Question

我正在尝试设置暗模式。这种逻辑不太有效。

我已经多次重新排列变量。我不太清楚。

var isDarkMode = false;
var darkModeToggle = false;

function toggleDarkMode(){
  if (isDarkMode === false && darkModeToggle === false){
    isDarkMode = true;
    setDarkMode();
  }
  if (isDarkMode === true && darkModeToggle === true){
    isDarkMode = false; 
    setDarkMode();
    darkModeToggle = false;
  }
  darkModeToggle = true;

}
function setDarkMode(){
    if (isDarkMode === true){
  //Change to dark
  }

  if (isDarkMode === false){
//Change to light
  }

}

我已经完成了其余的功能。我想我错过了一些简单的，我只是不知道它是什么。

Answer 1

你把事情搞得有点复杂了。我不知道darkModeToggle变量的原因，所以我已将其从我的解决方案中排除。

toggleDarkMode()就像

isDarkMode = !isDarkMode; setDarkMode();

• 没有理由在该函数中测试值，如下所示。

var isDarkMode = false;
function toggleDarkMode() {
  isDarkMode = !isDarkMode;
  setDarkMode();
}
function setDarkMode() {
  if (isDarkMode) {
    console.log("Change to dark");
  } else {
    console.log("Change to light");
  }
}
toggleDarkMode();
toggleDarkMode();
toggleDarkMode();
toggleDarkMode();

Answer 2

你不需要两个变量。只需保留单个变量即可跟踪当前模式。看看下面的工作示例：

var isDarkMode = false;
function toggleDarkMode(){
    var $el = document.getElementById("test");
    if (!isDarkMode){
      //Change to dark
      $el.style.background = "black";
      $el.style.color = "white";
    } else {
      //Change to light
      $el.style.background = "white";
      $el.style.color = "black";
    }
    isDarkMode = !isDarkMode;    
}

#test {
  background: white;
  color: black;
}

<p id ="test"> Test Paragraph </p>
<button onclick = "toggleDarkMode()"> Toggle Dark Mode </button>

Answer 3

• 例如，我们将说暗模式涉及具有类.dark的<main>元素。
• 在切换功能之外声明let mode = false。

• 将此三元控制语句放在切换函数中：

  /* pseudo-code:*/ mode = condition........... if.true...else..false
  /* real code..:*/ mode = main.matches('.dark') ? true    :    false;
  

  "如果 main 有类 .dark那么mode true否则就是它的false">

单击演示中的任意位置以切换暗模式。

let mode = false;
const main = document.querySelector('main');
main.onclick = toggleMode;
function toggleMode(e) {
  if (e.target.matches('main')) {
    e.target.classList.toggle('dark');
    mode = main.matches('.dark') ? true : false;
    console.log(mode);
  }
  return false;
}

* {
  margin: 0;
  padding: 0;
}
:root {
  font: 700 small-caps 3vw/1.2 Taholma;
}
main {
  height: 100vh;
  width: 100vw;
  background: #dad;
}
h1 {
  text-align: center;
  pointer-events: none;
}
.dark {
  color: #fc0;
  background: #000;
}
h1::before {
  content: 'Default ';
}
.dark h1::before {
  content: 'Dark ';
}

<main>
  <h1>Mode</h1>
</main>