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, yazarlara aynı özelliği sunar.

Bramus

CSS'de 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'a yakın bir renk oluşturur ve Canvas, white'a 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.
color-scheme değerini değiştirmenize olanak tanıyan bir sayfa. Değişiklik yapıldıktan sonra, body öğesindeki bildirimler aynı kalmasına rağmen sayfanın renkleri açıktan koyuya veya tam tersi şekilde değişir.

light-dark() ile tanışın

Tarayıcı desteği

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

Kaynak

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(), iki bağımsız değişkeni kabul eden bir işlevdir. Bu bağımsız değişkenlerin her ikisi de <color> olmalıdır. Kullanılan renk şemasına bağlı olarak bunlardan 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() işlevinin sonucu bir <color> olur. 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 #ccc (veya bilinmeyen bir modda) 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;
  }
}
prefers-color-scheme aracılığıyla açık veya koyu moda yanıt veren bir sayfa.
Renk değerleri, CSS'de medya sorgusu kullanılarak değiştirilir.

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);
}
prefers-color-scheme kullanarak açık veya koyu moda yanıt veren bir sayfa.
light-dark() kullanılarak renk değerleri değiştirilir.

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 zorlayabilirsiniz. Aşağıdaki örnekte bu, :root için uygulanmaktadır.

prefers-color-scheme kullanarak açık veya koyu modu yanıtlayan bir sayfa.
light-dark() kullanılarak renk değerleri değiştirilir.
Seçeneklerden birini kullanarak açık veya koyu modu zorlayabilirsiniz. Bu, color-scheme değeri değiştirilerek yapılır.