วิธีสร้างโหมดมืด/สว่างสำหรับเว็บไซต์ด้วย CSS

การเปลี่ยนสีข้อความและสีพื้นหลังของหน้าเว็บ ช่วยให้เราสามารถเพิ่มฟีเจอร์โหมดมืด (Dark Mode) และโหมดสว่าง (Light Mode) ให้กับเว็บไซต์ได้อย่างง่ายดาย

ไวยากรณ์ (Syntax)

ใช้รูปแบบต่อไปนี้เพื่อใช้งานโหมดมืด:

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

ตัวอย่างที่ 1: การสลับโหมดพื้นฐาน

<!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>

ผลลัพธ์ที่ได้:

ตัวอย่างที่ 2: พร้อมรูปภาพ

<!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>

ผลลัพธ์ที่ได้: