Membuat Dark Mode dan Light Mode Pada Website TLab
Theme atau tema mode pada sebuah halaman website, aplikasi sekarang memiliki dua versi yaitu light mode dan dark mode. Tema ini akan memberikan dampak kenyamanan bagi pengguna. Alasannya pada kondisi tertentu apabila cahaya sekitar cukup atau berlebihan maka dark mode akan cocok digunakan sedangkan ketika cahaya sedikit light mode lebih nyaman digunakan. Oleh karena itu pada studi kasus kali ini yaitu pada halaman website TLab akan diterapkan dua mode tersebut untuk memberikan kenyaman lebih kepada pengunjung website.
Hal pertama yang perlu dipersiapkan adalah color style yang dibuat untuk light mode dan dark mode. Setelah itu kalian perlu membuat variable colors untuk warna yang akan dipakai untuk mengubah mode/theme. Bisa dibuat seperti gambar dibawah ini :
Ketika sudah dibuat seperti gambar berikut, pada frame mockup yang telah dibuat akan bisa diubah mode/theme sesuai yang diinginkan.
Cara untuk mengubah mode/theme yaitu klik pada frame mockup yang telah dibuat menggunakan variable colors. Lalu untuk mengubah mode/theme bisa diubah melalui layer dan pada icon yang dihover biru pada gambar diatas. Maka mockup pada layer tersebut warnanya akan otomatis berubah sesuai mode yang dipilih.
Keuntungan menggunakan cara ini dengan cara variable colors akan membantu lebih efektif dan efisien ketika membuat dua mode mode/theme. Karena hanya tinggal pilih mode sudah bisa berubah warna.
