Membuat Dark/Light Mode dengan CSS – Memberi pengguna penyesuaian interface dengan preferensi mereka adalah kemenangan besar bagi pengalaman pengguna. Di sini kami akan memberikan switcher sederhana untuk berpindah antara mode gelap dan mode cahaya (dark/light mode).
Mari kita mulai!
Membuat Dark/Light Mode dengan CSS
Jika kamu belum situs web sendiri untuk menggunakan fungsionalitas ini, gunakan situs web demo ini untuk mengikuti.
Baca juga: Codepen, Tempat Bermain Frontend Developer
See the Pen Demo Page by Abay (@abaykan) on CodePen.
Tambahan Sentuhan CSS
Kita akan menambahkan custom-property CSS yang juga dikenal sebagai variabel CSS, yang dapat kita rujuk dan modifikasi di seluruh dokumen. Kalau kamu ingin membaca lebih lanjut tentang custom-property, kamu bisa membaca di MDN.
Pertama, kita akan menambahkan variabel css mode cahaya atau standar ke psuedo-class :root
. Kita menggunakan :root
karena akan memanfaatkan variabel tersebut secara global.
:root { --primary-color: #302AE6; --secondary-color: #536390; --font-color: #424242; --bg-color: #fff; --heading-color: #292922; }
Kedua, kita akan menambahkan variabel css untuk versi gelap (dark).
[data-theme="dark"] { --primary-color: #9A97F3; --secondary-color: #818cab; --font-color: #e1e1ff; --bg-color: #161625; --heading-color: #818cab; }
Apa itu [data-theme="dark"]
? Ini berarti kita mereferensikan atribut data yang disebut data-theme dengan nilai “dark”. Kita akan melihat contoh penggunaannya sebentar lagi.
Selanjutnya, kita bisa mereferensikan variabel-variabel ini dalam stylesheet kita seperti:
body { background-color: var(--bg-color); color: var(--font-color); /*styles tambahan*/ ..... } h1 { color: var(--secondary-color); /*styles tambahan*/ ..... } a { color: var(--primary-color); /*styles tambahan*/ ..... }
Menambahkan HTML “toggle switch markup”
Pada dasarnya ini hanya kotak centang, tapi akan menambahkan beberapa markup tambahan ke styke agar terlihat seperti sakelar. Saya terinspirasi dari sini.
<div class="theme-switch-wrapper"> <label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox" /> <div class="slider round"></div> </label> <em>Enable Dark Mode!</em> </div>
.theme-switch-wrapper { display: flex; align-items: center; em { margin-left: 10px; font-size: 1rem; } } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
Menambahkan Javascript
Bagian terakhir adalah menambahkan sedikit JavaScript untuk menyatukan semuanya. Yang harus kita lakukan adalah:
- Tambahkan event handler untuk menangani centang / hapus centang di toggle-switch.
- Simpan preferensi pengguna untuk kunjungan selanjutnya.
- Periksa preferensi pengguna yang disimpan.
Menambahkan Event Handlers
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); } } toggleSwitch.addEventListener('change', switchTheme, false);
Simpan preferensi Pengguna untuk kunjungan selanjutnya
Kita akan menggunakan local storage browser untuk menyimpan preferensi pengguna. Mari kita modifikasi fungsi switchTheme
kita.
function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); //add this } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); //add this } }
Periksa preferensi pengguna yang disimpan, jika ada, saat memuat situs web:
- Atur atribut
data-theme
. - Centang / hapus centang pada kotak toggle-switch.
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } }
Selesai! Coba lihat demo di bawah ini!
See the Pen Dark/Light Mode Switch with CSS Variables by Abay (@abaykan) on CodePen.
Thumbnail: Oleg Frolov.
artikel yang sangat bermanfaat dan sangat membantu
Mudah di mengerti dan simple
mantapp..good job brother
nice
kenapa atribut datanya harus ditaruh di dalam parent element bukan di body? apakah ada bedanyanya?