Dark Mode hoạt động như thế nào?
Cách đơn giản nhất là thêm class ví dụ .dark-mode vào <body> và định nghĩa các style tương ứng. Sau đó, dùng JavaScript để bật/tắt chế độ này và lưu lại tùy chọn người dùng trong localStorage.
“Chỉ cần vài dòng CSS + JS là bạn đã có Dark Mode hoàn toàn tự kiểm soát.”
1. Thêm CSS cho chế độ tối
Thêm đoạn sau vào file style.css hoặc trong giao diện của bạn:
body.dark-mode {
background-color: #121212;
color: #f0f0f0;
}
.dark-mode a {
color: #9bdcff;
}
.dark-mode .your-class {
background-color: #1e1e1e;
border-color: #333;
}
Bạn có thể mở rộng style theo giao diện riêng của mình – miễn sao có phần class `.dark-mode` bọc ngoài.
2. Thêm nút chuyển chế độ sáng/tối
Chèn nút sau vào header hoặc khu vực bạn muốn hiển thị công tắc:
<button id="toggle-darkmode">🌙 Tối / ☀️ Sáng</button>3. Thêm JavaScript để xử lý bật/tắt
Chèn vào cuối trang hoặc trong file theme.js:
document.addEventListener('DOMContentLoaded', function () {
const toggle = document.getElementById('toggle-darkmode');
const body = document.body;
// Gán class nếu đã lưu trong localStorage
if (localStorage.getItem('dark-mode') === 'on') {
body.classList.add('dark-mode');
}
toggle.addEventListener('click', function () {
body.classList.toggle('dark-mode');
// Lưu trạng thái
if (body.classList.contains('dark-mode')) {
localStorage.setItem('dark-mode', 'on');
} else {
localStorage.setItem('dark-mode', 'off');
}
});
});4. Mẹo làm đẹp nút chuyển chế độ
Bạn có thể dùng biểu tượng hoặc toggle đẹp hơn như:
<label>
<input type="checkbox" id="toggle-darkmode">
<span>🌗 Chế độ tối</span>
</label>Hoặc dùng icon của UIkit, FontAwesome, hoặc SVG để đồng bộ giao diện.
5. Không cần plugin, vẫn tối ưu
- Không tăng thời gian tải trang: không thêm request ngoài nào
- Không can thiệp core: hoạt động bằng CSS và JS bên ngoài
- Không phụ thuộc framework: chạy được trên mọi giao diện
- Lưu trạng thái người dùng bằng
localStorage
6. Hỗ trợ theo chế độ hệ thống (tùy chọn nâng cao)
Nếu bạn muốn mặc định theo theme của thiết bị, có thể dùng prefers-color-scheme:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f0f0f0;
}
}
Như vậy, nếu người dùng dùng máy tính/điện thoại đang bật Dark Mode, trang web sẽ theo luôn.
Kết luận
Tự tạo Dark Mode không hề khó – chỉ cần một class, vài dòng JS và chút CSS là bạn có thể nâng cấp trải nghiệm người dùng lên đáng kể. Hãy thử áp dụng ngay và tùy biến theo phong cách giao diện của bạn!
Bình luận