This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

[3/10] The third one came, this time writing a simple animation of the pull rope to switch on and off dark mode, as shown on the cover.

Online preview link, attached source code!

The goal is still ten ways to achieve, incidentally improve my level 🙊

Everyone has seen other forms of dark mode can be posted, let me see the world, I can also copy it!

The code!

Very simple code, I simply explain 🦍

🦭 HTML

<h1>Mancuoj</h1>
<div id="switch"></div>
Copy the code

🐬 SCSS

All the same, SCSS nesting is easier to write

Some basic Settings

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

$dark-color: # 111;
$light-color: #eee;
$bg-color: #4c6fff;

*,
* *,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Poppins, serif;
}
Copy the code

Draw the switch

Pseudo-elements ::before can add something before or after the selected element.

Must be used with content, which is usually used to add content to an element such as a picture or text.

The content property is required, and the value can be an empty string to implement the shape.

Top: -100px, let’s hide 100px to animate ✅

#switch {
  position: fixed;
  height: 300px;
  width: 2px;
  background: $bg_color;
  right: 30%;
  top: -100px;
  cursor: pointer;

  &::after {
    content: "";
    position: absolute;
    border: 2px solid $bg-color;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    left: -10px;
    bottom: -20px; }}Copy the code

Write an animation of the rope

Specific can see animation – CSS (cascading style sheets (CSS) | MDN (mozilla.org)

Animation is a hidden 100px out and back 🎈

@keyframes line {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0); }}.pull {
  animation: line 0.5 s ease;
}
Copy the code

dark mode

Is still the simplest implementation, only changed the background and text color, there is a need to add ~

.dark {
  background-color: $dark-color;
  color: $light-color;
}
Copy the code

🐋 JS

JS similar to the previous two, slightly changed to continue to use 😎

Add animation when clicked, and remove when finished. Set a time interval with setTimeout().

const changeTheme = () = > {
  const sw = document.getElementById("switch");
  sw.addEventListener("click".() = > {
    sw.classList.add("pull");
    if (!document.body.classList.contains("dark")) {
      document.body.classList.add("dark");
      localStorage.setItem("css"."dark");
    } else {
      document.body.classList.remove("dark");
      localStorage.removeItem("css");
    }
    setTimeout(() = > {
      sw.classList.remove("pull");
    }, 600);
  });

  if (localStorage.getItem("css")) {
    document.body.classList.add("dark"); }}; changeTheme();Copy the code

🔗 for the first two

Add a Dark mode to your web page (1)

Add a Dark mode to your web page.