วิธีการสลับโหมดสีเข้ม

ใช้ CSS และ JavaScript สลับระหว่างโหมดสีเข้มและโหมดสีสว่าง.

สลับคลาส

ใช้อิเลเมนต์ใดก็ได้ที่ควรเก็บเนื้อหาที่ต้องการสลับออกแบบ. ในตัวอย่างของเราเพื่อง่ายขึ้น จะใช้ <body>:

<body>

ตั้งค่า <body> รูปแบบสไตล์ของอิเลเมนต์และสร้างอิเลเมนต์สำหรับการสลับ .dark-mode คลาส:

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}
.dark-mode {
  background-color: black;
  color: white;
}

เรียก <body> อิเลเมนต์และ .dark-mode สลับระหว่างคลาส

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}