Computer >> Máy Tính >  >> Lập trình >> CSS

Cách tạo chế độ tối / sáng cho trang web bằng CSS

Bằng cách thay đổi màu văn bản và màu nền của trang, chúng tôi có thể thêm chế độ tối / sáng cho trang web của mình.

Cú pháp

Cú pháp sau có thể được sử dụng để áp dụng chế độ tối.

Selector {
   color: white;
   background-color: black
}

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            font-size: 1.4em;
            text-align: center;
         }
         .dark {
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Suspendisse eget finibus nulla, a pulvinar est. Suspendisse eget eleifend nibh. In nec massa molestie, vehicula sapien a, consectetur nunc. Aenean at nisl vulputate mi scelerisque commodo nec et mauris. Duis tincidunt auctor posuere.</p>
         <button id="btn" onclick="change()">Normal Mode</button>
      </div>
      <script>
         let btnText = document.getElementById("btn");
         function change() {
            let btn = document.body;
            btn.classList.toggle("dark");
            if (btnText.innerHTML === "Normal Mode") {
               btnText.innerHTML = "Dark Mode!";
            } else {
               btnText.innerHTML = "Normal Mode";
            }}
      </script>
   </body>
</html>

Điều này cho kết quả sau

Cách tạo chế độ tối / sáng cho trang web bằng CSS

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            font-size: 1.4em;
            text-align: center;
         }
         .dark {
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div>
         <button id="btn" onclick="change()">Normal Mode</button>
         <p>Duis tincidunt auctor posuere.</p>
         <img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
      </div>
      <script>
         let btnText = document.getElementById("btn");
         function change() {
            let btn = document.body;
               btn.classList.toggle("dark");
               if (btnText.innerHTML === "Normal Mode") {
                  btnText.innerHTML = "Dark Mode!";
               } else {
                  btnText.innerHTML = "Normal Mode";
            }}
      </script>
   </body>
</html>

Điều này cho kết quả sau

Cách tạo chế độ tối / sáng cho trang web bằng CSS

Cách tạo chế độ tối / sáng cho trang web bằng CSS