Kích hoạt Chế độ ban đêm - Night Mode cho Blogger ~ Iris Tips

Enable Night Mode for Blogger

Bạn cảm thấy mỏi mắt và khó ngủ khi hay lướt các website vào ban đêm? Đó là do phần lớn đều có nền màu sáng trắng, màu nền này khi xem vào ban ngày không có vần đề gì nhưng khi đâm đến cộng với chế độ ánh sáng yếu (nếu bạn tắt đèn) thì sẽ thường gặp phải vấn đề trên.

Do đó một số trình duyệt web, nhất là trên smartphone hay trên một số website như Twitter chẳng hạn đều có chế độ ban đêm, chuyển các thành phần trên web sang tông màu tối, giúp bảo vệ đôi mắt của bạn và giúp bạn đi vào giấc ngủ dễ dàng hơn.

Bài viết sau đây của Iris Tips sẽ giúp mang Chế độ ban đêm - Night Mode vào Blogger của bạn với 2 nút kích hoạt khá đẹp mắt.

Cách thực hiện

1Vào Blogger >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.night{background:#2a3548;transition:all .3s}
.night .post-body,.night .post,.night #outer-wrapper,.night #content-wrapper,.night .blogouter-wrapper,.night #comments,.night .widget,.night .tabs-content .widget li,.night .tabs-content .widget ul,.night .tabs-menu li,.night .tabs-content,.night .ticker-wrap,.night #ticker,.night #ticker ul li h3 a,.night .breadcrumbs,.night .breadcrumbs span,.night .breadcrumbs span a,.night .widget .post-body li,.night .related-post,.night .PopularPosts ul li,.night #related_post h4,.night .authorboxwrap,.night .relhead,.night .halaman,.night .comment-note,.night .comment-note h5,.night .comment_emo_list span,.night h1.post-title,.night h2.post-title a,.night #header a,.night p.description,.night .posts-title,.night .post-info,.night .blog-pager,.night .recpost .rcp-title a,.night #blog-pager,.night .PopularPosts ul li a,.night .recomments a,.night .intro-label,.night .author_description_container h4 a,.night #wrapper{background:rgba(255,255,255,0)!important;color:rgba(255,255,255,0.85)!important}
.night img{filter: brightness(70%);}

Note: Trên đây là 1 số phần tử cơ bản trên Blogger, nếu bạn muốn làm tối màu thêm phần nào bạn chỉ cần thêm .night class_hoặc_ID vào đoạn code trên nhé.

2Tìm đến thẻ </body> và đặt đoạn JS dưới đây vào trước thẻ đó.

<script type="text/javascript">
$("button.iris-night").click(function(){$("body").toggleClass("night")});
</script>

Style 1: Nút bấm trượt trên màn hình với hiệu ứng Pulse

3Tiếp tục dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.night #NightMode{background:#fff;color:#00a1d6;}
.night #NightMode:hover{background:#fff;color:#fc4f3f;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.night #NightMode:before{content:"\f185";font-family:FontAwesome;}
@keyframes pulse{0%{-moz-box-shadow:0 0 0 0 rgba(51,51,51,0.7);box-shadow:0 0 0 0 rgba(51,51,51,0.7)}70%{-moz-box-shadow:0 0 0 10px rgba(51,51,51,0);box-shadow:0 0 0 10px  rgba(51,51,51,0)}100%{-moz-box-shadow:0 0 0 0 rgba(51,51,51,0);box-shadow:0 0 0 0 rgba(51,51,51,0)}}
#NightMode{z-index:90;position:fixed;padding:0;width:40px;height:40px;line-height:40px;bottom:80px;right:25px;overflow:hidden;background:rgba(42,53,72,0.85);color:rgba(255,255,255,0.85);font-size:25px!important;border:none;border-radius:4px;-webkit-transform: translateZ(0);transition:all .5s ease-out;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s;}
#NightMode:before{content:"\f186";font-family:FontAwesome;}
#NightMode:hover{background:rgba(42,53,72,0.5);color:rgba(255,255,255,1)}
button#NightMode{animation:pulse 1.5s infinite;box-shadow:0 0 0 rgba(51,51,51,0.7);}

4Tìm đến thẻ </body> và đặt đoạn HTML dưới đây vào trước thẻ đó.

<a href='#NightMode'><button class='iris-night' id='NightMode' onclick="document.getElementById('switchCheckbox').checked=!document.getElementById('switchCheckbox').checked;"></button></a>

Style 2: Nút bấm dạng toggle với hiệu ứng chuyển cảnh

5Bạn hãy dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.switch-wrapper{margin:30px 0;font-size:0}
.switch-wrapper input{display:none}
.switch-label{font-size:1rem;display:inline-block;line-height:40px;vertical-align:top;padding:5px 10px;transition:transform ease-in 0.2s;font-weight:bold;opacity:0.6}
.switch{position:relative;display:inline-block;width:100px;height:40px;cursor:pointer;border-radius:50px;border:2px solid #eee;background-color:#2196f3;background-image:radial-gradient(circle,#fefefe 20%,transparent 30%),radial-gradient(circle,#fefefe 20%,transparent 30%),radial-gradient(circle,#fefefe 20%,transparent 30%),radial-gradient(circle,#fefefe 20%,transparent 30%),radial-gradient(circle,#fefefe 20%,transparent 30%),radial-gradient(circle,#fefefe 20%,transparent 30%);background-size:50% 50%,60% 60%,40% 40%,40% 40%,50% 50%,40% 40%;background-position:60% 82%,80% 80%,82% 80%,110% 20%,134% 12%,130% 20%;background-repeat:no-repeat;-webkit-transition:0.4s;transition:0.4s;overflow:hidden}
.switch:before{position:absolute;content:"";height:35px;width:35px;top:50%;left:2px;cursor:pointer;transform:translateY(-50%);background-color:#ffeb3b;background-image:radial-gradient(circle,#ffc107 15%,#ffeb3b 100%);box-shadow:0 0 20px 10px rgba(255,235,255,0.4);transition:transform ease-in 0.2s;border-radius:50%;background-repeat:no-repeat}
input:checked ~ .switch{background-color:#023660;background-image:radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%),radial-gradient(circle,#fff 10%,transparent 30%);background-size:8% 8%,7% 7%,6% 6%,8% 8%,8% 8%,6% 6%,6% 6%,8% 8%,7% 7%;background-position:20% 20%,45% 30%,25% 55%,20% 90%,40% 60%,5% 50%,58% 10%,58% 60%,50% 80%;background-repeat:no-repeat}
input:checked ~ .switch:before{background-color:#ddd;background-image:radial-gradient(circle,#c4c4c4 50%,transparent 50%),radial-gradient(circle,#c9c9c9 50%,transparent 50%),radial-gradient(circle,#c9c9c9 50%,transparent 50%),radial-gradient(circle,#c9c9c9 50%,transparent 50%);background-size:40% 40%,25% 25%,50% 50%,30% 30%;background-position:20% 20%,65% 30%,120% 100%,20% 80%;box-shadow:0 0 20px 10px rgba(255,255,255,0.2)}
.switch-wrapper input:checked ~ .switch:before{transform:translate(60px,-50%)}

6Đặt đoạn HTML dưới đây vào vị trí bạn muốn hiển thị Toggle Button.

<div class="switch-wrapper">
<input id="switchCheckbox" type="checkbox">
<button class='iris-night switch' onclick="document.getElementById('switchCheckbox').checked=!document.getElementById('switchCheckbox').checked;"></button>
</div>

Nâng cao: Chế độ tự động ẩn hiện

7Nếu bạn muốn 2 nút tự động ẩn hiện vào khoảng thì gian nhất định thì hãy đặt đoạn JS bên dưới vào trước thẻ </head> nhé.

Lưu ý đây là script ẩn hiện nút bấm kích hoạt chứ không phải tự động kích hoạt chế độ ban đêm nhé. Trong đoạn code bên dưới nút kích hoạt sẽ chỉ hiển thị vào khoảng thời gian từ 18h đến 6h sáng ngày hôm sau, còn lại sẽ ở chế độ ẩn.

<script type="text/javascript">
var time = new Date().getHours(); 
if (time &gt; 6 &amp;&amp; time  &lt; 18) {
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "#NightMode,.switch-wrapper{display:none}";
document.body.appendChild(css);
}
</script>