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, fungsi color() yang lebih umum.

Misalnya, warna bernama 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 ditentukan dalam CSS Color Module Level 4. Warna sistem ini adalah warna yang ditentukan oleh browser dan diwakili oleh kata kunci.

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

Di CSS, Anda menggunakannya sebagai berikut:

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

Secara default, CanvasText menghasilkan warna yang mendekati black dan Canvas adalah warna yang mendekati white. Penerapan yang sebenarnya bergantung pada browser. Misalnya, CanvasText di Chrome menghasilkan #121212, sedangkan Safari menentukannya sebagai #1e1e1e yang sedikit lebih terang.

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

:root {
  color-scheme: dark;
}

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

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

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

Memperkenalkan light-dark()

Dukungan Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Sumber

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

light-dark() adalah fungsi yang menerima dua argumen, yang 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 warna kedua yang dihitung akan ditampilkan.

Hasil light-dark() adalah <color>. Ini dapat digunakan di CSS di mana pun <color> diterima. Misalnya, dalam 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 yang tidak diketahui).

:root {
  color-scheme: light dark;
}

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

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

Penerapan praktis

Dalam contoh berikut, beberapa properti kustom mewakili warna di halaman. Untuk memenuhi 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 akan otomatis berubah saat mengubah OS dari mode terang ke 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 sub-pohon DOM tertentu untuk hanya menggunakan mode terang atau gelap dengan menetapkan color-scheme ke dark atau light. Pada contoh berikut, hal ini diterapkan ke :root.

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