Cara Membuat Dark Mode Switcher

Tutorial - Sofyan R. - 27 Mei 2019

KoiDezign – Kali ini saya ingin membagikan sebuah tutorial yang mungkin kalian ingin tahu cara membuatnya yaitu: Cara Membuat Dark Mode. Langsung saja disimak tutorialnya.

Membuat Dark Mode Switcher

Bagaimana Cara Membuat Dark Mode Switcher di Website? Caranya cukup simpel kok.

Pertama-tama kalian copy dulu script berikut ini lalu kalian letakkan di footer kalian tepatnya diatas kode </body>.


Kedua kalian copy script berikut ini lalu kalian letakkan di header kalian tepatnya dibawah kode </head>.



Nah, Selanjutnya kalian letakkan switcher dark modenya boleh di footer atau terserah sesuaikan dengan keinginan kalian.

Change theme

Setelah itu, jangan lupa kalian tambahkan cssnya di style.css, kalian bisa modifikasi sendiri stylenya sesuai keinginan kalian.

/* Dark Mode by KoiDezign.com */
.switchtheme{width:100%;max-width:1000px;padding-top:5px;padding-bottom:5px;margin:0 auto;background:#222;}
.quicktoggler.theme{text-align:right;}
.quicktoggler .text{color:#eee;text-transform:uppercase;font-size:.7rem;font-weight:600;padding:5px 0;}
.quicktoggler .switch{position:relative;display:inline-block;width:25px;height:12px;margin:0 5px;vertical-align:-2px;}
.quicktoggler .switch input{display:none;}
.quicktoggler .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;background:#ccc;}
.quicktoggler .slider:before{position:absolute;content:"";height:10px;width:10px;left:1px;bottom:1px;background-color:#fff;-webkit-transition:.4s;transition:.4s;}
.quicktoggler input:checked+.slider{background-color:#000;}
.quicktoggler input:focus+.slider{box-shadow:0 0 1px #000;}
.quicktoggler input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px);}
.quicktoggler .slider.round{border-radius:34px;}
.quicktoggler .slider.round:before{border-radius:50%;background:#0eafc1;}
.dark{background:#111;color:#eee;}
.dark a{color:#eee;}
/*... dan seterusnya ...*/

Untuk menambahkan class lain cukup tambahkan .dark sebelum .class kalian.

Contoh:

.dark .box {background:#444}

Untuk demonya bisa kalian lihat sendiri di link berikut ini.

Demo

Sekian tutorial dari saya tentang Cara Membuat Dark Mode Switcher, semoga bermanfaat dan Selamat Mencoba 😀.

Incoming search terms:

  • cara slider anime

Jangan lupa untuk Share dan Komentar ya ^_^ Terima Kasih...
About Author
Sofyan R.

Hanyalah seorang pelajar yang sedang mendalami ilmu php, html, dan css. Dan ingin berbagi ilmu yang sudah dipelajarinya...