Study, study, fucking study!

The title, for example, is just one of the simplest implementations and is still in the process of learning.

The online preview

Without further ado, go directly to the code!

Button Mouse click event ~

<h1>Mancuoj</h1>
<button name="dark_light" onclick="changeTheme()" type="button">Click to switch 🔥</button>
Copy the code

The background color reverses the text color

.dark-mode {
  background-color: # 222;
  color: #eee;
}

.dark-mode button {
  background-color: #eee;
  color: # 222;
}

.light-mode {
  background-color: #eee;
  color: # 222;
}

.light-mode button {
  background-color: # 222;
  color: #eee;
}
Copy the code

Write the function ~ that you click to modify

function changeTheme() {
  let body = document.body;
  body.className = body.className === "dark-mode" ? "light-mode" : "dark-mode";
}
Copy the code