Cùng theo trào lưu Dark mode thì bài viết này sẽ giúp bạn đưa vào blog/website của mình nút bật tắt chế độ tối. Không những bật tắt bằng tay mà còn có chế độ tự động bật tắt theo giờ nhất định. Tính năng tự động này hiện tại mình chưa thấy blog/website nào có kể cả Youtube hay Twitter. Ngoài ra thì những thiết lập này được lưu lại trên trình duyệt và khi người dùng truy cập lần sau thì chế độ tối này vẫn giữ nguyên như trước khi tắt trình duyệt. Có nghĩa người dùng đang để chế tối và thủ công thì lần sau bật trình duyệt lên vẫn là chế độ tối đó.
Chèn đoạn mã trên vào sau thẻ <body>.
Chèn đoạn mã dưới đây vào vị trí muốn hiển thị nút bật đóng chế độ tối:
<div class='dark-mode'> <button class='toggle' onclick='toggle()' type='button'/> <button class='mode' onclick='mode()' type='button'/> </div>
Bước cuối cùng, cũng là bước tốn thời gian nhất: thiết kế giao diện tối cho blog/website. Vì là màu sắc nên ta quan tâm đến màu nền (background-color), màu chữ (color), màu viền (border-color)... Giả sử blog/website có class header khai báo như sau:
.header{ background-color:#ddd; color:#000; }
Thì chúng ta sẽ khai báo thêm class dark với màu nền và màu chữ có xu hướng ngược màu ban đầu như sau:
.header{ background-color:#ddd; color:#000; } .dark .header{ background-color:#444; color:#eee; }
Sau khi thực hiện thành công thì giờ đây blog/website của bạn có tới 2 giao diện để "đổi gió", và hơn cả là nó dịu mắt khi ở chế độ tối buổi đêm.
