暗 - 亮模式按钮答案

【问题标题】：dark - light mode button暗 - 亮模式按钮
【发布时间】：2021-08-12 04:15:09
【问题描述】：

我想把身体的bg改成白色，当它设置为“太阳”（灯光模式）并变回月亮（同时将背景改为黑色）

function dwmode(){
    var body = document.querySelector('body')
    document.getElementById('dWmode').innerHTML = '<i class="fas fa-sun"></i>';
        if(innerHTML == '<i class="fas fa-sun"></i>'){
            body.style.background = 'white'
    }
}

【问题讨论】：

她的任何条件始终为真（或者在innerHTML 的情况下只是undefined）。如果您正在寻找实际的暗模式，可以查看 CSS 中的 @media (prefers-color-scheme:dark){}。否则，这是令人困惑的。您甚至可以使用 CSS 将 :before 的 content 更改为“太阳”或“月亮”。

标签： javascript button darkmode lightmode

【解决方案1】：

body = document.querySelector("body");
sun = document.getElementById("sun");
moon = document.getElementById("moon");

function dwmode() {
  if (sun.style.visibility == "visible") {
    body.style.backgroundColor = "white"
    sun.style.visibility = "hidden";
    moon.style.visibility = "visible";
  } else {
    body.style.backgroundColor = "gray"
    sun.style.visibility = "visible";
    moon.style.visibility = "hidden";
  }



}

body {
  background-color: gray;
}

.sunv {
  visibility: visible;
}

.moonv {
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />



<i class="fas fa-sun sunv" id="sun" onclick="dwmode()"></i>
<i class="fas fa-moon moonv" id="moon" onclick="dwmode()"></i>

【讨论】：