Membuat Auto Dark Mode AMP Blogger Dengan prefers-color-scheme tahun 2023 – Mode Gelap atau Dark Mode akhir-akhir ini banyak sekali diimplementasikan oleh beberapa OS (Operating System) maupun Aplikasi, baik di IOS, Android, Windows, Mac OS, hingga Linux dan yang tidak mau ketinggalan adalah sebuah desain Webiste untuk mengoptimalkan UX/UI Design.
Dark Mode akan membantu meminimalisir komsumsi daya karena cahaya yang dihasilkan oleh sebuah pancaran warna sebuah desain aplikasi atau website, yang artinya akan menghemat baterai Laptop atau Smartphone.
Dan tentunya akan meminimalisir jumlah pancaran cahaya yang masuk pada mata kita, sehingga mata akan tidak mudah capek, berair dan sakit dikarenakan kelamaan atau terlalu sering memandang layar Laptop atau Smartphone.
Biasanya pada Website atau Blogger fitur Dark Mode akan ditampilkan dengan berupa sebuah tombol switch, yang digunakan untuk merubah dari mode terang ke mode galap.
Fitur tombol ini Dark Mode ini biasanya akan menggunakan komponen HTML, CSS dan Java Script. Saya sebagai user Blogger AMP tentunya tidak bisa memasang fitur Dark Mode pada Blogger, karena AMP tidak mengizinkan untuk custom Java Script.
Dan saya menggunakan prefers-color-scheme, dengan kueri media CSS ini, kita bisa membuat Dark Mode di Blogger AMP dengan mudah. Dimana CSS ini akan mendeteksi preferensi tema sebuah OS perangkat yang digunakan, misal fitur Dark Mode pada Android kamu aktifkan, maka ketika mengunjungi Blog kamu yang telah menggunakan prefers-color-scheme ini otomatis akan menjadikan Blog kamu Dark Mode juga.
Kita tidak memerlukan tombol Switch yang tentunya akan menggunakan Java Scrpit, sudah pasti halaman AMP tidak akan valid dan error, jadi cukup dengan CSS sederhana ini akan membuat blog amp kamu menjadi memiliki fitur Dark Mode yang akan mengikuti settingan perangkat yang digunakan oleh pengguna.
Demonya, silahkan akses blog ini dan ubah mode layar kamu ke mode Dark (gelap) atau Light (terang), maka otomatis blog ini akan berubah mengikuti pengaturan Smartphone atau Laptop kamu.
Bahkan website seperti 9to5google.com/ dan qz.com telah menggunakan fitur ini, jadi CSS ini bisa diterapkan pada Blog AMP atau Non-AMP.
Cara Pasang prefers-color-scheme di Blog AMP
@media (prefers-color-scheme: dark) {
.element {
background: black;
color: white;
}
}Jadi prefers-color-scheme ini memiliki dua nilai yang dapat kamu tentukan: light dan dark. Nilai-nilai ini memungkinkan kamu untuk menyesuaikan tema halaman dengan CSS tergantung pada preferensi pengguna.
/* Light mode */
@media (prefers-color-scheme: light) {
.element {
background: white;
color: black;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.element {
background: black;
color: white;
}
}light: Menunjukkan bahwa pengguna telah memberi tahu kepada sistem bahwa mereka lebih memilih halaman yang memiliki tema terang (teks gelap dengan latar belakang terang).
dark: Menunjukkan bahwa pengguna telah memberitahu kepada sistem bahwa mereka lebih memilih halaman yang bertema gelap (teks terang dengan latar belakang gelap).
Mungkin beberapa Smartphone atau Laptop belum memiliki fitur ini, untuk itu kamu juga bisa menambahakan “default” pada no-preference.
Browser Yang Support CSS ini
Tidak semua browser atau peramban support dengan css ini, tetapi 78% browser sudah support, termasuk Edge terbaru atau Opera Mini, yang tidak support adalah UC Browser.
Demikian, semoga bermanfaat dan selamat menikmati auto gelap-gelapan
