Bước 1: Thêm HTML

Sử dụng bất kỳ phần tử nào lưu trữ nội dung muốn chuyển đổi thiết kế. Ở đây, ta sẽ sử dụng

nhé:

Bước 2: Thêm CSS

Tạo  kiểu cho phần tử body và tạo một .dark-mode để chuyển đổi chế độ sáng - tối:

Bước 3: Thêm Javascript

Nhận phần tử body và chuyển đổi giữa các lớp .dark-mode :

Note:

• element.classList là một đối tượng đặc biệt với các phương thức cho add/remove/toggle một lớp duy nhất.
• element.classList.toggle(“class”) – thêm lớp nếu nó không tồn tại, nếu không thì xóa nó.

Để xem kết quả chúng ta xem demo này nhé : Chuyển đổi chế độ sáng - tối

Nguồn: Devmaster Academy