Otomatik Koyu Tema

André Cipriani Bandarra

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

Kaynak denemesine kaydolma

Ayrıca, bir kaynak denemesi aracılığıyla kullanıcılarınız için karartma algoritmasını da etkinleştirebilirsiniz. Bu sayede, Otomatik Koyu Mod'un TPG'leriniz açısından nasıl performans gösterdiğini test edebilirsiniz.

Kaynak deneme sürümünü nasıl ayarlayacağınızı öğrenmek için dokümanlara göz atın, ardından jeton almak için AutoDarkMode kaynak deneme sürümüne kaydolun.

Cihazınızda Otomatik Koyu Tema'yı 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 mod emülasyonu seçeneğinde Etkinleştir'i seçin.

Android telefonda

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

  1. chrome://flags adresine 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 temaları uygula seçeneğinin kutusunu işaretleyin.

Artık açık renkli sayfalar telefonda karartılacak.

Öğe başına özelleştirme

Otomatik koyu temanın her durumda iyi sonuçlar vermesini amaçlasak da geliştiricilerle yaptığımız ilk görüşmelerde, istedikleri görünüme ve stile daha iyi uyum sağlamak için belirli öğelerde ayar yapmak istediklerini fark ettik.

Bu kaynak denemesinde, kullanıcının Otomatik Karanlık Tema'da olup olmadığını algılamak için JavaScript kullanılarak ve ardından istenen öğeler özelleştirilerek bu özelleştirmeler yapılabilir.

Otomatik koyu temayı algılama

Kullanıcının Otomatik Koyu Tema'da olup olmadığını belirlemek için background-color öğesinin canvas ve renk şemasının açık olarak ayarlandığı bir öğe oluşturun. Arka plan için hesaplanan renk beyaz (rgb(255, 255, 255)) dışındaysa sayfaya Otomatik Koyu Tema uygulanır.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: 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

Çok sayıda öğeyi özelleştirmeniz gerekiyorsa yukarıdaki çözümün ölçeklendirilmesi zor olabilir. Alternatif olarak, sayfanın gövdesine 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 başına özelleştirme API'si henüz geliştirme aşamasının başlarındadır. Geliştiricilere kapsam dışında kalmayla ilgili daha açıklayıcı bir API sunmak için standartlar ekipleriyle birlikte çalışıyoruz. Bu GitHub sorununda sohbeti takip edebilirsiniz.

Otomatik Koyu Tema'yı devre dışı bırakma

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

Bununla birlikte, kendi koyu temanızı uygulamanın mümkün olmadığı ve Otomatik Koyu Tema tarafından üretilen sonucun tatmin edici olmadığı durumlarda, bu özelliği devre dışı bırakabilirsiniz.

Meta etiket kullanma

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

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Öğe başına kapsam dışında kalma

Devre dışı bırakmayla ilgili ikinci bir alternatif, color-scheme CSS özelliğinin değerini only light olarak ayarlamaktır. Öğe başına devre dışı bırakma seçeneği, sayfanın tamamını Otomatik Koyu Mod'dan hariç tutmak için kullanılabilir olsa da bu yaklaşımın bir avantajı, yalnızca sayfanın belirli bölümlerinin devre dışı bırakılmasına izin vermesidir:

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

Bu yaklaşımı, :root öğesinde renk şemasını ayarlayarak tüm sayfada Otomatik Koyu Tema özelliğini devre dışı bırakmak için de kullanabilirsiniz:

:root {
  color-scheme: only light;
}

Görüşlerinizi bildirin

Otomatik koyu tema özelliği henüz tam olarak belirlenmemiştir. Bu özelliğin uygulanmasıyla ilgili tüm alanlarda (koyulaştırma algoritmasının sonuçlarından öğe özelleştirme ve kapsam dışında kalma için geliştirici API'lerine kadar) geri bildirim almak istiyoruz.

Bize geri bildirim gönderebileceğiniz birçok kanal vardır:

Fotoğraf: Félix Besombes.