Light-dark() ile CSS renk şemasına bağlı renkler

Sistem renkleri, kullanılan mevcut color-scheme değerine tepki verebilir. light-dark() işlevi, aynı özelliği yazarlara sunar.

Bramus

CSS'deki Sistem Renkleri

CSS'de çok sayıda renk alanının birinden birçok renk kullanabilirsiniz. Örneğin, adlandırılmış renkler, onaltılık renkler, belirli bir renk alanına bağlı renk işlevleri ve daha genel olan color() işlevini kullanabilirsiniz.

Örneğin, cornflowerblue olarak adlandırılan renk #6495ED, hsl(218.54deg 79.19% 66.08%) ya da color(display-p3 0.43 0.58 0.9) olarak da temsil edilebilir.

Bu çeşitli ad ve biçimlerin yanı sıra CSS, CSS Renk Modülü Düzey 4'te belirtilen sistem renkleri olarak açıklanan renkleri içerir. Bu sistem renkleri, tarayıcı tarafından tanımlanan renklerdir ve bir anahtar kelimeyle temsil edilir.

Örneğin, <canvas> öğesiyle karıştırılmaması gereken sistem rengi (Canvas) "uygulama içeriğinin veya dokümanların arka planını" temsil eder. "Uygulama içeriğindeki veya belgelerindeki metin"i temsil eden CanvasText ile hoş bir şekilde eşleşir ve onunla birlikte de kullanılması amaçlanmıştır.

CSS'de ise, bunları şu şekilde kullanırsınız:

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

Varsayılan olarak, CanvasText değeri black değerine yakın bir renk elde edilir. Canvas, white değerine yakın bir renktir. Asıl uygulama tarayıcıya bağlıdır. Örneğin, Chrome'da CanvasText parametresi #121212 ile sonuçlanırken Safari, biraz daha açık renkli #1e1e1e olarak belirtilmiştir.

Bu sistem renklerinin gizli bir gücü, color-scheme özelliğinin hesaplanan değerine yanıt verebilmeleridir. Örneğin, kullanılan color-scheme dark olduğunda CanvasText ve Canvas değerleri ters çevrilir.

:root {
  color-scheme: dark;
}

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

Aşağıdaki demoda, :root üzerinde ayarlanan color-scheme değerini değiştirebilir ve sayfanın nasıl tepki verdiğini görebilirsiniz.

• light dark olarak ayarlandığında ise öğenin hem açık hem de koyu modu desteklediğini belirtir. Hangi değerin kullanılacağı, prefers-color-scheme medya koşulunun değerine bağlıdır.
• light olarak ayarlandığında öğenin açık renk şemasını desteklediğini belirtir.
• dark olarak ayarlandığında öğenin koyu renk şemasını desteklediğini belirtir.

light-dark() ile tanışın

Şimdiye kadar, kullanılan color-scheme değerine tepki vermek için sistem renkleri kullanılıyordu. CSS Renk Modülü Düzey 5'te belirtilen light-dark() sayesinde artık aynı özelliklerden yararlanabilirsiniz.

light-dark(), her ikisi de <color> olması gereken iki bağımsız değişkeni kabul eden bir işlevdir. Kullanılan renk şemasına bağlı olarak her ikisinden biri seçilir.

• Kullanılan renk şeması light ise veya bilinmiyorsa ilk değerin hesaplanan değeri döndürülür.
• Kullanılan renk şeması dark ise ikinci rengin hesaplanan değeri döndürülür.

light-dark() işlevinin sonucu <color> olur. <color> değerinin kabul edildiği her yerde CSS'de kullanılabilir. Örneğin, color ve background-color özelliklerinde, ancak linear-gradient() gibi bir işlevde.

Aşağıdaki örnekte arka plan rengi, koyu modda #333 veya açık modda (ya da bilinmeyen modda) #ccc kullanılmıştır.

:root {
  color-scheme: light dark;
}

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

light-dark() öğesinin düzgün çalışması için bir color-scheme belirtmeniz gerektiğini unutmayın. Bu özellik devralındığı için genellikle :root ürününde ayarlanır, ancak isterseniz belirli bir öğede ayarlamayı seçebilirsiniz.

Pratik uygulama

Aşağıdaki örnekte birkaç özel özellik sayfadaki renkleri temsil etmektedir. Koyu moda uyum sağlamak için prefers-color-scheme medya koşulunda bu özel özelliklerin değerlerinin üzerine farklı bir değer yazılır.

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

light-dark() sayesinde bu kod basitleştirilebilir. color-scheme, :root işletim sisteminde light dark olarak ayarlandığından, işletim sisteminizi açık moddan koyu moda geçirirken bu renklerin değerleri otomatik olarak değişir (veya tam tersi).

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Ayrıca, color-scheme değerini dark veya light olarak ayarlayarak DOM'un belirli bir alt ağacını yalnızca açık veya koyu modu kullanmaya zorlamak mümkündür. Aşağıdaki örnekte bu, :root için geçerlidir.