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