Otomatik Koyu Tema

André Cipriani Bandarra

Chrome 96, Android'de Otomatik Koyu Temalar için bir kaynak denemesi sunar. Bu özellik sayesinde tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde açık temalı sitelere otomatik olarak oluşturulan bir koyu tema uygular. Kullanıcılar, işletim sistemi düzeyinde veya Chrome'daki belirli bir ayarda seçeneği devre dışı bırakarak koyu temaları devre dışı bırakabilir.

Kaynak denemesine kaydolma

Ayrıca, kaynak denemesi aracılığıyla kullanıcılarınız için koyulaştırma algoritmasını etkinleştirebilirsiniz. Bu sayede, otomatik koyu temanın TPG'leriniz açısından nasıl performans gösterdiğini test edebilirsiniz.

Kaynak denemesi oluşturma hakkında bilgi edinmek için belgelere göz atın, ardından jeton almak için AutoDarkMode kaynak denemesine kaydolun.

Cihazınızda otomatik koyu temayı test etme

Geliştirici Araçları ile

Geliştirici Araçları'nda Otomatik Koyu Tema'yı etkinleştirmek için:

  1. Üç nokta menüsünü tıklayın.
  2. Diğer Araçlar'ı ve ardından Oluşturma'yı seçin.
  3. Otomatik koyu modu taklit et seçeneğinde Etkinleştir'i belirleyin.

Android telefonda

Android telefonunuzda Otomatik Koyu Tema'yı test etmek için:

  1. chrome://flags sayfasına gidin ve #darken-websites-checkbox-in-theme-setting denemesini etkinleştirin.
  2. Ardından üç nokta menüsüne dokunun, Ayarlar'ı ve ardından Tema'yı seçin ve Mümkün olduğunda sitelere koyu tema uygula kutusunu işaretleyin.

Artık açık renkli sayfalar telefonda koyulaştırılacak.

Öğe bazında özelleştirme

Otomatik Koyu Tema'nın her durumda iyi sonuçlar vermesini amaçlasak da geliştiricilerle yaptığımız ilk görüşmelerde, istedikleri görünüm ve hisse daha iyi uyum sağlamak için belirli öğelerde değişiklik yapmak istediklerini belirttiler.

Bu kaynak denemesinde, kullanıcının otomatik koyu temada olup olmadığını algılamak için JavaScript kullanılarak ve ardından istenen öğeler özelleştirilerek bu özelleştirmeler yapılabilir.

Otomatik koyu tema algılanıyor

Kullanıcının Otomatik Koyu Tema'da olup olmadığını tespit etmek için background-color, canvas olarak ve renk şeması açık olarak ayarlanmış bir öğe oluşturun. Arka plan için hesaplanan renk beyaz (rgb(255, 255, 255)) dışında bir renkse sayfaya otomatik koyu tema uygulanır.

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: light"
/div

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

Çok sayıda öğeyi özelleştirme

Daha fazla sayıda öğeyi özelleştirmeniz gerekiyorsa yukarıdaki çözümün ölçeklendirilmesi zor olabilir. Alternatif olarak, sayfanın gövdesine bir işaretçi sınıfı eklemek için otomatik koyu tema algılama özelliğini kullanabilirsiniz:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

Ardından, öğeleri gerektiği gibi özelleştirmek için CSS'yi kullanın:

.auto-dark-theme > #my-element {
  border-color: red;
}

Öğe bazında özelleştirme API'si henüz geliştirme aşamasındadır. Geliştiricilere kapsam dışında kalmayı seçmek için daha açıklayıcı bir API sunmak üzere standartlar ekipleriyle birlikte çalışıyoruz. Sohbeti bu GitHub sorunundan takip edebilirsiniz.

Otomatik koyu temayı devre dışı bırakma

Koyu temalar, kullanıcının cihazındaki tercihine saygı duymanın yanı sıra pil ömrünü uzatma ve erişilebilirlik gibi avantajlar da sunar. Otomatik koyu temayı devre dışı bırakmak yerine, kullanıcının tercihine saygı duymak ve bu avantajlardan yararlanmak için kendi seçtiğiniz koyu temayı uygulamanızı önemle tavsiye ederiz.

Ancak kendi koyu temanızı uygulamanız mümkün değilse ve Otomatik Koyu Tema tarafından oluşturulan sonuç tatmin edici değilse bu özelliği devre dışı bırakabilirsiniz.

Meta etiket kullanma

Otomatik koyu temayı devre dışı bırakmanın ilk alternatifi, sayfanızın başlığına aşağıdaki meta etiketi eklemektir. Meta etiketi kullanmanın avantajı, Otomatik Koyu Tema'nın uygulanmasını tamamen engellemesidir. Bu da "koyulaştırılmış içeriğin yanıp sönmesine" neden olabilir.

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Öğe başına kapsam dışında kalmayı seçme

Kapsam dışında kalmak için ikinci bir alternatif, color-scheme CSS özelliğinin değerini only light olarak ayarlamaktır. Öğe bazında kapsam dışında kalmayı seçme, sayfanın tamamını Otomatik Koyu Modu'ndan çıkarmak için kullanılabilse de bu yaklaşımın avantajı, sayfanın yalnızca belirli bölümlerinin kapsam dışında kalmayı seçmesine olanak tanımasıdır:

#my-element {
  color-scheme: only light;
}

:root öğesinde renk şemasını ayarlayarak sayfanın tamamının Otomatik Koyu Tema'nın kapsamı dışında kalmasını sağlamak için bu yaklaşımı kullanmak hala mümkündür:

:root {
  color-scheme: only light;
}

Görüşlerinizi bildirin

Otomatik koyu tema hâlâ belirtiliyor. Karartma algoritmasının sonuçlarından, öğe özelleştirme ve kapsamı dışında kalmayı seçmek için geliştirici API'lerine kadar uygulamanın tüm alanlarıyla ilgili geri bildirimlerinizi bekliyoruz.

Geri bildiriminizi bize gönderebileceğiniz birçok kanal vardır:

Fotoğraf: Félix Besombes.