Tạo Dark mode (chế độ tối) cho blog/website

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 giờ chuyển sang chế độ tối (mặc định là từ 22h đến 7h) sau đó nhấn Get code.

<style>
.dark-mode{width:66px}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:''}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
</style>
<script>
//<![CDATA[
/*
Dark mode made by duy-pham.blogspot.com
*/
function auto(){document.body.classList.add('auto');localStorage.setItem('__auto','true');if(new Date().getHours()>__h1||new Date().getHours()<__h2){document.body.classList.add('dark');localStorage.setItem('__dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('__dark','false')}}function dark(){localStorage.getItem('__dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('__auto')=='true'){auto()}else{localStorage.getItem('__dark')==null?auto():dark()}function toggle(){localStorage.setItem('__auto',localStorage.getItem('__auto')=='true'?'false':'true');localStorage.getItem('__auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('__auto');localStorage.setItem('__dark',localStorage.getItem('__dark')=='true'?'false':'true');dark()}
//]]>
</script>

From to

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.

Duy Pham

147

Nhận xét

M10.VN 10/6/19 07:39

Giống iOS 13 quá :D

Thiết kế

Thủ thuật Blogger

Phần mềm

Tạo Dark mode (chế độ tối) cho blog/website

147

Đăng nhận xét

Nhận xét nhiều trong tuần

Xem nhiều trong tuần

Nhãn

Nhận xét mới

Liên kết