Görsellerle ilgili karşılaştığımız en yaygın sorunlardan biri, bir web sayfasındaki görsellerin arka plan renkleriyle uyumlu hale getirilmesidir. Özellikle, web sayfanızda bir karanlık veya açık mod özelliği varsa, görsellerin renkleri de buna göre ayarlanmalıdır. Bu yazıda, CSS'de prefers-color-scheme özelliğini kullanarak görseli koyu/açık moda göre nasıl ayarlayabileceğiniz hakkında bilgi vereceğim.

prefers-color-scheme Özelliği Nedir?

prefers-color-scheme özelliği, kullanıcının cihazının arka plan renginin açık veya karanlık olmasına göre CSS'in nasıl davranacağını belirlemek için kullanılır. Bu özellik, web sayfalarının kullanıcıların tercihlerine uygun olarak görüntülenmesini sağlar.

Görsel Ayarlamak için prefers-color-scheme Özelliğini Kullanmak

Görselleri karanlık veya açık moda uygun hale getirmek için prefers-color-scheme özelliğini kullanabiliriz. Örneğin, aşağıdaki kodda, görselin rengi cihazın arka plan rengine göre ayarlanacaktır:

<div class="image-container">
  <img src="example-image.jpg" alt="Örnek Görsel">
</div>

<style>
  .image-container {
    display: inline-block;
    padding: 20px;
  }
  .image-container img {
    width: 100%;
    height: auto;
  }

  @media (prefers-color-scheme: dark) {
    .image-container {
      background-color: #333;
    }
    .image-container img {
      filter: invert(100%) grayscale(50%);
    }
  }

  @media (prefers-color-scheme: light) {
    .image-container {
      background-color: #fff;
    }
    .image-container img {
      filter: none;
    }
  }
</style>

Yukarıdaki kod, prefers-color-scheme özelliğini kullanarak, karanlık moda geçtiğinde görselin rengini tersine çevirir ve gri tonlama uygular. Açık moda geçildiğinde ise, filtreleri kaldırarak orijinal görüntüyü gösterir.

Bu özellik, sadece görseller için değil, web sayfanızdaki diğer öğeler için de kullanılabilir. Örneğin, metin rengi, arka plan rengi, butonlar gibi birçok öğe prefers-color-scheme özelliği ile uyumlu hale getirilebilir.

Sonuç

prefers-color-scheme özelliği, kullanıcının cihazındaki arka plan rengine uygun olarak geliştirme yapabilecekleri çok kullanışlı bir özelliktir. Bu yazıda, prefers-color-scheme özelliğini kullanarak görselleri koyu/açık moda göre nasıl ayarlayabileceğinizi gösterdim.

Umarım aradığınız bu özelliği hatırlatmayı size tam vaktinde sağlamışımdır :)