Cách thực hiện - Chuyển đổi Chế độ tối
Chuyển đổi giữa chế độ tối và sáng bằng CSS và JavaScript.
Chuyển đổi lớp học
Bước 1) Thêm HTML:
Sử dụng bất kỳ phần tử nào sẽ lưu trữ nội dung bạn muốn chuyển đổi thiết kế. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng <body>
vì mục đích đơn giản:
Thí dụ
<body>
Bước 2) Thêm CSS:
Tạo kiểu cho <body>
phần tử và tạo một .dark-mode
lớp để chuyển đổi:
Thí dụ
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Bước 3) Thêm JavaScript:
Nhận <body>
phần tử và chuyển đổi giữa các .dark-mode
lớp:
Thí dụ
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Mẹo: Cũng xem Cách Thêm Lớp học .
Mẹo: Tìm hiểu thêm về thuộc tính classList trong Tài liệu tham khảo JavaScript của chúng tôi.