Website atau aplikasi jaman sekarang, kurang lengkap kayanya kalau ga ada fitur ini. Yapps.. fitur dark mode yang bisa bikin tampilan website atau aplikasi lebih nyaman. Dengan fiture dark mode ini user akan diuntungkan dalam hal pemakaian baterai yang lebih hemat dan juga kenyamanan dari mata user ketika membuka website atau aplikasi pada cahaya yang kurang.

Kali ini saya akan membahas gimana caranya untuk membuat dark mode pada website berdasarkan sistem pengguna (OS/device).

Note : kalian sudah punya basic html dan css untuk membuat satu tampilan halaman web.

Kalian bisa manfaatkan CSS media query prefers-color-scheme. Dengan cara ini, website akan otomatis menyesuaikan tampilannya sesuai tema sistem pengguna (misalnya dark mode di Windows, macOS, Android, dll).

contohnya :

/* Default (Light Mode) */
body {
  background-color: #ffffff;
  color: #000000;
}

/* Dark Mode dari Sistem */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

Mudah bukan, kalau mau pakai toogle. nanti kita bahas di artikel selanjutnya. Thaaankss..