Saksikan Terus HITAM PUTIH Hanya di TRANS 7!

Masih Pake JavaScript Dark Mode + Cookie? Kampungan!!!
Daftar Isi Artikel []

Istilahnya Prolog

Saya sadar akan minimnya ilmu saya di JavaScript, oleh karena itu saya seringkali memaksakan diri sendiri dengan memaksimalkan fungsi CSS.

Apapun elemen yang perlu dan harus menggunakan JavaScript, pasti akan saya pikir dan kulik dulu apakah bisa diciptakan dengan Pure CSS atau tidak. Jika memang bisa, saya akan berusaha membuatnya agar fungsinya tetap berjalan maksimal tanpa Javascript.

Dark mode blogger contohya, dulu saya menerapkan di blogger dengan memanfaatkan param ?view=dark, mengumpulkan semua CSS dark mode dalam tag kondisional ?view=dark, kemudian menyediakan tombol beralih dark mode yang diberi tambahan parameter ?view=dark pada setiap url yang sedang dibuka di menu navigasi atau sticky pada posisi yang mudah di sentuh user, khususnya user mobile. (Sepertinya, tag kondisional yang dulu saya pakai seperti ini data:view.url == data:view.url params { view : "dark" }, saya lupa. Intinya penerapan dark modenya gak pake javascript lah.)

Ada Cara Lain

Dengan memanfaatkan CSS media query color scheme, kita bisa menerapkan mode gelap terang dengan pure CSS. Kalo kata Dodit yaaa,
Pasang dark mode di blog pake JavaScript? KAMPUNGAN!!!
@media screen and (prefers-color-scheme: light) {
  /* CSS Light Mode */
}
@media screen and (prefers-color-scheme: dark) {
  /* CSS Dark Mode */
}

Kalo disuruh pilih pake Javascript atau CSS, jelaslah saya pilih pake CSS, kalo pake JavaScript + Cookie pas kita refresh, pindah halaman biasanya ada kedipan akibat dari perpindahan dari mode default ke mode gelap. Itu menggangu mataku!

Jadi, saya lebih mengggunakan CSS atau tidak samasekali. Untuk saat ini, saya lebih memilih tidak samasekali, soalnya belum support di semua browser. Mungkin membungkusnya dengan tag kondisional jauh lebih baik daripada menggunakan CSS Media Query, tapi jauh lebih ribet pula.

Jalan keluarnya adalah Javascript, tapi saya tidak suka dengan efek yang ditimbulkan, kalo sampean tidak mempermasalahkannya, pakailah.

Contoh Penerapan

Liat kotak dibawah ini, kalo browser yang sampean pake ada fitur dark mode, coba aktifkan matikan. Kalo browser yang sampean pake udah support fungsi CSS tersebut, teks dalam kotak di bawah ini pasti akan berubah sesuai mode yang sampean pilih/atur.

Kalo gak liat ada kotak, berarti browsermu gak support.


Lagi, saya meninggalkan JavaScript. ahsudahlah!
  1. Blogger Tapin

    28/11/19

    Mantap saya suka, bilangin yang suka make bostrap fix msh nob :3