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

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

Bramus

CSS'deki Sistem Renkleri

CSS'de birçok renk alanından birçok renk kullanabilirsiniz. Örneğin, adlandırılmış renkleri, onaltılık renkleri, belirli bir renk alanına bağlı renk işlevlerini ve daha genel color() işlevini kullanabilirsiniz.

Örneğin, cornflowerblue adlı renk #6495ED, hsl(218.54deg 79.19% 66.08%) veya color(display-p3 0.43 0.58 0.9) olarak da gösterilebilir.

CSS, bu çeşitli ad ve biçimlere ek olarak CSS Renk Modülü 4. Seviye'de belirtilen sistem renkleri olarak tanımlanan renkleri de içerir. Bu sistem renkleri, tarayıcı tarafından tanımlanan ve bir anahtar kelimeyle temsil edilen renklerdir.

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

CSS'de bunları aşağıdaki gibi kullanırsınız:

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

Varsayılan olarak, CanvasText black yakın bir renk sağlar ve Canvas, white yakın bir renktir. Gerçek uygulama, tarayıcıya bağlıdır. Örneğin, Chrome'da CanvasText #121212 olarak görünürken Safari'de biraz daha açık #1e1e1e olarak görünür.

Bu sistem renklerinin gizli bir gücü, color-scheme mülkünün hesaplanmış değerine yanıt verebilmeleridir. Örneğin, kullanılan color-scheme değeri dark olduğunda CanvasText ve Canvas değerlerinin yerleri değişir.

: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 yanıt verdiğini görebilirsiniz.

• light dark olarak ayarlandığında, öğenin hem açık hem de koyu modu desteklediğini belirtir. Kullanılan değerin seçimi, prefers-color-scheme medya durumunun 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

Kullanılan color-scheme değerine tepki verme özelliği şimdiye kadar sistem renkleri için ayrılmıştı. CSS Renk Modülü 5. Seviye'de belirtilen light-dark() sayesinde artık aynı özelliğe sahipsiniz.

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 ikisinden biri seçilir.

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

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

Aşağıdaki örnekte, koyu modda #333, açık modda (veya bilinmeyen bir modda) #ccc arka plan rengi 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 öğesinde ayarlanır ancak dilerseniz belirli bir öğede ayarlayabilirsiniz.

Pratik uygulama

Aşağıdaki örnekte, birkaç özel özellik sayfadaki renkleri temsil etmektedir. Koyu modu desteklemek için bu özel mülklerin değerlerinin üzerine prefers-color-scheme medya koşulunda 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'de light dark olarak ayarlandığından işletim sisteminizin açık moddan koyu moda veya tam tersi şekilde değiştirilmesi durumunda bu renklerin değerleri otomatik olarak değişir.

: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 öğesini dark veya light değerine ayarlayarak DOM'nin belirli bir alt ağacını yalnızca açık veya koyu modu kullanmaya zorlayabilirsiniz. Aşağıdaki örnekte bu, :root için uygulanmaktadır.