Beralih Mode Gelap Harus Menjadi Fitur Peramban – Bram.us
totosgp

Beralih Mode Gelap Harus Menjadi Fitur Peramban – Bram.us

Beralih Mode Gelap Harus Menjadi Fitur Peramban – Bram.us
Mockup browser dalam Mode Gelap + tombol override Mode Terang (🌕) yang diperhitungkan oleh situs web yang ditampilkan

Saat menerapkan Mode Gelap dan cara mengaktifkannya, pengembang saat ini perlu menggandakan kode dan menggulung implementasi sakelar mereka sendiri.

Bagaimana jika, sebaliknya, browser akan menangani semua itu?

~

Daftar isi

~

# Mode Gelap 101

Berkat Media Query Level 5 kami dapat mengimplementasikan Mode Gelap hanya menggunakan CSS. Dengan juga menggunakan CSS Custom Properties dalam campuran, itu menjadi sangat mudah dikelola:

html 
    color-scheme: light dark; /* This site supports both light and dark mode */


:root  /* Default Light Mode colors */
    --primary-color: black;
    --primary-background: white;    


@media(prefers-color-scheme: dark) 
    :root  /* Dark Mode colors */
        --primary-color: white;
        --primary-background: black;    
    


body 
    color: var(--primary-color);
    background: var(--primary-background);


Tergantung pada pengaturan Tema Warna Sistem/OS, situs akan menggunakan teks hitam pada latar belakang putih (Mode Terang) atau teks putih pada latar belakang hitam (Mode Gelap).

~

# Masalah dengan Mode Gelap Beralih

Untuk menawarkan kepada pengguna cara mudah untuk beralih antara Mode Terang dan Gelap, banyak pengembang menawarkan tombol sakelar di situs web mereka. Alih-alih meminta pengguna pergi ke System Preferences, mereka dapat beralih antara Mode Terang/Gelap tanpa harus meninggalkan situs.

Pengembang yang pernah menerapkan sakelar Mode Terang/Gelap, mungkin telah memperhatikan efek samping/keanehan ini:

  1. Untuk membuat ini berfungsi, pengembang harus mengandalkan Peretasan Kotak Centang atau JavaScript untuk mengubah sesuatu – sebagian besar kelas atau atribut – pada dokumen:

    <select name="color-scheme-">
         <option value="system">System</option>
         <option value="light">Forced Light</option>
         <option value="dark">Forced Dark</option>
     </select>
    

    document.querySelector('color-scheme').addEventListener('change', (e) => 
         document.documentElement.setAttribute('data-force-color-mode', e.target.value);
     );

  2. Karena cara pelaksanaannya (lihat langkah 1)duplikasi kode CSS diperlukan:

    :root,
     :root[data-force-color-mode="light"]  /* Default Light Mode colors + Forced Light Mode */
         --primary-color: black;
         --primary-background: white;    
     
    
     /* Dark Color Scheme (System Preference) */
     @media (prefers-color-scheme: dark) 
         :root 
             --primary-color: white;
             --primary-background: black;    
         
     
     /* Dark Color Scheme (Override) */
     :root[data-force-color-mode="dark"] 
         --primary-color: white;
         --primary-background: black;    
     
    

  3. Untuk mempertahankan pengaturan di seluruh halaman dan memuat ulang, JavaScript diperlukan:

    • Tulis nilai yang dipilih setelah mengubahnya
      (Kemungkinan besar cookie atau Penyimpanan Lokal)
    • Baca nilai pada pemuatan halaman, untuk memastikan kelas penggantian yang tepat diatur pada dokumen

  4. Anda juga memerlukan lebih banyak JavaScript agar halaman merespons perubahan Preferensi Sistem.

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     mediaQuery.addListener(() => 
         // Make sure the dropdown is up-to-date based on mediaQuery.matches
     );
    

    Tetapi sekali lagi: apakah Anda masih merespons jika penggantian telah diatur?

Di atas itu banyak implementasi yang saya lihat tidak memperhitungkan nilai “Sistem”. Dengan menghilangkan opsi ini, situs tidak akan pernah dapat merespons preferensi sistem lagi, karena mereka selalu menerapkan override.

~

# Duplikasi Kode sebagai bendera merah

Salah satu hal yang langsung menonjol sebagai bendera merah adalah bagian Duplikasi Kode. Itu telah mengganggu saya sebelumnya, dan itu masih mengganggu saya hari ini. Masalah lain yang terdaftar juga merupakan masalah, tetapi agak dapat diterima.

Memikirkan cara untuk menyelesaikan bagian Duplikasi Kode, saya melihat ide-ide ini beredar:

  • Jika kita memiliki :media() tersedia kelas semu
    (lihat proposal inioleh Lea Verou), mereka bisa menanyakannya di dalam :is()

    :root:is(.dark, :media(prefers-color-scheme: dark)) 
          --primary-color: white;
          --primary-background: black;    
      
    

  • Dengan cara yang sama, jika Kueri Media juga dapat digunakan sebagai penyeleksi (lihat saran ini), Anda juga dapat mengelompokkan pemilih bersama-sama

    @media (prefers-color-scheme: dark) p,
    .dark-mode p 
          --primary-color: white;
          --primary-background: black;    
      
    

    (Sidenote: Sejujurnya saya bukan penggemar saran ini)

  • Jika kami dapat secara terprogram mengubah nilai untuk prefers-color-scheme, bagian CSS yang digandakan dapat dihilangkan. Sesuatu seperti:

    document.querySelector('color-scheme').addEventListener('change', (e) => 
          window.setMedia('prefers-color-scheme', e.target.value);
      );
    

Solusi ini, bagaimanapun, tidak mengatasi masalah lain yang terdaftar. Bagaimana dengan persyaratan JS untuk menanggapi perubahan sakelar, mempertahankan nilainya, membaca nilai saat memuat, …?

~

# Cara beralih yang lebih baik

Bagaimana jika, alih-alih meminta pengembang mencoba dan menerapkan sakelar mereka sendiri dan semua kebiasaannya, peramban akan menawarkan fungsi ini kepada pengguna?

Pikirkan tombol yang merupakan bagian dari UI browser yang dapat Anda klik. Sesuatu seperti tombol Chrome DevTools sudah olahraga, tetapi kemudian bagian dari UI browser, tersedia untuk semua pengguna

Dengan tombol seperti itu, pengguna dapat dengan mudah beralih preferensi, dan pengembang tidak perlu melakukan apa pun untuk menawarkan peralihan yang mudah.

Di atas itu akan memungkinkan pengguna untuk mengatur OS mereka ke Mode Gelap, saat membaca situs web dalam Mode Terang (atau sebaliknya)

~

# Pengaturan yang Diwarisi

Cara saya melihatnya, nilai Gelap/Terang yang dipilih akan dipertahankan pada basis per situs – yaitu mengubahnya akan menyimpan preferensi yang dipilih hanya untuk situs itu.

Untuk tidak memaksa pengguna menyetel nilai untuk setiap situs baru yang mereka kunjungi, juga akan ada setelan di tingkat browser.

Gabungan, Anda akan mendapatkan nilai yang diturunkan dari tingkat sistem ke tingkat situs:

  1. Pengaturan Gelap/Terang di level OS
  2. Pengaturan Gelap/Terang di tingkat Browser (nilai default: mewarisi dari OS)
  3. Pengaturan Gelap/Terang di tingkat Situs (nilai default: mewarisi dari Browser)

Dengan ini, pengguna mendapatkan kebebasan untuk membuat situs yang mereka kunjungi menggunakan skema warna yang berbeda dari OS mereka (jika mereka mau) dan juga membuat pengecualian untuk situs web tertentu.

~

# Demo

Anda dapat bermain-main dengan CodePen di bawah ini untuk melihat bagaimana mengubah pengaturan ini di berbagai tingkat akan menyebar ke UI browser dummy + dua halaman web:


Lihat Mode Gelap Level Pen Browser Beralih oleh Bramus (@bramus) di CodePen.

Pastikan untuk mencoba nilai ke OS:Light+Browser:Dark+Site:Light for bram.uslalu alihkan tab ke other.site:

  • Situs bram.us akan menjadi Cahaya, karena pengaturan Situs menjadi Cahaya
  • Situs other.site akan menjadi Gelap, karena pengaturan Browser menjadi Gelap dan pengaturan Situs spesifiknya diwarisi

Berteriaklah ke Firefox untuk mengirimkan Pengaturan Gelap/Terang di tingkat Peramban dalam rilis Firefox 100 mereka. Mereka juga memiliki opsi tambahan, di mana tema browser yang dipilih dapat memutuskan apakah akan menerapkan Mode Terang atau Gelap.

Sekarang mari berharap kita juga bisa mendapatkan pengaturan di Level Situs?

~

# Kesimpulan

Singkatnya, saya pikir harus ada cara yang lebih mudah untuk mengganti Mode Gelap di setiap situs. Idealnya, beralih/mengganti harus menjadi tombol sederhana
(atau sejenisnya) di tingkat peramban. Dengan begitu kita dapat menyingkirkan semua tombol mode terang/gelap khusus itu, dan browser dapat menyinkronkan nilai preferensi ke semua perangkat yang digunakan pengguna.

Sesuatu yang juga dapat membuat hidup pengembang lebih mudah – tetapi tetap membiarkan tombol khusus tetap di tempatnya – adalah cara untuk mengubah nilai secara terprogram dari dalam JavaScript

window.setMedia('prefers-color-scheme', 'dark');

Atau mungkin bahkan keduanya? Skenario di mana panggilan ke window.setMedia() akan naik ke browser (sehingga mereka dapat menjaga UI mereka tetap sinkron? itu akan menjadi hal yang sepenuhnya opsional untuk diterapkan untuk pengembang, karena browser sudah menyediakan tombol.

Beri tahu saya pendapat Anda di komentar, atau pukul saya di Twitter.

~

# Sebarkan beritanya

Untuk membantu menyebarkan isi postingan ini, silakan retweet tweet pengumuman:

~

Seperti apa yang Anda lihat? Ingin tetap dalam lingkaran? Berikut caranya:

Karena cuma bisa bergantung kepada pihak yang menyediakan data data hk saja yang mampu beroleh knowledge sgp lengkap. Lantas dengan susah nya terhubung website togel singapore pools terhadap negara +62. Maka alangkah baiknya berlangganan terhadap halaman ini untuk menemukan knowledge keluaran sgp hari ini live tercepat hanya disini.