Menjadikan Semua Tema Blog/Web Menjadi Dark Mode Dengan Satu Selector CSS - KnoAcc.Org

KnoAcc.Org - Dark mode belakangan menjadi populer termasuk dikalangan WebDev. Bagi pemula, banyak yang mengira bahwa membuat sebuah theme blogger/wordpress (atau tema website) secara keseluruhan menjadi dark mode membutuhkan kustomasi CSS yang ribet. Tetapi ternyata dark mode bisa diimplementasikan ke dalam tema website hanya dengan satu baris kode!

Tentu bukan benar-benar cuma sebaris kode. Tetapi lebih tepatnya cukup menggunakan satu selector CSS dan sedikit magic trick. Benarkah? Ayo kita coba!

Sebagai contoh praktek kita bisa memakai Bulma yang secara default punya tampilan seperti gambar berikut:

Sekarang kita tambahkan satu baris CSS ke dalam theme seprti berikut:

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

Cukup mudah bukan? Dan kita akan melihat hasilnya secara instan bisa kita dapatkan tampilan dark mode seperti gambar berikut:

Baiklah, dark-mode memang sudah jadi secara otomatis. Tetapi kalau di lihat lagi seperti ada yang kurang kan? Ya, gambar yang ada di halaman jadi terlihat aneh seperti gambar klise.

Begini Penjelasannya

Baiklah, begini proses yang sebenarnya terjadi pada gambar dan halaman web yang kita jadikan dark mode secara instan ini.

Properti CSS filter membuat efek visual seperti blur (memburamkan) atau mengubah komposisi warna tertentu pada suatu elemen. Filter biasanya digunakan untuk mengatur tampilan gambar, background dan border. (Lihat: MDN Web Docs)

Nah, untuk membuat dark mode instan ini, kita menggunakan dua dari beberapa filter tersebut. Yakni invert dan hue-rotate. Apa sih fungsi keduanya?

Filter invert digunakan untuk membalik skema warna pada bidang elemen yang menjadi target. Misalnya saja warna hitam akan menjadi putih dan warna yangbsebelumnya putih akan menjadi hitam. Mirip dengan yang didapatkan dari fungsi colors.invert() dengan rentang nilai properti filter berupa bilangan dari 0 hingga 1 (mis: 0.50) atau dengan nilai presentase antara 0% hungga 100% (mis: 50%).

Sedangkan filter hue-rotate mengakomodasi pembalikan nilai semua warna selain warna hitam dan putih. Dengan nilai rotasi hue sebesar 180 derajat (180deg) kita memastikan warna tema tidak berubah tetapi hanya memberikan "sentuhan" pada warna-warna yang dipakai tema yang dipakai.

Hanya saja, dengan memakai metode dark mode instan ini akan membuat semua gambar yang ada menjadi ikut-ikutan terbalik warnanya dan menjadi seperti sebuah klise. Bahkan video yang ada di halaman yang sama juga ikut terbalik warnanya.

Jadi untuk mengatasi hal ini kita perlu menambahkan nilai properti yang sama untuk elemen gambar. Tujuannya untuk mengembalikan nilai preoperti menjadi normal kembali. Tambahkan CSS berikut dengan target semua bentuk gambar dan video:

html[theme='dark-mode'] img,
picture,
video{
    filter: invert(1) hue-rotate(180deg);
}

Kemudian kita juga perlu menambahkan sebuah kelas untuk membalikkan efek pada tag tertentu sebagai berikut:

.invert {
    filter: invert(1) hue-rotate(180deg);
}

Hasil Akhirnya

Secara lengkap, kita akan mendapatkan sebaris kode dark mode instan yang bisa diaplikasikan pada sebuah halaman web, theme blogger atau wordpres.

html[theme='dark-mode'] img,
picture,
video{
    filter: invert(1) hue-rotate(180deg);
}

Dan untuk membalikkan efek negatif pada gambar, video dan elemen tertentu yang ingin kita krcualikan dari dark mode dengan memberi CSS pada kelas .invert yang bisa kita gunakan pada tag elemen tertentu.

.invert {
    filter: invert(1) hue-rotate(180deg);
}

That's it. Maka cukup dengan satu selector CSS atau sebaris kode CSS saja sebuah thema blog bisa di jadikan sebuah theme dark-mode.

Untuk aplikasinya bisa dengan menambahkan fungsi jQuery onload atau tombol pemicu fungsi yang bisa di akses secara manual dengan memanfaatkan local storage misalnya. Tergantung kebutuhan.