Menambah Dark Mode Pada Viomagz

1. 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;}

2. 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>

3. 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> 

4. 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>