Warna sistem memiliki kemampuan untuk bereaksi terhadap nilai color-scheme
yang digunakan saat ini. Fungsi light-dark()
mengekspos kemampuan yang sama kepada penulis.
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 berpasangan baik dengan, dan juga dimaksudkan untuk digunakan bersama dengan, 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 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
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
, nilai ini akan menunjukkan bahwa elemen mendukung mode terang dan gelap. Pilihan nilai yang digunakan bergantung pada nilai kondisi mediaprefers-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 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()
.
Dalam 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 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;
}
}
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);
}
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
. Dalam contoh berikut, hal ini diterapkan ke :root
.