Warna dependen warna skema CSS dengan terang-dark()

Warna sistem memiliki kemampuan untuk bereaksi terhadap nilai color-scheme yang digunakan saat ini. Fungsi light-dark() mengekspos kemampuan yang sama kepada penulis.

Bramus

Warna Sistem di CSS

Di CSS, Anda dapat menggunakan banyak warna dari salah satu banyak ruang warna. Misalnya, Anda dapat menggunakan warna bernama, warna heksadesimal, fungsi warna yang ditautkan ke ruang warna tertentu, dan fungsi color() yang lebih generik.

Misalnya, warna yang dinamai cornflowerblue juga dapat direpresentasikan sebagai #6495ED, atau hsl(218.54deg 79.19% 66.08%), atau color(display-p3 0.43 0.58 0.9).

Selain berbagai nama dan format ini, CSS menyertakan warna yang dijelaskan sebagai warna sistem, yang ditetapkan dalam CSS Color Module Level 4. Warna sistem ini adalah warna yang didefinisikan oleh browser dan diwakili oleh kata kunci.

Misalnya, warna sistem Canvas–tidak sama dengan elemen <canvas>–mewakili "latar belakang konten atau dokumen aplikasi". Kode ini cocok dengan, dan juga dimaksudkan untuk digunakan bersama, CanvasText yang mewakili "teks dalam konten aplikasi atau dokumen".

Di CSS, Anda menggunakannya sebagai berikut:

body {
  color: CanvasText;
  background-color: Canvas;
}

Secara default, CanvasText menghasilkan warna yang mirip dengan black dan Canvas adalah warna yang mendekati white. Implementasi sebenarnya bergantung pada browser. Misalnya, CanvasText di Chrome menghasilkan #121212, sedangkan Safari menetapkannya sebagai #1e1e1e yang sedikit lebih ringan.

Kekuatan tersembunyi dari warna sistem ini adalah bahwa warna tersebut dapat merespons nilai yang dihitung dari properti color-scheme. Misalnya, nilai untuk CanvasText dan Canvas dibalik saat color-scheme yang digunakan adalah dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

Pada demo berikut, Anda dapat mengubah nilai color-scheme yang ditetapkan pada :root dan melihat respons halaman.

  • Jika ditetapkan ke light dark, ini menunjukkan bahwa elemen mendukung mode terang dan gelap. Pilihan nilai yang akan digunakan bergantung pada nilai kondisi media prefers-color-scheme.
  • Jika ditetapkan ke light, status ini menunjukkan bahwa elemen mendukung skema warna terang.
  • Jika ditetapkan ke dark, status ini menunjukkan bahwa elemen mendukung skema warna gelap.
Halaman yang memungkinkan Anda mengubah nilai color-scheme. Setelah berubah, warna halaman akan berubah saat beralih dari terang ke gelap atau sebaliknya, meskipun deklarasi pada elemen isi tetap sama.

Memperkenalkan light-dark()

Dukungan Browser

  • 123
  • x
  • 120
  • x

Sumber

Hingga saat ini, reaksi terhadap nilai color-scheme yang digunakan adalah sesuatu yang dicadangkan untuk warna sistem. Berkat light-dark(), yang ditentukan dalam CSS Color Module Level 5, Anda kini juga memiliki kemampuan yang sama.

light-dark() adalah fungsi yang menerima dua argumen, keduanya harus berupa <color>. Salah satu dari keduanya dipilih bergantung pada skema warna yang digunakan.

  • Jika skema warna yang digunakan adalah light atau tidak diketahui, nilai yang dihitung dari nilai pertama akan ditampilkan.
  • Jika skema warna yang digunakan adalah dark, nilai yang dihitung dari warna kedua akan ditampilkan.

Hasil light-dark() adalah <color>. Dapat digunakan di CSS di semua tempat yang menerima <color>. Contohnya di properti color dan background-color, tetapi juga dalam fungsi seperti linear-gradient().

Pada contoh berikut, warna latar belakang yang digunakan adalah #333 dalam mode gelap, atau #ccc dalam mode terang (atau mode tidak diketahui).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Perhatikan bahwa agar light-dark() berfungsi dengan benar, Anda perlu menentukan color-scheme. Karena properti tersebut diwariskan, Anda biasanya menetapkannya di :root, tetapi jika ingin, Anda dapat memilih untuk menyetelnya pada elemen tertentu.

Penerapan praktis

Pada contoh berikut, beberapa properti khusus merepresentasikan warna pada halaman. Untuk mengakomodasi mode gelap, nilai properti kustom tersebut akan ditimpa oleh nilai yang berbeda dalam kondisi media prefers-color-scheme.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}
Halaman yang merespons mode terang atau gelap melalui prefers-color-scheme.
Nilai warna diubah di CSS menggunakan kueri media.

Berkat light-dark(), kode ini dapat disederhanakan. Karena color-scheme disetel ke light dark di :root, nilai warna ini otomatis berubah saat mengubah OS dari mode terang ke mode gelap dan sebaliknya.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}
Halaman yang merespons mode terang atau gelap menggunakan prefers-color-scheme.
Nilai warna diubah menggunakan light-dark().

Sebagai bonus tambahan, Anda dapat memaksa subhierarki DOM tertentu untuk hanya menggunakan mode terang atau gelap dengan menyetel color-scheme ke dark atau light. Di contoh berikut, ini diterapkan ke :root.

Halaman yang merespons mode terang atau gelap menggunakan prefers-color-scheme.
Nilai warna diubah menggunakan light-dark().
Dengan salah satu opsi, Anda dapat memaksa mode terang atau gelap. Hal ini dilakukan dengan memanipulasi nilai color-scheme.