kode </head> (kalau yang sudah ada kode jQuery nya ngga usah dipasang) :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Kemudian dilanjutkan dengan meletakkan kode jQuery diatas kode </body> atau kode </head>
<script>
//<![CDATA[
$('.darklight').toggle(function() {
$(this).text('LIGHT MODE !');
$("body").toggleClass('darkstyle');
}, function() {
$(this).text(' DARK MODE! ');
$("body").toggleClass('darkstyle');
});
//]]>
</script>
Selanjutnya adalah kode CSS yang akan sobat gunakan dan edit bagian mana saja yang akan berubah jika tombol dark/light mode diklik.
Letakkan kode dibawah ini diatas ]]></b:skin> ataupun kode </style> (asalkan kode <style> dan </style> dibawah ini dihapus)
<style>
/* CSS Night Mode ketika tombol di Klik */
.darkstyle { background:#444; color:#ccc;}
/* Contoh CSS yang di tambahan untuk Elemen lain */
.darkstyle #outer-wrapper { background-color:#333;}
</style>
Sobat dapat menambahkan kode CSS bagian mana saja yang akan berubah saat tombol dark/night mode diklik, backgroundnya terletak pada elemen #outer-wrapper
Kamu juga bisa tambahkan elemen lain diatas kode </style> pada kode diatas tadi
<button class="darklight">DARK MODE</button>
Nah sekian tutorial membuat mode malam dan siang pada postingan kali ini, semoga bermanfaat dan berguna bagi sobat sekalian. terimakasih atas kunjungan sobat semua :)