Cara Membuat Tampilan Dark Mode Di Template Igniplex

السلام عليكم ورحمة الله وبركاته

Selamat datang di blog BangNaufal.com! Artikel ini merupakan artikel perdana yang berhasil dipublikasikan di blog ini. Semoga Artikel ini menjadi motivasi bagi admin untuk menulis artikel yang lain untuk hari-hari selanjutnya.

Sebelum kita masuk kepada pembahasan Cara Membuat Tampilan Dark Mode Di Template Igniplex. Sedikit admin jelaskan mengenai fitur Dark Mode. Dark Mode atau Night Mode adalah sebuah fitur tambahan untuk membuat tampilan layar menjadi gelap dengan dominasi warna hitam atau membuat foto dan teks muncul di latar belakang hitam.

Fitur Dark Mode kini tengah menjadi sangat trend di berbagai aplikasi. Banyak aplikasi di Android dan iOS yang kini telah mendukung fitur Dark Mode untuk membantu para pengguna yang lebih nyaman dengan antarmuka gelap.

Para Bloggerpun tidak mau ketinggalan dengan trend saat ini. Sudah banyak blogger yang memasang Fitur Dark Mode ini diblog untuk memberikan kenyamanan kepada pengunjungnya. Disini Admin menuliskan tutorial Cara Membuat Tampilan Dark Mode untuk pengguna template Igniplex v2.4 dan v 2.5. Untuk pengguna template lain silahkan disesuaikan. Baca dengan cermat dan teliti untuk setiap langkah agar berhasil.

1. Silahkan Login ke Blogger.
2. Klik menu Tema dan klik tombol Edit HTML

3. Cari kode </head> (gunakan Ctrl+F untuk mempercepat pencarian) Lalu letakkan kode berikut ini tepat diatas kode tersebut.

<style>
.nav-secondary {margin-right: 45px;}
.darkmode-switch .switch-title{color:#fff}
.darkmode-switch .slider{border:2px solid #fff}
.darkmode-switch .slider:before{background:#fff}
.darkmode-switch .switch:hover .slider:before{background:#ffffff}
.darkmode-switch{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0}
.darkmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:4px;text-transform:uppercase}
.darkmode-switch .switch-title:before{content:"Dark Mode"}
.darkmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.darkmode-switch .switch input{opacity:0;width:0;height:0}
.darkmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.darkmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.darkmode-switch input:checked+.slider{background-color:#428c2f;border:2px solid #fff}
.darkmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}
@media screen and (max-width: 480px){
.darkmode-switch .switch-title:before{display:none}
}
body.darkmode{background:#353535;color:#eee}
body.darkmode a:link{color:#eee;-webkit-transition:all .2s;transition:all .2s}
body.darkmode a:visited{color:#eee}
body.darkmode a:hover{color:#fff}
body.darkmode #igniplexHeader{background:#2f2f2f}
body.darkmode #igniplexSlider .PopularPosts .post-labels{background:#2f2f2f}
body.darkmode .FeaturedPost .widget-content,body.darkmode .post-outer,body.darkmode #sidebar .widget,body.darkmode #sidebar .widget-content,body.darkmode #middlebar .widget-content,body.darkmode #blog-pager a,body.darkmode #igniplexFooter{background-color:#2f2f2f!important;border:0}
body.darkmode .igniplexSubscribe svg path,body.darkmode .widget .title svg path,body.darkmode .post-footer svg path{fill:#7a8281}
body.darkmode .Label ul li,body.darkmode .BlogArchive .FLAT ul li,body.darkmode .PopularPosts ul li:before,body.darkmode #blog-pager a:hover,body.darkmode .igniplexMenu .MenuList ul > li > ul{background-color:#4b4e4e!important}
body.darkmode .post-title.entry-title a:hover,body.darkmode .PopularPosts .item-title a:hover,body.darkmode #igniplexFooter .PopularPosts .item-title a:hover,body.darkmode .igniplexRelated ul li > a:hover{color: #909494;}
body.darkmode .totop{background-color:#5f6766;border-color:#5f6766}
body.darkmode .totop:hover{background-color:#2f2f2f;border-color:#2f2f2f}
body.darkmode #main .widget-content, body.isSingle.isPost.darkmode .post-outer .post{background-color:#2f2f2f;border-color:#2f2f2f;}
body.isSingle.isPost.darkmode .post-body,body.isSingle.darkmode .post-outer .post-body{color:#fff}
body.darkmode .tableOfContent{background-color:#595c5f;border:0}
body.darkmode label.toctogglelabel:after {background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%23fff'/></svg>");}
body.darkmode .igniplexShare,body.darkmode .igniplexSubscribe{background-color:#2f2f2f}
body.darkmode .igniplexShare .total{color:#fff;border-top:3px solid #fff}
body.darkmode .igniplexShare .total svg path{fill:#fff}
body.darkmode .igniplexRelatedMiddle .judul:before{background-color:#595c5f}
body.darkmode .igniplexRelatedMiddle .judul:after{border-top:1px solid #fff}
body.darkmode .igniplexRelatedMiddle .judul span,body.darkmode .igniplexSubscribe form input[type="submit"]{background-color:#595c5f;color:#fff}
body.isPost.darkmode .igniplexRelatedMiddle ul li a{color:#fff!important}
body.isPost.darkmode .ignielRelatedMiddle.igniplexRelatedMiddle.igniplexTengah{background:#595c5f;padding:0 10px 10px 10px}
body.isPost.darkmode #blog-pager.stream a, body.isPost.darkmode #blog-pager.stream span{color:#fff}
body.isPost.darkmode #blog-pager.stream .blog-pager-newer-link span:first-child:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1,12L5,16V13H17.17C17.58,14.17 18.69,15 20,15A3,3 0 0,0 23,12A3,3 0 0,0 20,9C18.69,9 17.58,9.83 17.17,11H5V8L1,12Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
body.isPost.darkmode #blog-pager.stream .blog-pager-older-link span:first-child:after{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
body.isSingle.darkmode .igniplexTitle, body.darkmode .post-filter-message,body.isSingle.darkmode .post-outer .post{background-color:#2f2f2f}
body.darkmode .igniplexWave path{fill:#353535;}
body.darkmode #post-pager .selected{background-color:#9c9191}
body.darkmode #post-pager a{background-color:#3c403f}
body.darkmode .post-body table tr:nth-child(odd) td{background-color:#717070;border-right:1px solid #55575a}
body.darkmode .post-body table tr:nth-child(even) td{background-color:#9c9d9e;border-right:1px solid #55575a}
body.darkmode .post-body table th{border-right:1px solid #55575a}
@media screen and (max-width: 480px){
body.isPost.darkmode .post-outer .post{background:#2f2f2f}
}

</style>

4. Lanjutkan dengan mencari kode <body> atau kode <body data-grid-mobile='true' itemscope='itemscope' itemtype='http://schema.org/WebPage'> kemudian tambahkan kode berikut ini tepat dibawah kode tersebut.

<script>
(localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('body').classList.add('darkmode') : document.querySelector('body').classList.remove('darkmode')
</script>

5. Kemudian cari kode <div class='header-right'> letakkan kode berikut ini tepat dibawah kode tersebut.

<div class='nav-secondary'>
<div class='darkmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='checkbox' onclick='darkMode()' type='checkbox'/><span class='slider'/></label>
</div>
</div>

6. Lalu cari kode </body> jika sudah ketemu letakkan kode berikut ini tepat diatas kode tersebut.

<script>//<![CDATA[
function LMcheckCheckbox(){document.querySelectorAll(".checkbox").forEach(function(e){"darkmode"===localStorage.getItem("mode")?e.checked=!0:e.checked=!1})}function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),LMcheckCheckbox()}function darkModeHide(){document.querySelectorAll(".darkmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof IgniPlexSetting&&(IgniPlexSetting={tombolDarkmode:!0}),0==IgniPlexSetting.tombolDarkmode&&darkModeHide();
//]]></script>

7. Terakhir Simpan Tema.

Demikianlah tutorial Cara Membuat Tampilan Dark Mode Di Template Igniplex. Semoga bermanfaat.