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 metin"i temsil eden CanvasText ile güzel bir şekilde eşleşir ve ayrıca bu özellikle birlikte kullanılması gerekir.

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 özelliği, color-scheme özelliğinin hesaplanan 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 gösterir.
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.
  • Kenar: 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 ise veya bilinmiyorsa ilk değerin hesaplanan 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 veya açık modda (veya bilinmeyen modda) #ccc arka plan rengi kullanılmış.

:root {
  color-scheme: light dark;
}

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

light-dark() işlevinin düzgün çalışması için bir color-scheme belirtmeniz gerekir. 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 moda uygun hale getirmek için prefers-color-scheme medya koşulunda farklı bir değer, bu özel özelliklerin değerlerinin üzerine 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 bir medya sorgusu kullanılarak değiştirilir.

light-dark() sayesinde bu kod basitleştirilebilir. color-scheme, :root üzerinde light dark olarak ayarlandığından, işletim sisteminizi açık moddan koyu moda (veya tam tersi) değiştirirken 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 öğ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.

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.