Muhtemelen medya sorgularını zaten biliyorsunuzdur. Web sitelerini duyarlı hale getirmek için yaygın olarak kullanılıyorlar. widthVe heightözellikler, görünüm boyutları içerir. Daha sonra farklı mizanpajları farklı boyutlarda oluşturmak için CSS'yi kullanırsınız.

Tercih renkli-düzeni medya sorgusu aynı şekilde çalışır. Kullanıcı, işletim sistemini açık veya koyu bir tema kullanacak şekilde yapılandırabilir. Prefers-color-schemebu değeri içerir. Değer ya lightveya şeklindedir dark, ancak W3C spesifikasyonu bunun gibi gelecekteki değerleri destekleyebileceğini belirtir sepia. Her iki mod için de farklı CSS değişken değerleri belirliyorum ve kullanıcının işletim sisteminin karar vermesine izin veriyorum.

Tercih edilen renk şeması medya sorguları

prefers-color-schemeMedya sorgusunun iki varyasyonu şunlardır:

/* Light mode */
@media ( tercih edilen-color-scheme : light ) {
   : root {
       --body-bg : #FFFFFF ;
       --vücut rengi : #000000 ;
   }
}

/* Karanlık mod */
@media ( -color-scheme'i tercih eder : dark ) {
   : root {
       --body-bg : #000000 ;
       --vücut rengi : #FFFFFF ;
   }
}

Yukarıdaki CSS olarak, --body-bgve --body-colorvardır CSS değişkenleri .Gördüğünüz gibi, her iki mod için de farklı değerler içeriyorlar. Açık temada, siyah metinli beyaz bir arka plan ayarlıyorum. Karanlık temada, beyaz metinli siyah arka plan ayarlıyorum.

Yana  Spec W3C gelecekteki değerleri tanıtmak olabileceğini söylüyor, bu boolean içine bu CSS dönüştürmek için mantıklı.

/* Işık modu */
: kök {
   --body-bg : #FFFFFF ;
   --vücut rengi : #000000 ;
}

/* Karanlık mod */
@media ( -color-scheme'i tercih eder : dark ) {
   : root {
       --body-bg : #000000 ;
       --vücut rengi : #FFFFFF ;
   }
}

Yukarıdaki kodda, varsayılan olarak bir açık tema tanımlıyorum ve medya sorgusu ise koyu temaya dönüştürüyorum dark. Bu şekilde, medya sorgusuna gelecekte eklenecek tüm değerler, varsayılan olarak ışık temasını ayarlayacaktır.

CSS değişkenlerini kullanma

Artık farklı temalar için farklı değerlere sahip olduğum için, onları gerçekten sayfaya stil vermek için kullanmam gerekiyor.

gövde {
   arka plan: var(--body-bg);
   renk: var(--vücut rengi);
}

Var ()söz dizimi CSS değişkenleri kullanır nasıl. Yukarıdaki kodda, set söylüyorum backgrounddeğerine --body-bg ve set colordeğerine --body-color. Bu değişkenlerin değerlerinin medya sorgusundan geldiğini unutmayın. Bu, işletim sisteminin ayarına bağlı olarak arka plan ve ön plan renginin değiştiği anlamına gelir! 

Medya sorgusunun gerçek gücü budur: İşletim sisteminden web sayfasına tutarlı bir kullanıcı deneyimi sağlamak.

prefers-color-schemeKullanmanın normal bir programlama dili kullanmaktan farklı olmadığına dikkat edin . Değerleri bir mantığa göre değişen değişkenler tanımlarım. Ve bu değişkenler daha sonra başka işlemler için kullanılır.

Web sitenizin kullanıcının seçtiği temaya uyum sağlamasına olanak tanımak harika bir erişilebilirlik özelliğidir. Ayrıca, kullanıcının yararına masaüstü ve web arasındaki çizgiyi daha da bulanıklaştırır. En son tarayıcı sürümleri tercihler -renk şemasını destekler, böylece bugün denemeye başlayabilirsiniz.