三个版本实现黑白主题切换

之前我们写过一个非常简单的黑白切换按钮，见链接

简单的js代码实现主题色切换

今天我们来继续写主题切换，最终实现效果如图

下面我们来看下代码如何实现更好：

html部分：

<header>
   <button id="modeBtn">🌞</button>
   <h1>主题切换</h1>
</header>
<main>
   <div class="pic">
       <img src="图片链接">
   </div>
   <div class="description">
       <p>
         文字内容，略
       </p>
    </div>
</main>

版本一

点击按钮切换的时候，js代码去判断当前按钮的内容是太阳还是月亮，判断之后对页面作出白天和黑夜的颜色切换

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(e.target.innerHTML === '🌞') {
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '🌜';
  } else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
  }
});

这样写起来代码非常好理解，很好读懂，但是这段代码，其实是在用JavaScript来代替css来操作元素的样式，我们都知道JavaScript是用来操作行为的，css是来操作样式的。所以如果项目很大，用JavaScript来操作样式的话，过段时间或者其他人接手代码很难看出这段代码在做什么。那么我们如何让css和JavaScript各司其职呢，接下来我们来看版本二。

版本二：

我们将这段代码进行简单的重构来优化，用css的class来表示两种状态，按钮太阳和月亮不是直接以文本写在html里的，而是，写了个button，然后在css里添加了个伪元素，所以所有的样式问题都交给css，阅读代码的时候能很快get到代码是切换两种状态的，用js来切换状态的变化。

css代码：

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌜';
}

JavaScript代码：

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

其实，纯视觉展示的话，展现类的需求，可以不用js，js是操作行为的，可以直接用css和html来实现，我们来看版本三是如何实现，不用js代码来实现主题色切换

版本三：不写一行js代码

在html里，的结构和之前是有不同的，在body里加了一层content，然后在content之前放了个input元素checkbox，但是页面上没有，因为在css里把它给隐藏了，用了兄弟元素选择器，就会选择后面的元素，

html代码：注意观察加入的input元素

<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="这是图片url">
      </div>
      <div class="description">
        <p>
            这是文字段落，略。
        </p>
      </div>
    </main>
  </div>

css部分

.content {
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

这样就可以实现主题色切换了，有很多纯展示的功能，如果想不用JavaScript实现样式切换，都可以使用html里的lable加上checkbox。

总结：

以上就是三个版本的主题色切换方法啦。版本二和版本三各有好处，版本二用js也比较简单，他的适应性也会更强一些，版本三适应性没那么强，但绝对是没有bug的。版本二，比如，我们要做跨段的话，小程序呀，老版本的浏览器上都可以，但是版本三不太行。