Cara Membuat Icon Website Light Dan Dark Mode

Kali ini saya akan memberikan tutorial cara membuat icon website menjadi Light Mode dan Dark Mode, seperti ini contohnya:

rmdhnreza.my.id

Disini saya akan memberikan untuk penggunakan icon berekstensi SVG, jadi tidak menggunakan Javascript atau 2 file icon. Jika website kalian belum menggunakan SVG, pastikan favicon kalian convert terlebih dahulu ke SVG, jika sudah kita langsung ke langkah selanjutnya.

Buka file SVG menggunakan text editor kesukaan kalian (disini saya menggunakan VScode)
Tambahkan baris CSS berikut sebelum <path>

<style>
path {
  fill: black; // light mode, icon berwarna hitam
}

@media(prefers-color-scheme:dark) {
  path {
    fill: white; // dark mode, icon berwarna putih
  }

}
</style>

Jika sudah kalian Save

Edit SVG Icon (Klik Pada Gambar Untuk Memperjelas)

Edit bagian head pada website kalian, hapus baris favicon sebelumnya dan gantikan dengan baris berikut

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Kalian Save lalu test menggunakan browser kesukaan kalian (disini saya menggunakan Microsoft Edge Chromium)

rmdhnreza.my.id