Cara mendeteksi jika OS Pengguna lebih memilih mode gelap dan mengubah situs Anda dengan CSS dan JS

Saya mendapat tweet dari Stevö John yang mengatakan dia menemukan tema ringan saya yang ada untuk blog saya menjadi menggelegar saat dia hidup dalam Mode Gelap. Saya tidak pernah benar-benar memikirkannya sebelumnya, tetapi begitu dia mengatakannya, itu menjadi jelas. Saya tidak hanya harus mendukung mode gelap, tetapi saya harus mendeteksi preferensi pengguna dan beralih dengan mulus. Saya juga harus mendukung perubahan mode jika browser atau OS juga berubah. Stevö berbaik hati mengirimkan beberapa contoh CSS dan beberapa tautan, jadi saya mulai menjelajahi topik tersebut.

Ada beberapa hal di sini yang perlu dipertimbangkan saat menggunakan skema warna pilihan dan mendeteksi mode gelap:

  • Menggunakan tema yang ada semaksimal mungkin.
    • Saya tidak ingin memiliki style.css dan style-dark.css jika saya dapat menghindarinya. Kalau tidak, itu akan menjadi mimpi buruk pemeliharaan.
  • Buat ini berfungsi di semua situs saya
  • Pertimbangkan widget pihak ketiga
    • Saya menggunakan penyorot sintaks (sangat sangat tua) untuk blog saya, dan saya menggunakan pemutar HTML5 podcast dari Simplecast untuk podcast saya. Saya tidak suka mode gelap semuanya dan kemudian memiliki pemutar podcast LIGHT MODE tua yang besar yang menakut-nakuti orang. Karena itu, saya membutuhkan konteks untuk mengalir sepenuhnya.
  • Pertimbangkan keadaan awal halaman serta tahap perubahan.
    • Tentu, saya hanya bisa membuat halaman terlihat bagus ketika Anda memuatnya dan jika Anda mengubah mode (gelap menjadi terang dan kembali) di tengah-tengah melihat halaman saya, itu juga harus berubah, bukan? Dan juga pertimbangkan semua persyaratan di atas.

Anda dapat mengatur browser Chrome/Edge untuk menggunakan Pengaturan Sistem, Terang, atau Gelap. Cari Tema di Pengaturan.

Pilih Tema Anda, Gelap atau Terang

Semua ini, dan saya hanya bisa melakukannya pada jam makan siang saya karena blog ini bukan pekerjaan saya yang sebenarnya. Ayo pergi!

Kueri Media CSS skema warna pilihan

Saya menyukai kueri @media CSS dan telah menggunakannya selama bertahun-tahun untuk mendukung perangkat seluler dan tablet. Hari ini mereka adalah pokok dari desain responsif. Ternyata Anda bisa menggunakan kueri @media untuk melihat apakah pengguna lebih suka mode gelap.

@media (prefers-color-scheme: dark) {

Manis. Apa pun di dalam sini (C dalam CSS adalah singkatan dari Cascading, ingat) akan menimpa apa yang ada sebelumnya. Berikut beberapa aturan awal yang saya ubah. Saya baru saja mengubah hal-hal di inspektur alat F12, dan kemudian mengumpulkannya kembali ke halaman CSS utama saya. Anda juga dapat menggunakan variabel jika Anda adalah orang CSS yang terorganisir dengan sistem desain.

Ini hanya beberapa, tetapi Anda mendapatkan idenya. Perhatikan contoh .line-tan juga di mana saya mengatakan ‘kembalikan saja ke nilai awalnya.’ Itu seringkali jauh lebih mudah daripada menghasilkan nilai “kebalikan”, yang dalam hal ini berarti menghasilkan beberapa PNG.

@media (prefers-color-scheme: dark) {
body {
color: #b0b0b0;
background-color: #101010;
}

.containerOuter {
background-color: #000;
color: #b0b0b0;
}

.blogBodyContainer {
background-color: #101010;
}

.line-tan {
background: initial;
}

#mainContent {
background-color: #000;
}
...snip...
}

Manis. Perubahan pada css utama saya ini berfungsi untuk situs utama http://hanselman.com. Mari kita buat blog sekarang, yang menyertakan penyorot sintaks pihak ke-3. Saya menggunakan aturan dasar yang sama dari situs utama saya tetapi kemudian juga harus (maaf orang-orang CSS) menjadi agresif dan terlalu !penting dengan penyorot sintaks yang sangat lama ini, seperti ini:

@media (prefers-color-scheme: dark) {
.syntaxhighlighter {
background-color: #000 !important
}

.syntaxhighlighter .line.alt1 {
background-color: #000 !important
}

.syntaxhighlighter .line.alt2 {
background-color: #000 !important
}

.syntaxhighlighter .line {
background-color: #000 !important
}
...snip...
}

Jarak tempuh Anda mungkin berbeda tetapi semuanya tergantung pada alatnya. Saya tidak dapat menjalankan ini tanpa !important yang menurut saya tidak disukai. Permintaan maaf saya.

Mendeteksi preferensi Mode Gelap dengan JavaScript

Kontrol pihak ketiga yang saya gunakan untuk podcast saya seperti banyak kontrol, ini adalah iFrame. Dengan demikian, dibutuhkan beberapa parameter sebagai parameter querystring URL.

Saya menghasilkan iFrame seperti ini:

<iframe id='simpleCastPlayeriFrame' 
title="Hanselminutes Podcast Player"
frameborder="0" height="200px" scrolling='no'
seamless src="https://player.simplecast.com/{sharingId}"
width="100%"></iframe>

Jika saya menambahkan “dark=true” ke querystring, saya akan mendapatkan skin pemain yang berbeda. Ini hanyalah salah satu contoh, tetapi biasanya integrasi pihak ketiga menginginkan queryString atau variabel atau CSS khusus. Anda akan ingin bekerja dengan vendor Anda untuk memastikan mereka tidak hanya peduli dengan mode gelap (terima kasih Simplecast!) dan mereka memiliki cara untuk mengaktifkannya dengan mudah seperti ini.

Mode Gelap dan Mode Terang Pemutar Podcast Simplecast

Tapi ini memperkenalkan beberapa masalah menarik. Saya perlu mendeteksi preferensi dengan JavaScript dan memastikan pemain yang tepat dimuat.

Saya juga ingin memperhatikan jika tema berubah (terang menjadi gelap atau kembali) dan secara dinamis mengubah CSS saya (bagian itu terjadi secara otomatis oleh browser) dan pemutar ini (itu harus dilakukan secara manual, karena mode gelap dipanggil melalui URL segmen string kueri.)

Berikut kode saya. Sekali lagi, bukan ahli JavaScript tetapi ini terasa alami bagi saya. Jika tidak super idiomatik atau hanya menyebalkan, email saya dan saya akan melakukan pembaruan. Saya memeriksa window.matchMedia untuk setidaknya tidak panik jika browser yang lebih lama muncul.

if (window.matchMedia) {
var match = window.matchMedia('(prefers-color-scheme: dark)')
toggleDarkMode(match.matches);

match.addEventListener('change', e => {
toggleDarkMode(match.matches);
})

function toggleDarkMode(state) {
let simpleCastPlayer = new URL(document.querySelector("#simpleCastPlayeriFrame").src);
simpleCastPlayer.searchParams.set("dark", state);
document.querySelector("#simpleCastPlayeriFrame").src = simpleCastPlayer.href;
}
}

toggleDarkMode adalah metode sehingga saya dapat menggunakannya untuk status awal dan status ‘perubahan’. Ia menggunakan objek URL karena string parsing sangat 2000-dan-terlambat. Saya mengatur searchParams daripada .append karena saya tahu itu selalu disetel. saya mengaturnya.

Saat saya menulis ini, saya kira saya dapat menyimpan document.querySelector() seperti yang saya lakukan pada matchMedia, tetapi saya baru melihatnya sekarang. Menisik. Tetap saja, itu berhasil! Jadi saya #shipit.

Saya yakin saya melewatkan satu atau dua halaman atau satu atau tiga elemen jadi jika Anda menemukan halaman putih atau kesalahan, ajukan di sini https://github.com/shanselman/hanselman.com-bugs/issues dan saya akan mengambilnya lihat kapan aku bisa.

Secara keseluruhan, jam makan siang yang menyenangkan. Terima kasih Stevö untuk dorongan!

Sekarang ANDA, Pembaca yang Terhormat dapat memperbarui situs ANDA untuk Mode Terang dan Mode Gelap.


Sponsor: Alasan No. 1 Pengembang Memilih Couchbase? Anda dapat menggunakan keterampilan SQL++ yang ada untuk dengan mudah melakukan kueri dan mengakses JSON. Itu lebih banyak kekuatan dan fleksibilitas dengan lebih sedikit pelatihan. Belajarlah lagi.

Tentang Scott

Scott Hanselman adalah mantan profesor, mantan Kepala Arsitek di bidang keuangan, sekarang pembicara, konsultan, ayah, penderita diabetes, dan karyawan Microsoft. Dia adalah seorang komika stand-up yang gagal, seorang pendayung pojok, dan seorang penulis buku.

facebook
Indonesia
langganan
Tentang Buletin

Hosting Oleh
Di-host di Layanan Aplikasi Azure