Warna dependen warna skema CSS dengan terang-dark()

Warna sistem memiliki kemampuan untuk bereaksi terhadap nilai color-scheme yang saat ini digunakan. 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 dideskripsikan sebagai warna sistem, yang ditentukan dalam Modul Warna CSS Level 4. Warna sistem ini adalah warna yang ditentukan oleh browser dan diwakili oleh kata kunci.

Misalnya, warna sistem Canvas–jangan tertukar dengan elemen <canvas>–mewakili "latar belakang konten atau dokumen aplikasi". Kategori ini cocok 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. Implementasi 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 kemampuannya untuk merespons nilai yang dihitung dari properti color-scheme. Misalnya, nilai untuk CanvasText dan Canvas akan dibalik jika 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, hal 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.

Memperkenalkan light-dark()

Hingga saat ini, bereaksi terhadap nilai color-scheme yang digunakan adalah sesuatu yang dikhususkan untuk warna sistem. Berkat light-dark(), yang ditentukan dalam 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 yang dihitung dari warna kedua akan ditampilkan.

Hasil dari light-dark() adalah <color>. Fungsi ini dapat digunakan di CSS di mana pun <color> diterima. Misalnya, di properti color dan background-color, tetapi juga dalam fungsi seperti linear-gradient().

Dalam 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 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;
  }
}

Berkat light-dark(), kode ini dapat disederhanakan. Karena color-scheme ditetapkan ke light dark di :root, nilai warna ini 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);
}

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