This is the sixth day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

⏳ preface

As a small white front view, as more and more working people in the middle of the night office, whether it wants to let his eyes from fatigue or prefer a UI, night mode has become an integral part of the front-end development 🙊) (suggest the nuggets to join the night mode, this article is to writing to a web page to join the night mode.

The template

The first step is to complete the general layout of the web page

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Dark mode</title>
  <style>
    body {
      margin: 0;
      background-color: #cccccc;
    }
    .reader-box {
      width: 760px;
      padding: 0 100px;
      position: relative;
      margin: 0 auto;
      background-color: #f7f7f7;
    }
    .reader-box .title {
      padding-top: 80px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      border-bottom: 1px solid #ccc;
      position: relative;
    }
    .content {
      padding: 30px 0;
      line-height: 50px;
    }
    .content img {
      display: block;
      margin: 0 auto;
    }
    .modeBtn {
      position: absolute;
      right: 0;
    }
  </style>
</head>
<body>
  <div class="reader-box">
    <header class="title">Gree lost nearly 200 billion yuan in market value in a year<button class="modeBtn">🌞</button>
    </header>
    <main class="content">
      <img
        src="https://pics2.baidu.com/feed/b3fb43166d224f4a9767ed456413fa5b9a22d1dc.jpeg?token=d45e882f3f1ca4a905153eb9d25149ac"
        alt="">
      <p>The succession of Dong Mingzhu's "right hand" huang Hui and Wang Jingdong has left gree Electric Appliances has become a mystery. Recently, Dong Mingzhu publicly announced that she would train her newly graduated secretary to be a "second Dong Mingzhu", once again triggering heated discussions about her successor. Meanwhile, Gree's results and share price have been weak. In the third quarter of 2021, Gree saw a double-digit decline in revenue and net profit, while its old rival Midea Group saw a slight increase in revenue and net profit. As of press time, Gree electric Appliances shares have fallen 47% from last year's peak, wiping out nearly 185.5 billion yuan in market value; Midea's share price also fell in a volatile trend, falling 32% from its peak at the beginning of the year as of press time, wiping 239 billion yuan from its market value. Home appliance industry analyst Liu Buchen told Guanchuan.com that the entire home appliance industry has entered an era of stock competition, with limited room for growth. As the country continues to regulate the real estate sector, the capital market has begun to re-examine the valuation of the home appliance industry.</p>
    </main>
  </div>
</body>
</html>
Copy the code

The page now looks like this

The current task is to switch to when you click on the sun icon in the upper right cornerNight mode, the background changes to black, the font changes to white, and the icon changes from sun to moon, indicating that the current mode is night

This task can be done quickly with JS. First, we will hand over the styling part of the night mode to CSS

.box.night {
  background-color: # 000; // Background blackcolor: #fff; // font white}Copy the code

Then listen to button click events and determine whether the current is in night mode

<script>
  const btn = document.getElementsByClassName('modeBtn') [0]
  
  btn.addEventListener('click'.(e) = > {
  const box = document.getElementsByClassName('box') [0]
  if(box.className.includes('night')) {
    box.classList.remove('night')
    e.target.innerHTML = '🌜'
  }else {
    box.classList.add('night')
    e.target.innerHTML = '🌞'
  }
})
</script>
Copy the code

Click the button to toggle the appearance of the webpage after night mode

In this way, we use JS to achieve the function of switching the night mode of the web page, but can not use JS, completely with CSS to achieve?

🔧 CSS implements dark mode

We know that the checkbox in the HTML form element can complete the state transition, so we can switch the page day/night mode by checking whether the checkbox is checked

First, let’s adjust the HTML structure of the web page:

<body>
  <input type="checkbox" name="" class="modeCheckBox">
  <div class="box">
    <header class="title">Gree lost nearly 200 billion yuan in market value in a year</header>
    <main class="content">
      <img
        src="https://pics2.baidu.com/feed/b3fb43166d224f4a9767ed456413fa5b9a22d1dc.jpeg?token=d45e882f3f1ca4a905153eb9d25149ac"
        alt="">
      <p>The succession of Dong Mingzhu's "right hand" huang Hui and Wang Jingdong has left gree Electric Appliances has become a mystery. Recently, Dong Mingzhu publicly announced that she would train her newly graduated secretary to be a "second Dong Mingzhu", once again triggering heated discussions about her successor. Meanwhile, Gree's results and share price have been weak. In the third quarter of 2021, Gree saw a double-digit decline in revenue and net profit, while its old rival Midea Group saw a slight increase in revenue and net profit. As of press time, Gree electric Appliances shares have fallen 47% from last year's peak, wiping out nearly 185.5 billion yuan in market value; Midea's share price also fell in a volatile trend, falling 32% from its peak at the beginning of the year as of press time, wiping 239 billion yuan from its market value. Home appliance industry analyst Liu Buchen told Guanchuan.com that the entire home appliance industry has entered an era of stock competition, with limited room for growth. As the country continues to regulate the real estate sector, the capital market has begun to re-examine the valuation of the home appliance industry.</p>
    </main>
  </div>
</body>
</html>
Copy the code

In the above structure, we place the checkbox at the same level as the box container, and then change the style by matching the checkbox with its sibling box:

.modeCheckBox:checked + .box {
  background-color: # 000;
  color: #fff;
}
Copy the code

This time when the selection box is checked, the page switches to night mode

This completes the night mode, but we can’t let the user click the checkbox to switch the night mode. First, it is not beautiful and second, it does not meet the business requirements, so we can use the label element instead of the checkbox trigger behavior. The for attribute of the label can specify the ID to bind the label element to the corresponding form element, so clicking the label changes the checkbox state:

<body>
  <input type="checkbox" name="" id="modeCheckBox">
  <div class="box">
    <header class="title">Gree lost nearly 200 billion yuan in market value in a year<label for="modeCheckBox" class="modeBtn"></label>
    </header>
    <main class="content">
      <img
        src="https://pics2.baidu.com/feed/b3fb43166d224f4a9767ed456413fa5b9a22d1dc.jpeg?token=d45e882f3f1ca4a905153eb9d25149ac"
        alt="">
      <p>The succession of Dong Mingzhu's "right hand" huang Hui and Wang Jingdong has left gree Electric Appliances has become a mystery. Recently, Dong Mingzhu publicly announced that she would train her newly graduated secretary to be a "second Dong Mingzhu", once again triggering heated discussions about her successor. Meanwhile, Gree's results and share price have been weak. In the third quarter of 2021, Gree saw a double-digit decline in revenue and net profit, while its old rival Midea Group saw a slight increase in revenue and net profit. As of press time, Gree electric Appliances shares have fallen 47% from last year's peak, wiping out nearly 185.5 billion yuan in market value; Midea's share price also fell in a volatile trend, falling 32% from its peak at the beginning of the year as of press time, wiping 239 billion yuan from its market value. Home appliance industry analyst Liu Buchen told Guanchuan.com that the entire home appliance industry has entered an era of stock competition, with limited room for growth. As the country continues to regulate the real estate sector, the capital market has begun to re-examine the valuation of the home appliance industry.</p>
    </main>
  </div>
</body>
Copy the code
.modeBtn {
  position: absolute;
  right: 0;
}
.modeBtn::after {
  content: '🌞';
}
.box.night {
  background-color: # 000;
  color: #fff;
}
.modeCheckBox {
  display: none;
}
.modeCheckBox:checked + .box {
  background-color: # 000;
  color: #fff;
  transition: all 1s;
}
.modeCheckBox:checked + .box .modeBtn::after {
  content: '🌜';
}
Copy the code

In the code above, I bind the label element to the checkbox via the for attribute and represent the contents of the label via the After pseudo-element to hide the checkbox, Change the contents of the label by clicking on the label element to change the checkbox state. In addition, the switch to night mode has been added to the CSS animation, which can improve the user experience

“Said

In this way, through the use of JS and CSS to achieve a web page switch to the night mode is completed, this article is after learning the shadow of the big front-end engineer advanced 10 days talk after adaptation summary of learning notes, if there is a mistake, welcome to correct 👋