# HTML'de Görseli Koyu/Açık Moda Göre Ayarlamak

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:

```javascript
<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 :)