Dasar Pembuatan Night Mode Pada Blog

Tren flat design,sudah berkembang pesat,banyak nya web web designer,terus memberikan inovasi baru,bukan hanya pada web saja tren flat design/UI yang bisa kita jumpai,tapi beberapa aplikasi mobile pun,tampilan nya sudah flat semua. termasuk night mode/mode malam,night mode populer saat flat design merambah kemana mana,termasuk web web design yang sering saya jumpai,beberapa web menaruh fitur ini pada web nya

night mode berfungsi agar saat malam,ketika kita membuka web tersebut di pc ataupun di mobile,tidak silau dengan tampilan nya,biarpun fitur ini sangat klasik,kita hanya membuat web tersebut menjadi gelap,dengan cara di klik pada tombol nya

di aplikasi mobile,seperti twitter,juga sudah menerapkan fitur night mode ini,di bagian profil,kita bisa mengaktifkan fitur ini,membuat tampilan twitter menjadi gelap,untuk menerangkan kembali,tekan tombol light mode,tampilan pun,berubah seperti semula

pada blog,kita bisa membuat night mode ini,tenang saja,kita hanya membutuhkan css,dan jquery,dan html sebagai pemanggil nya,kali ini saya akan memberikan dasar nya saja,nanti bisa kalian kembangkan sendiri

untuk membuat nya,silahkan taruh kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

jika sudah ada di dalam template kamu,silahkan lewati saja

Langkah 1 : membuat tombol untuk mengaktifkan effect

<button class="tombol-nightmode">Night Mode</button>

Langkah 2

untuk mengaktifkan night mode,gunakan jquery dibawah ini,taruh di atas kode </body>

<script>
//<![CDATA[ 
$(document).ready(function(){
    $("button.tombol-nightmode").click(function(){
        $("body").toggleClass('nightmode');
    });
});
//]]>
</script>

Langkah 3

setting css night mode sesuai dengan tag html,taruh kode dibawah ini diatas kode </head>

<style>
/* CSS Night Mode ketika tombol di Klik */
.nightmode {
    background:black;
    color:#fff;
}
/* CSS Tambahan untuk Elemen lain */
.nightmode div {

}
</style>