Làm sao để tạo dark/l...
Làm sao để tạo dark/l...
Để tạo chức năng chuyển đổi dark/light theme, bạn cần thực hiện một số bước chính:
1. Cài đặt CSS cho mỗi theme
Tạo hai bộ CSS classes cho cả dark theme và light theme. Ví dụ, bạn có thể dùng class .dark-theme và .light-theme. Dưới đây là một ví dụ đơn giản:
.dark-theme { background-color: #333; color: #fff; }
.light-theme { background-color: #fff; color: #000; }
2. Cài đặt giao diện chuyển đổi
Thêm một nút hoặc công tắc (toggle) trên giao diện người dùng để cho phép người dùng chuyển đổi theme. Ví dụ, tạo một button với id theme-toggle.
3. Cài đặt JavaScript để chuyển đổi theme
Thêm JavaScript để xử lý sự kiện khi người dùng nhấn vào nút chuyển đổi. Sử dụng classList để thêm hoặc xóa theme cho phần tử body của trang web:
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
document.body.classList.toggle('light-theme');
}); ...
senior