Implementasi Light dan Dark Mode di Web itu Mudah

Kamis, 2 Oktober 2025 1 menit baca

Web Development

Pendahuluan#

Sudah umum kalau device terkini memiliki fitur light dan dark mode terpasang di operating system bawaan.

Masalah#

Tapi terkadang fitur ini masih belum kita bisa temukan di website yang kita kunjungi disaat diperlukan.

Solusi#

Tahukah kamu kalau pemasangan fitur light dan dark mode itu tidak mudah, berikut cara implementasinya.

Pilih satu di antara beberapa value yang tersedia berikut:

color-scheme: normal; // relatif terhadap OS
color-scheme: light; // hanya light mode
color-scheme: dark; // hanya dark mode
color-scheme: light dark; // wajib untuk menggunakan fungsi light-dark()
color-scheme: only light; // memaksa light mode terhadap setelan browser

Berikut cara implementasi lengkapnya:

:root {
  color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}
@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}

Sebagai alternatif agar kode lebih singkat, bisa menggunakan:

color: light-dark(black, white);
background-color: light-dark(white, black);

Cara alternatif adalah yang terbaru, yaitu tahun 2024 dibanding cara pertama yaitu di pertengahan 2019.

Namun menurut saya sedikit lebih menyusahkan untuk di-maintenance, karena kode warnanya bersebelahan jadi rawan untuk salah edit.

Kalian bisa cek compatibility css color-scheme di Can I Use.

Daftar Pustaka:#

• MDN