Share Hoạt ảnh chuyển đổi chế độ tối bằng cách sử dụng CSS!

[Syr]

Hướng dẫn này sẽ chủ yếu tập trung vào cách sử dụng chuyển tiếp trong CSS và tạo nút chuyển đổi cho chế độ sáng cũng như tối bằng cách sử dụng ít JavaScript. Hãy đi sâu vào thế giới của quá trình chuyển đổi!
HTML
HTML Markup khá đơn giản để hiểu. Tất cả những gì bạn phải làm là tạo một vùng chứa cho các biểu tượng mà chúng ta sẽ sử dụng từ fontawesome và lồng divcác biểu tượng tương ứng vào trong vùng chứa.

<div class="container">
   <div class="sun sun-logo">
      <i class="fas fa-sun"></i>
   </div>
   <div class="moon moon-logo">
      <i class="fas fa-moon"></i>
   </div>
</div>

CSS

.container{
    position: relative;
}

.sun, .moon{
    font-size: 10rem;
    width: fit-content;
    height: fit-content;
}

.moon{
    position: absolute;
    inset: 0;
}

Đặt vị trí vùng chứa là relative và vị trí vùng chứa mặt trăng là absolute vì chúng ta sẽ đặt biểu tượng mặt trăng ở cùng vị trí với vị trí của biểu tượng mặt trời.

Đây là phần thú vị. Thay vì sử dụng top: 0; bottom: 0; left: 0;và right: 0; bạn có thể sử dụng inset: 0; để có được kết quả tương tự. Nó hoạt động!

Ngoài ra, đặt heightvà width của vùng chứa mặt trời và mặt trăng thành fit-content. Điều này sẽ làm là, nó sẽ thiết lập chiều cao và chiều rộng của vùng chứa để phù hợp với chiều cao và chiều rộng của nội dung bên trong nó.

Và, để thay đổi kích thước của biểu tượng phông chữ tuyệt vời, chỉ cần thay đổi kích thước của font-size biểu tượng.

.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
}

Tiếp theo, chúng ta sẽ thiết lập vị trí ban đầu của biểu tượng mặt trăng và độ mờ ban đầu của nó khi trang web được hiển thị lần đầu tiên. Ở đây, vì độ mờ của biểu tượng mặt trăng bằng 0 nên chúng ta chỉ có thể nhìn thấy biểu tượng mặt trời.

Các translateY(20%) tuyên bố sẽ bù đắp xuống biểu tượng mặt trăng dọc theo trục Y bằng 20% chiều cao của phần tử cha của nó.

Tương tự, rotateZ(50deg) khai báo sẽ xoay biểu tượng mặt trăng dọc theo trục Z một góc 50 độ.

.sun-logo{
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
}

Theo cách tương tự, chúng ta sẽ thiết lập các thuộc tính ban đầu cho biểu tượng mặt trời.

.animate-sun{
    opacity: 0;
    transform: translateY(20%) rotateZ(100deg);
    color: aliceblue;
}

Bây giờ, chúng ta sẽ thiết lập các thuộc tính cuối cùng của biểu tượng mặt trời mà nó sẽ chuyển sang.

.animate-moon{
    opacity: 1;
    transform: translateY(0%) rotateZ(0deg);
    color: aliceblue;
}

Ngoài ra, chúng tôi sẽ thiết lập các thuộc tính cuối cùng của biểu tượng mặt trăng mà nó sẽ chuyển đổi thành. Một điều cần lưu ý ở đây là màu mặc định của các biểu tượng black, vì vậy nếu bạn muốn thay đổi màu của biểu tượng, hãy xác định thuộc tính của nó color.

Nhưng chờ đã, chúng ta vẫn chưa sử dụng thuộc tính transition, vậy nó sẽ chuyển từ trạng thái này sang trạng thái khác như thế nào? Vâng, đó là điều duy nhất còn lại để làm trong phần CSS.

.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
    transition: all 1s ease-out;
}
.sun-logo{
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
    transition: all 1s ease-out;
}

body{
    transition: background-color 1s;
}

.dark{
    background-color: black;
}

Chúng ta sẽ sử dụng lớp trên để thay đổi thời background-color điểm body chuyển đổi các biểu tượng sẽ xảy ra.

Đó là nó. Phần CSS của bạn đã sẵn sàng.

Bây giờ, hãy chuyển sang phần JavaScript. Chúng tôi sẽ sử dụng JavaScript cho toggle các lớp trong click sự kiện.

document.querySelector(".container").addEventListener("click", () => {
    document.querySelector(".sun-logo").classList.toggle("animate-sun");
    document.querySelector(".moon-logo").classList.toggle("animate-moon");
    document.querySelector("body").classList.toggle("dark");
})

Ở đây, chúng tôi đã thêm một vùng chứa phần tử eventListener để khi chúng ta nhấp vào vùng chứa, nó sẽ chuyển đổi các lớp CSS cho các phần tử tương ứng.
Có nghĩa là, nếu lớp CSS không có trong phần tử classList, hàm toggle sẽ thêm lớp CSS vào phần tử classList tương ứng.

Và, nếu lớp CSS đã có trong phần tử classList, nó sẽ xóa nó.

Đây classList thực sự là một DOMTokenList nhưng chúng tôi sẽ không đi vào chi tiết cụ thể của nó.

Đây là nó. Đây là kết quả cuối cùng.

Demo

CRE : Murtuzaalisurti - DEV.TO