Three versions realize black-and-white theme switching

We wrote a very simple black-and-white switch button before , See link

ordinary js Code to achieve theme color switching

Today, let's continue to write about topic switching , The final effect is shown in the figure

Let's take a look at how the code can be better implemented ：

html part ：

<header>
   <button id="modeBtn"></button>
   <h1> Topic switching </h1>
</header>
<main>
   <div class="pic">
       <img src=" Picture links ">
   </div>
   <div class="description">
       <p>
          Written content , A little 
       </p>
    </div>
</main>

Version of a

When clicking the button to switch ,js The code determines whether the content of the current button is the sun or the moon , After judgment, make color switching between day and night on the page

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 = '';
  }
});

The code written in this way is very easy to understand , Very easy to read , But this code , In fact, they are using JavaScript Instead of css To manipulate the style of elements , We all know JavaScript Is used to manipulate behavior ,css Is to operate the style . So if the project is big , use JavaScript To operate the style , It's hard to see what the code is doing after a while or when someone else takes over the code . So how can we make css and JavaScript Each performs his own duties , Next, let's look at version 2 .

Version 2 ：

We simply refactor this code to optimize , use css Of class To represent two states , The buttons sun and moon are not written directly in text html Inside , It is , Wrote a button, And then in css A pseudo element has been added to , So all the style questions are left to css, When reading code, you can quickly get To code is to switch between two states , use js To switch state changes .

css Code ：

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

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

JavaScript Code ：

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

Actually , Pure visual display , Show class requirements , Don't have to js,js It's about operational behavior , It can be used directly css and html To achieve , Let's see how version 3 is implemented , no need js Code to achieve theme color switching

Version 3 ： Don't write a line js Code

stay html in , The structure of is different from that before , stay body There's a layer in it content, And then in content I put a before input Elements checkbox, But there's nothing on the page , Because in css Hide it in the , Used a sibling element selector , The following elements will be selected ,

html Code ： Pay attention to the added input Elements

<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1> Dining room in the middle of the night </h1>
    </header>
    <main>
      <div class="pic">
        <img src=" This is the picture url">
      </div>
      <div class="description">
        <p>
             This is a text paragraph , A little .
        </p>
      </div>
    </main>
  </div>

css part

.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: '';
}

In this way, the theme color can be switched , There are a lot of pure display functions , If you don't want to JavaScript Realize style switching , You can use html Inside lable add checkbox.

summary ：

The above is the theme color switching method of the three versions . Version 2 and version 3 have their own advantages , Version 2 js It's easier , He will also be more adaptable , Version 3 is not so adaptable , But absolutely not bug Of . Version 2 , such as , If we want to do cross section , Small program , The old version of the browser can , But version three is not very good .