Otomatik Koyu Tema

André Cipriani Bandarra

Chrome 96, Android'de Otomatik Koyu Temalar için kaynak denemesi sunar. Bu özellik sayesinde tarayıcı, kullanıcının işletim sisteminde koyu temaları etkinleştirdiği açık temalı sitelere otomatik olarak oluşturulmuş 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, 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

DevTools'da 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 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 tema uygulayın 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 Mod'da olup olmadığını algılamak için background-color özelliğini canvas olarak, renk şemasını ise açık olarak ayarlanmış 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

Daha fazla 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 temayı 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.

Ancak kendi koyu temanızı uygulamanın mümkün olmadığı ve Otomatik Koyu Tema'nın oluşturduğu 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 devre dışı bırakma

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;
}

:root öğesinde renk şemasını ayarlayarak sayfanın tamamını otomatik koyu temadan hariç tutmak için bu yaklaşımı kullanmaya devam edebilirsiniz:

:root {
  color-scheme: only light;
}

Görüşlerinizi bildirin

Otomatik koyu tema özelliği henüz tam olarak belirlenmemiştir. Bu özelliğin uygulamayla ilgili tüm alanlarından (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.