Cara Menambahkan Script Dark Mode Pada Template Blogger

Penggunaan mode gelap (dark mode) telah menjadi tren yang semakin populer dalam aplikasi dan platform digital. Mulai dari perangkat lunak hingga situs web, opsi dark mode memberikan pengalaman visual yang berbeda dan menarik bagi pengguna. Tetapi apa sebenarnya mode gelap itu?

Mode gelap adalah pengaturan tampilan yang menggantikan latar belakang cerah dengan warna gelap atau hitam. Sebagai lawan dari mode terang tradisional, mode gelap mengubah warna latar belakang, teks, dan elemen antarmuka lainnya menjadi warna yang lebih gelap. Ini menciptakan kontras yang lebih tinggi dan mengurangi kelelahan mata, terutama saat digunakan dalam kondisi pencahayaan yang rendah.

Salah satu keuntungan utama dari mode gelap adalah perlindungan terhadap kelelahan mata. Banyak orang menghabiskan berjam-jam di depan layar perangkat digital, dan mode gelap membantu mengurangi kecerahan yang intens dan cahaya yang terpancar langsung ke mata. Dengan latar belakang yang lebih gelap, mata dapat merasa lebih rileks dan bekerja dengan lebih nyaman.

Selain itu, mode gelap juga menghemat daya baterai pada perangkat seluler, terutama pada layar dengan panel OLED atau AMOLED. Layar jenis ini menggunakan pixel yang bisa dimatikan secara individual saat menampilkan warna hitam. Dalam mode gelap, banyak bagian layar akan ditampilkan dengan warna hitam, sehingga membutuhkan daya yang lebih sedikit dibandingkan dengan mode terang yang memerlukan pencahayaan yang lebih intens.

Namun, mode gelap bukan hanya tentang kenyamanan visual dan efisiensi energi. Banyak orang juga menganggap mode gelap lebih menarik secara estetika. Desain dengan latar belakang gelap memberikan tampilan yang elegan dan modern. Selain itu, elemen antarmuka lainnya, seperti ikon dan tombol, cenderung lebih kontras dan terlihat lebih jelas pada latar belakang gelap, memberikan pengalaman pengguna yang lebih fokus dan terorganisir.

Dalam beberapa tahun terakhir, banyak aplikasi dan platform telah mengadopsi mode gelap sebagai fitur pilihan. Sistem operasi perangkat seluler seperti iOS dan Android, serta aplikasi populer seperti Twitter, Instagram, dan YouTube, semuanya menawarkan opsi mode gelap kepada pengguna mereka. Ini memungkinkan pengguna untuk menyesuaikan tampilan sesuai dengan preferensi pribadi mereka dan menciptakan pengalaman yang lebih personal.

Cara Menambahkan Script Dark Mode Pada Template Blogger:

Script ini memiliki 2 versi pemasangan, jika versi pertama tidak cocok maka gunakanlah versi kedua.

• Versi Pertama

1. Masuk ke blogger lalu edit tema.

2. Tempatkan script berikut ini sebelum </body>.

<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]></script>

3. Tempatkan kode berikut sebelum </head>.

<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

4. Mohon diperhatikan, untuk baris kode .nightmode .class-baru{} yang terdiri atas 2 baris di atas. Maksudnya disesuaikan dengan penamaan sesuai template blogspot masing-masing. Berikut contohnya:

.nightmode #wrapper{background:#111111} 
.nightmode .menu{background:#111111} 
.nightmode .menu{border:#000000}
.nightmode .nav-menu li {border-right:#111111}  
.nightmode .nav-menu li a{background:#111111} 
.nightmode ul.nav-social li {border-left:#111111} 
.nightmode #header-wrapper{background:#111111}
.nightmode .header{background:#111111}
.nightmode .toggleMenu{background:#333333}  
.nightmode .nav-menu2{background:#333333}
.nightmode .dropdowns{background:#333333}  
.nightmode .nav-menu2 li ul{background:#333333}
.nightmode .nav-menu2 > li > a.active{background:#3a3a3a}
.nightmode .nav-menu2 > li:hover > a{background:#3a3a3a}
.nightmode .nav-menu2 li li a:hover{background:#3a3a3a}
.nightmode .nav-menu2 li li li a{background:#333333}
.nightmode .largebanner{background:#000000; border-right:1px solid #000000; border-bottom:1px solid #000000; border-left:1px solid #000000}
.nightmode #post-wrapper{background:#111111}
.nightmode .breadcrumbs{background:#111111; border:1px solid #333333}  
.nightmode #post-body table td {background:#111111}
.nightmode a.home-link, #blog-pager-newer-link a, #blog-pager-older-link a {
	background-color:#333333;
	border: 1px solid #3a3a3a }  
.nightmode #sidebar-wrapper{background:#111111}
.nightmode a.readmore{background:#3a3a3a}
.nightmode .related-post{background:#111111}
.nightmode #HTML2{background:#111111}
.nightmode .berlangganan-box{background:#3a3a3a}
.nightmode .displaypageNum a{background-color:#3a3a3a}
.nightmode .displaypageNum a{border-color:#3a3a3a}
.nightmode .post-info{background:#111111}
.nightmode .post{background:#111111}
.nightmode .post{border:#333333}
.nightmode .status-msg-bg{background-color:#333333}
.nightmode #bottombar{background:#000000}
.nightmode #footer-wrapper{background:#333333}
.nightmode .author-profile{background:#0072c6}
.nightmode .author-profile{border-top:#0072c6}
.nightmode .author-profile img{border:#0072c6}
.nightmode .sidebar h2{color:#FFFFFF}
.nightmode #feed-container{background:#111111} 
.nightmode #feed-container li{border:#111111}   
.nightmode .label-size{background:#0072c6}
 

• Versi Kedua

1. Masuk ke blogger lalu edit tema.

2. Tempatkan kode di bawah ini sebelum tag </body>.

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#ind-darkmode").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#ind-darkmode").prop("checked",!0):$("#ind-darkmode").prop("checked",!1)}); //]]> </script>
 

3. Tempatkan kode CSS di bawah ini sesudah tag <b:skin><![CDATA[ dan sebelum  ]]></b:skin>.

<style> /* Button Dark Mode */ .ind-darkmode{ display:inline-block; float: right; margin-top: 3px; position:absolute; right:45px; top: 0; z-index:999; } .ind-darkmode svg{ width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .ind-darkmode svg path{ fill:#fff; } .ind-darkmode .check:checked ~ .NavMenu{ is opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .ind-icon { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear; } .ind-icon:hover{ border-radius: 100px; background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%; } .check { display: none; } .ind-darkmode .ind-icon .openmode{ display:block; } .ind-darkmode .ind-icon .closemode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .openmode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .closemode{ display:block; } .Night { background: #353535; } </style>
 

4. Terakhir, tempatkan kode dibawah ini dibagian yang Anda inginkan.

*Saya lebih menyarankan pada bagian atas menu atau bawah pada footer.

<div class='ind-darkmode'><input class='check' id='ind-darkmode' title='Mode Dark' type='checkbox'/> <label class='ind-icon' for='ind-darkmode'> <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg> <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg> </label> </div>
 

5. Jika sudah maka simpan dan lihat hasilnya.

Kesimpulan: 

Ada juga beberapa pertimbangan saat menggunakan mode gelap. Meskipun mengurangi kelelahan mata, mode gelap mungkin tidak cocok untuk semua orang atau dalam semua situasi. Beberapa pengguna mungkin merasa sulit membaca teks dengan latar belakang gelap, terutama jika mereka memiliki masalah penglihatan. Selain itu, konten seperti gambar atau video dengan detail rendah mungkin tidak terlihat dengan jelas pada latar belakang gelap.