Cara Membuat Fitur Dark Mode / Night Mode di Template Blogger VioMagz

Dark Mode atau Night Mode merupakan fitur yang bisa mengubah tampilan menjadi mode gelap atau mode malam dan  mengembalikannya ke mode semula atau mode terang. Sekarang fitur ini semakin banyak ditemukan di berbagai aplikasi maupun website atau blog.

Fitur dark mode sangat berguna untuk kenyamanan pengguna, terutama di waktu malam hari. Fitur ini menjaga kenyamanan mata di malam hari ketika pengguna mengakses aplikasi maupun website yang dituju. Bahkan, pengembang aplikasi menganggap kehadiran fitur mode gelap dan mode terang merupakan hal wajib yang yang harus dihadirkan kepada pengguna.

Selain itu, fitur dark mode juga dibutuhkan oleh pemilik blog atau blogger. Namun, tidak semua template blog memiliki fitur dark mode atau night mode ini. Oleh karena itu, apabila pengguna template menginginkan fitur dark mode pada blog mereka, mereka harus menambahkan sendiri fitur dark mode ini. Lantas, bagaimana caranya?

Berikut ini cara yang bisa Anda terapkan untuk memberikan fitur mode gelap atau malam di blog apabila Anda menggunakan template blogger VioMagz. Namun, apabila Anda menggunakan template lain, cara ini bisa bekerja maupun tidak. 

Cara Memasang Fitur Dark Mode / Night Mode di Template Blogger VioMagz

VioMagz merupakan salah satu template blogger yang tidak memiliki fitur dark mode atau night mode. Agar ada fitur ini, Anda harus memasang terlebih dahulu fitur tersebut ke dalam template VioMagz. Ada cara khusus yang harus dilakukan untuk melaksanakannya.

Berikut ini cara yang bisa Anda ikuti untuk memasang fitur dark mode atau night mode di template blogger VioMagz.

1. Buka dashboard blogger.

2. Masuk ke menu, kemudian pilih tema.

3. Klik tombol segitiga terbalik, kemudian pilih Edit Tema.

4. Tambahkan kode CSS berikut di atas kode ]]></b:skin>

/* dark */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:45px;top:0;z-index:999;}
.modedark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:'';}
.modedark svg path{fill:#595959;}
.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{background:#0c0c0c;color:#fff;}
.Night #wrapper{background:#303030;color:#ddd;}
.Night #header-container{background:#222;color:#ddd;}
.Night #cssmenu ul ul li{background:#232323;}
.Night #cssmenu ul ul li a{color:#ddd;background:#222222;}
.Night #cssmenu ul li{background:#222222;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#ddd;}
.Night #cssmenu a:hover {background:#303030}
.Night a:link {color:#d5f3ff}
.Night a:visited {color:#d5f3ff}
.Night a:hover {color:#aaaaaa}
.Night #sidebar-wrapper a:link {color: #eeeeee}
.Night #sidebar-wrapper a:visited {color: #eeeeee}
.Night #sidebar-wrapper a:hover {color: #aaaaaa}
.Night .above-post-widget h2{color:#ddd;}
.Night .latest-post-title h2{color:#ddd;}
.Night h2.post-title a{color:#ddd;}
.Night h1.post-title{color:#ddd;}
.Night .label-info-th {background:#303030}
.Night .sidebar h2{color:#ddd;}
.Night .sidebar-sticky h2{color:#ddd;}
.Night .sidebar h2,.Night .sidebar-sticky h2{border-bottom:2px solid #ddd;}
.Night .sidebar h2::before,.Night .sidebar-sticky h2::before{background-color:#ddd;}
.Night .artikel-terbaru a{color:#ddd;}
.Night .artikel-terbaru a:hover{color:#0078d4;}
.Night .artikel-terbaru ul li::before{color:#ddd;}
.Night .PopularPosts ul li a{color:#ddd;}
.Night .author-profile >span{color:#595959;}
.Night .tableOfContent{border-color:rgba(255,255,255,.1);background-color:#15202b;}
.Night .tableOfContent #tocContent a{color:#fff;}
.Night .tableOfContent #tocContent ol ul:before,.post-body .tableOfContent ol ol:before,.post-body .tableOfContent #tocContent ul ol:before,.post-body .tableOfContent ul ul:before{border-left:1px dashed rgba(234,228,228,0.2);}
.Night .comments h3{color:#fff;}
.Night #Related ul li a.judul{color:#fff;}
.Night #Related ul li a.judul:hover,#Related ul li:hover a.judul{color:#fff;}
.Night #comments .comment .comment-content,.comment .comment-body{color:#fff;}
.Night #footer-widget-container{background:#292929;color:ddd;}
.Night #footer-navmenu{background:#262626;color:ddd;}
.Night #footer-wrapperx{background:#000;}
.Night #footbawah{background:#121212;color:#fff;}
.Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-name-link,.Night .related-post-style-3 .related-post-item-title{color:#ddd;}

5. Tambahkan kode html switch dark mode icon berikut di atas kode </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='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>

6. Tambahkan kode JavaScript berikut di atas kode </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> 

7. Langkah terakhir, simpan perubahan tema.

Setelah selesai menerapkan semua langkah-langkah di atas, Anda bisa langsung mencoba fiturnya di blog Anda. Tapi sebelum itu, Anda harus memastikan semua kodenya dipasang di tempat yang sesuai dan tidak ada kode yang terlewatkan agar tidak terjadi kesalahan!

Kalaupun ada sedikit perbedaan tampilan mode gelapnya seperti yang ada pada blog Rhulweb.com ini, itu karena ada sedikit modifikasi pada kode-kode tersebut dan template blog ini. Jika Anda memahami cara memodifikasi kode-kode pada template blog, meski sedikit, Anda juga bisa memodifikasinya sendiri.

Khusus di VioMagz versi 4.9.0 ke Atas

Template VioMagz v4.9.0 dan mungkin versi seterusnya sudah tidak menggunakan JQuer lahi. Oleh karena itu, Anda perlu memasang kode JQuery pada template tersebut agar kode Dark Mode berfungsi. Caranya: Masukkan kode JQuery berikut di bawah atau setelah kode <head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Cara Mengubah Warna Font di Submenu Navigasi Template VioMagz

Setelah memasang fitur Dark Mode di Navigasi template VioMagz, ada satu masalah (bug), yaitu warna tulisan di submenu Navigasi yang berubah. Awalnya tulisan ini berwarna sama dengan menu Navigasi. Tetapi warnanya menjadi berubah setelah dipasang fitur dark mode pada template VioMagz.

Warna font submenu di Navigasi VioMagz tidak bisa diubah melalui Desainer Tema / SESUAIKAN di blog. Karena hal inilah yang membuatnya jadi permasalahan tersendiri yang menjadikannya seperti bug setelah memasang fitur dark mode. Tapi Anda tidak perlu khawatir karena ada cara untuk mengatasinya. Berikut ini caranya:

1. Masuk ke Tata Letak blogger.

2. Edit Custom CSS dengan menekan ikon Pena atau Pensil.

3. Salin dan Paste kode CSS berikut di kolom konten yang sudah disediakan, kemudian tekan Simpan.

#cssmenu ul ul li a{color: #575757;}
#cssmenu>ul>li>a {font-size: 13px}
#cssmenu ul ul li a { font-size: 12px; }

4. Selesai. Anda bisa coba buka blog Anda untuk mengecek bagaimana hasilnya. Apakah sudah berubah?

Keterangan kode:

• #575757 = Kode warna submenu navigasi.
• 13px = Ukuran font di menu navigasi.
• 12px = Ukuran font di submenu navigasi.

Penutup

Demikian tutorial terkait cara membuat atau menambah fitur tampilan dark mode (mode gelap) atau night mode (mode malam) pada template blogger VioMagz. Sungguh beruntung apabila Anda menggunakan template blogger VioMagz karena telah mengunjungi artikel ini. Semoga bermanfaat!!!

Sumber kode: dewaplokis.com
Ditulis oleh: Syahrul Hanafi

Berbagi :