Karardı Ekranlar

Yıllar önce Opera (v12.0 öncesi) internet tarayıcısı ile siteye has özelleştirilmiş stiller yazıp göz yoran light renklerin üzerine yazdırıyordum. Ama artık bu işi yapan bir media query var.

Çok basit anlamda aşağıdaki gibi kullanılabilir.

  @media (prefers-color-scheme: light) {
    /...
  }
  @media (prefers-color-scheme: dark) {
    /....
  }

Biraz daha fonksiyonel bir yapı için :root içine var(–color) şeklinde CSS değişkenlerini kullanarak bir şema oluşturulabilir.

  :root {
    --body-bg: white
    --body-color: black
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --body-bg: black
      --body-color: white
    }
  }

Artık şemada tanımlanan değişkenleri herhangi bir Class‘ın içinde prefers-color-scheme ‘den bağımsız olarak kullanabilirsiniz. Örnek bir yapı için bu sitenin kaynak kodunu inceleyebilirsiniz.

Kaynak: prefers-color-scheme