SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
const message = document.getElementById("main-header");
const mySpan = document.getElementById("mySpan");
const myInput = document.getElementById("cbox");
const weather = document.getElementById("myI");

message.innerHTML = "Light Mode Active";
message.style.color = "#000";
weather.className = "fa fa-lightbulb-o";
weather.classList.add("sun");

mySpan.addEventListener("click", () => {
  if (myInput.checked) {
    document.body.style.background = "#FFF";
    document.body.style.color = "#000";
    message.innerHTML = "Light Mode Active";
    message.style.color = "#000";
    weather.className = "fa fa-lightbulb-o";
    weather.style.color = "#F4D03F";
    weather.style.fontSize = "2rem";
    weather.style.padding = "10px";
  } else {
    document.body.style.background = "#111";
    document.body.style.color = "#FFF";
    message.innerHTML = "Dark Mode Active";
    message.style.color = "#FFF";
    weather.className = "fa fa-moon-o";
    weather.style.fontSize = "2rem";
    weather.style.color = "#FFF";
    weather.style.padding = "10px";
  }
});

            
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dark & Light Modes</title>
    <link rel="stylesheet" href="style.css">
    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/e03d7ac5cf.js" crossorigin="anonymous"></script>
  </head>
  <body> 
  
    <div class="flex">
      <label class="test">
        <input id="cbox" type="checkbox"></input>
        <span id="mySpan" class="slide round"></span>
      </label>
      <div class="page-weather">
        <i id="myI" aria-hidden="true"></i>
        <h1 id="main-header" class="msg"></h1>
      </div>
    </div>
<!--   <div class="page-weather">
    <i id="myI" aria-hidden="true"></i>
    <h1 id="main-header" class="msg"></h1>
  </div> -->
  
  <div class="mock">
    <h2>Mock Header</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus consequuntur quia velit? Natus fugiat sunt blanditiis nobis esse iusto cupiditate similique odit libero fuga nemo magni, minus nisi itaque perferendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, veritatis sint illo officiis nemo fuga in veniam tempore dolores molestiae vel totam laboriosam quidem cupiditate accusantium magnam aut nesciunt eaque repudiandae architecto itaque praesentium quos necessitatibus. Harum labore quaerat, sunt veniam, inventore velit nemo tenetur eos id dolores esse maxime!</p><br />
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati aut alias quidem animi atque et ipsum fugit sapiente dignissimos dolor, in, quisquam eaque. Voluptatem culpa illum, neque voluptas esse officiis veritatis voluptatibus repudiandae, quidem nihil laborum dolorum quibusdam adipisci, earum exercitationem? Placeat autem debitis consequuntur? Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, veritatis sint illo officiis nemo fuga in veniam tempore dolores molestiae vel totam laboriosam quidem cupiditate accusantium magnam aut nesciunt eaque repudiandae architecto itaque praesentium quos necessitatibus. Harum labore quaerat, sunt veniam, inventore velit nemo tenetur eos id dolores esse maxime!</p>
  </div>
  </body>
</html>

            
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

:root {
  --font-awesome: "Font Awesome 5 Free";
  --google-font-roboto-condensed: "Roboto Condensed", sans-serif;

}

body {
  color: #000;
}

.test {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 34px;
}

.test input {
  opacity 0;
  height: 0;
  width: 0;
}

.test input:before {
  position: absolute;
  top: 7px;
  left: 6px;
  content: "";
}

.slide {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  -webkit-transition: .4s;
  transition: .4s;
}

.slide:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  -webkit-transition: .4s;
  transition: .4s;
  z-index: 999;
}

.slide:after {
  position: absolute;
  top: 8px;
  right: 5px;
  font-family: var(--font-awesome);
  vertical-align: middle;
  font-weight: 900;
  font-size: 1.1rem;
  content: "\f186";
  display: inline-block;
  z-index: 1;
}

input:checked + .slide {
  background: #222;
  opacity: 0.8;
}

input:focus + .slide {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slide:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slide.round {
  border-radius: 33px;
}

.slide.round:before {
  border-radius: 50%;
}

.msg {
  font-family: var(--google-font-roboto-condensed);
  color: #000;
  font-size: 1.5rem;
}

.page-weather {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.sun {
  font-size: 2rem;
  color: #F4D03F;
  padding: 10px;
}

.mock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px auto 10px auto;
  width: 50%;
}

.mock h2 {
  font-size: 3.5rem;
}

.mock p {
  font-size: 1.3rem;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}