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
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:
Ví dụ
<body>
Bước 2) Thêm CSS:
Tạo kiểu cho phần tử <body>
và tạo lớp .dark-mode
để chuyển đổi:
Ví 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:
Lấy phần tử <body>
và chuyển đổi giữa lớp .dark-mode
:
Ví dụ
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Hãy tự mình thử »Mẹo: Xem thêm Cách thêm lớp .
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.