Menambahkan Dark Mode (Gelap) Pada Template Viomagz v4.7.0

Menambahkan Mode Dark (Gelap) Pada Template Viomagz v4.7.0. - Saat ini sedang trending penggunaan fitur dengan Mode Light (Terang) dan Mode Dark (Gelap). Saat ini hampir semua jenis media online, sosial, browser, software dan apk menggunakan dan menyediakan fitur Mode Light/Dark tersebut.

Dark mode (gelap) sudah jadi template antarmuka komputer di era awal teknologi dan menggunakan warna hijau sebagai warna font (huruf). Namun seiring perkembangan waktu, beberapa perusahaan teknologi lebih memilih menggunakan warna putih sebagai backgound dengan maksud meniru kesan penulisan yang menggunakan tinta pada kertas putih.

{tocify} $title={Table of Contents}

Kemudian muncul dua perusahaan besar yaitu Google dan Apple yang kemudian mencoba menyajikan fitur dark mode (gelap) dan ternyata direspon positif. Kedua perusahaan penyedia sistem operasi ini membuat template antarmuka dengan elemen warna gelap yang justru menyajikan pengalaman baru bagi pengguna dekstop dan mobile.

A. Manfaat Dark Mode (Gelap)

Menggunakan dark mode (gelap) baik itu melalui dekstop ataupun mobile memiliki beberapa manfaat baik dari segi pembacaan maupun dari segi kesehatan diantaranya.

1. Mengurangi Paparan Warna Biru

Warna biru merupakan salah satu spektrum cahaya yang dihasilkan oleh matahari, tapi efek cahaya biru ini juga dapat dihasilkan melalui panel layar dekstop dan mobile. Apabila terlalu sering terkena spektrum cahaya biru ini, menurut beberapa penelitian dapat menyebabkan timbulnya  penyakit kanker didalam tubuh.

Selain itu mode dark (gelap) juga dapat mengurangi intensitas penerimaan efek dari cahaya biru tersebut sehingga lebih tubuh lebih mudah meningkatkan produksi hormon melatonin yang berfungsi menjaga pola tidur kita.

2. Mengurangi Ketegangan Mata

Menerapkan dark mode (gelap) ternyata dapat membantu mengurangi ketegangan dan kelelahan pada mata akibat terus menerus menatap layar dekstop dan mobile dalam jangka waktu yang lama dan terus menerus. Menggunakan fitur dark mode (gelap) mengurangi intensitas cahaya yang mengarah ke mata sehingga mata tidak harus bekerja lebih keras.

3. Membuat Tampilan Lebih Menarik

Mode dark (gelap) memberikan tampilan visual yang lebih menarik karena saat mode dark (gelap) diterapkan, cahaya akan berkurang sehingga membuat mata lebih fokus terhadap layar dan membuat pengguna dapat membaca tulisan dengan lebih jelas. Teks atau tampilan visual yang memiliki banyak variasi warna akan terlihat menarik penggunaan dengan latar yang gelap/malam.

4. Daya Tahan Baterai Lebih Lama

Mode light (terang) yang digunakan pada dekstop dan mobile yang digunakan sehari-hari dapat menghabiskan kapasitas baterai enam kali lebih cepat daripada pengunaan dalam mode dark (gelap). Untuk perangkat mobile khususnya yang menggunakan panel OLED ataupun AMOLED, secara teknis di kedua panel tersebut menghasilkan piksel warna yang memiliki kemampuan menghasilkan kecerahan.

Hal ini berarti saat antarmuka dekstop ataupun mobile berada pada mode light (terang) akan membuat layar berwarna terang atau putih sehingga membuat semua piksel akan aktif menyala dan tentu saja berimbas dengan kebutuhan/konsumsi energi listrik yang besar pada baterai. 

Jadi menggunakan dark mode (gelap) akan membuat konsumsi energi baterai bisa menjadi lebih hemat karena beban kerja piksel pada panel OLED dan AMOLED menjadi lebih ringan.

B. Menambahkan Dark Mode Pada VioMagz v4.7.0

Untuk menambahkan fitur Dark Mode pada VioMagz v4.7.0, kalian ikuti langkah-langkah berikut ini:

1. Copy script pada Syntax Highlighter👀 dibawah ini dan pastekan diatas ]]></b:skin>.

/* modedark */
.modedark{display:inline-block;float:right;margin-top:8px;position:absolute;right:45px;top:0;z-index:999;}
.modedark svg{width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:'';}
.modedark svg path{fill:#fff;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.check{display:none;}
.modedark .iconmode .openmode{display:block;}
.modedark .iconmode .closemode{display:none;}
.modedark .check:checked ~ .iconmode .openmode{display:none;}
.modedark .check:checked ~ .iconmode .closemode{display:block;}
.Night #header-container{background:#16161a;}
.Night{background:#1c1e21;}
.Night #wrapper{background:#202024;color:#fff;}
.Night #footer-widget-container{background:#1c1e21;}
.Night h1.post-title{color:#FF8C00;}
.Night h2.post-title a{color:#d8a689;}
.Night h2.post-title a:hover{color:#DAA520;}
.Night .FeaturedPost .featured-post-info{background:rgba(21, 23, 24, 0.9)}
.Night .featured-post-summary{color:#fff;}
.Night .FeaturedPost h3 a{color:#D2691E;}
.Night .FeaturedPost h3 a:hover{color:#FFA500;}
.Night #cssmenu ul a{background:#16161a;color:#fff;}
.Night #cssmenu ul a:hover{background:#202024;}
.Night #cssmenu ul ul a{background:#1c1e21;color:#fff;}
.Night #cssmenu ul ul a:hover{background:#333333;}
.Night #cssmenu ul li{border-top:0.1px solid rgba(30, 29, 29, 0.9);}
.Night #cssmenu ul ul li a{border-bottom:0.1px solid rgba(21, 23, 24, 0.9);}

2. Copy scrit dibawah ini dan pastekan diatas </body>.

<script>
//<![CDATA[
$(document).ready(function () {
    $("body").toggleClass(localStorage.toggled),
    $("#modedark").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") ? $("#modedark").prop("checked", !0) : $("#modedark").prop("checked", !1)
});
//]]>
</script>

3. Copy scrit dibawah ini dan pastekan diatas </header>.

<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' viewbox='0 0 24 24'><path d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z'/></svg><svg class='closemode' viewbox='0 0 24 24'><path d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z'/></svg></label></div>

Bila kalian ingin melihat cara menambahkan Dark Mode pada tempate VioMagz dalam bentuk video, silahkan kunjungi Butta Toa Youtube Channel👀. 

Walaupun viomagz sudah memiiki tampilan yang menarik, namun beberapa blogger termasuk Admin sendiri merasa nyaman bila menggunakan fitur dark mode (gelap). Selain tidak membuat mata kelelahan, tampilan akan sedikit lebih menarik dengan beberapa modifikasi warna font dan background. Semoga artikel ini bermanfaat buat kita semua. Wassalam.

Share :