Apakah fungsi CSS-Dark () mendukung lebih banyak nilai terang dan gelap? – Beragampengetahuan

Salah satu fitur CSS baru yang menarik minat saya: light-dark() Fungsi. Saya sudah mengikutinya sejak Mei 2024.

ini light-dark() Fungsional, pendek

Jika Anda tidak tahu, light-dark() Fungsi ini membutuhkan dua parameter warna: satu untuk mode cahaya dan satu untuk mode gelap. Oleh karena itu, namanya light-dark(). Ini beralih antara dua nilai terang dan gelap sesuai dengan preferensi pengguna. Sara Joy memiliki artikel hebat yang bisa Anda dapatkan lebih detail.

Kuncinya adalah fitur ini mengharuskan Anda menggunakannya color-scheme Atribut mengaktifkan dua mode warna ini:

:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(brown, black);
}

Selain itu, menurut preferensi pengguna, salah satu dari dua mode ini diterapkan.

Hanya ada dua mode?

Yang mengatakan, saya sudah lama bertanya -tanya: sebaiknya light-dark() Dukungan fungsional bukan hanya mode terang dan gelap?

Saya sudah menulisnya light-dark() Untuk buku tahunan beragampengetahuan. Dalam penelitian saya, saya mendapati diri saya berharap fitur ini akan berbuat lebih banyak, terutama karena tidak memiliki dukungan untuk jenis skema warna lain yang mungkin disukai pengguna, seperti skala abu -abu, kontras tinggi, dan kontras rendah.

Melakukan light-dark() Apakah bahkan perlu memiliki mode kontras yang tinggi?

Saya akan mengatakan ya Dan Tidak. Ayo kembali ke kapan light-dark() Awalnya diusulkan di suatu tempat sekitar tahun 2022. Emiliocobos membutuhkan fitur untuk mendukung perubahan mode terang dan gelap dan menambahkannya ke spesifikasi.

Menyelesaikan dan memprosesnya, kan? Tidak begitu cepat. Ketika Jacob Miller dimasukkan, tiket mematikan:

Baru saja melihat ini dari posting @Bramus, saya menduga hal -hal telah ditutup/yang telah berubah sekarang, tapi saya pikir itu cara untuk benar -benar tidak menyelesaikan masalah yang dihadapi orang dengan topik dan dengan cara untuk membuat perangkap untuk mereka ketika mengejar dukungan topik yang tepat.

[…]

Kita tidak boleh mengirimkan alat serba guna ke browser, melainkan dapat diperpanjang dan kita bisa berbasis browser.

Dia berbicara tentang hal -hal baik karena itu mendorong Brams untuk membuka kembali tiket:

Saya pikir ini salah. Tujuan utamanya adalah memiliki sesuatu yang serupa schemed-value()Dan light-dark() Ini adalah langkah mediasi menuju solusi akhir.

Ini sangat penting! Kata Brams light-dark() Fungsi adalah solusi perantara untuk a schemed-value() Fungsi. Dengan kata lain, transportasi light-dark() Tidak pernah ada tujuan akhir yang telah ditentukan. Ini adalah langkah lain yang lebih kuat schemed-value() fitur.

Skema Warna Kustom

Brams telah banyak menulis tentang schemed-value() konsep. Sepertinya ini:

:root {
  color-scheme: dark light custom;
}

body {
  color: schemed-value(
    light lightblue, /* Value used for light color-scheme */ 
    dark crimson, /* Value used for dark color-scheme */ 
    --custom green /* Value used for --custom color-scheme */
    );
}

itu di luar pertanyaan light-dark(). Bahkan, sebelum fungsi dapat mendukung dua mode, color-scheme Ruang lingkup properti harus diperluas di luar light Dan dark nilai. Hanya ini light-dark() Itu diperluas karena, ingat, light-dark() membutuhkan color-scheme Untuk melakukan hal Anda sendiri.

Secara khusus, kita perlu color-scheme Menerima semacam nilai skema warna “khusus”. Tab Atkins memberikan contoh yang mungkin dalam tiket. Idenya adalah mendaftarkan skema warna khusus menggunakan a @color-scheme Aturan perangkat yang menentukan sifat -sifat skema, seperti memetakan kata kunci warna tertentu yang, dan kemudian menggunakan identifikasi skema warna itu di atasnya color-scheme Properti yang dideklarasikan pada elemen root:

@color-scheme --high-contast {
  base-scheme: dark;
  canvascolor: black;
  canvastext: white;
  accentcolor: white;
  /* other properties set to specific colors */
}

html {
  color-scheme: --high-contrast;
}

Menerapkannya, dan skema warna khusus dapat digunakan sebagai nilai independen mereka sendiri schemed-value() Fungsi:

@color-scheme --high-contast {
  /* ... */
}

html {
  color-scheme: --high-contrast light dark;
}

body {
  color: schemed-value(--high-contrast, black, white);
}

Solusi untuk semua itu:

• Kami mendaftarkan skema warna khusus (mis. --high-contrast) @color-scheme Ada aturan.
• Kami mendefinisikan sifat -sifat skema warna dalam spesifikasi perangkat, seperti apakah tema dasarnya light atau dark dan kata kunci warna untuk nilai -nilai tertentu dipetakan.
• Kami berada di color-scheme Atribut berada di level root (mis. html { color-scheme: --high-contrast;}).
• Kami mengumumkan skema warna khusus tentang properti terkait warna dengan mendeklarasikan skema warna khusus schemed-value() Fungsi.

Jadi, tidak hanya akan light-dark() Ubah, CSS color-scheme Properti kemungkinan memiliki aturan sendiri untuk memungkinkan penyesuaian color-scheme nilai.

Kami membutuhkan lebih banyak dukungan tema warna, tetapi tidak light-dark()

Ini mengarah pada pertanyaan saya sebelumnya: light-dark() Apakah fungsi benar -benar perlu mendukung lebih dari dua mode skema warna? Brams punya jawaban:

Kapan schemed-value() Itu dulunya adalah sesuatu, light-dark() Itu akan menjadi gula sintaksis.

Ah! Ini berarti light-dark() Tidak perlu mendukung banyak mode karena schemed-value() Kemampuan untuk memperluas light-dark() Dengan kebajikannya sendiri:

light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>);

Ya light-dark() Langkah Perantara? Ya. Haruskah diperluas untuk mendukung banyak mode, termasuk skema warna khusus? Tentu saja, tetapi tidak harus. Sebaliknya, kami dapat mendaftar dan menentukan skema warna khusus dalam spesifikasi perangkat dan memastikan color-scheme Properti dapat dibaca. Dengan cara ini, kami memperoleh kesederhanaan dari dua fungsi pola, yang dapat diabstraksi lebih lanjut untuk mendukung pola khusus lainnya (jika diperlukan).

Bahkan, itu melampaui skema warna. Bahkan ada tiket terbuka yang dapat diperluas light-dark() Untuk gambar dan diskusi di sekitarnya, tampaknya menyetujui fitur -fitur baru yang dirancang khusus untuk itu.

Bagaimana dengan fungsi khusus?

Tapi tunggu! Bukankah ini terdengar seperti apa yang kami dengar tentang mengerjakan fitur khusus? Memang, tag ini kembali menggunakan metode yang mungkin if() Fungsional, dan Chris Lilley menceritakan suara sebagai hasilnya. Pada saat itu, Brams menunjukkan bagaimana kami bisa menyalin secara wajar light-dark() Fitur dengan fungsionalitas CSS khusus:

:root {
  /* ensures light mode comes first */
  --scheme: light;

  /* dark mode is set here */
  @media (prefers-color-scheme: dark) {
    --scheme: dark;
  }
}

/* custom function returns any two values depending on whether system is in light or dark mode */
@function --light-dark(--light-color, --dark-color) {
  result: if(style(--scheme: dark): var(--dark-color) ; else: var(--light-color));
}

p {
  font-size: --light-dark(
    2rem,
    2.5rem
  ); /* returns 2rem if system is in light mode and 2.5rem if system is in dark mode */
}

Tidak ada batu! Satu -satunya hal yang kami tahu adalah bahwa kami memiliki pekerjaan light-dark() Fungsi dan garis dasarnya banyak digunakan. Fitur kustomisasi sedang berlangsung dan hanya tersedia di browser berbasis krom ketika saya sedang menulis ini.

Jalan ke depan

Saya telah menjelajahi segala sesuatu yang berkaitan dengan warna untuk sementara waktu dan saya bertanya -tanya apa yang Anda pikirkan: apakah Anda bersemangat tentang perubahan yang akan terjadi light-dark()? Apakah Anda ingin? light-dark() Haruskah lebih banyak mode warna didukung, seperti kontras tinggi?

Beri tahu saya pendapat Anda di bagian komentar di bawah ini. Jangan ragu untuk mengomentari utas komentar W3C GitHub apa pun yang ditautkan dalam artikel ini untuk membagikan pemikiran dan kekhawatiran Anda tentang fitur -fitur baru yang akan datang.

Lagi light-dark()