Otomatik Koyu Tema

André Cipriani Bandarra

Chrome 96, Android'de Otomatik Koyu Temalar için bir kaynak deneme sürümü sunuyor. Bu özellik sayesinde tarayıcı, açık temalı sitelere otomatik olarak oluşturulmuş koyu temayı uygular. Kullanıcı, işletim sisteminde koyu temayı etkinleştirdiğinde. 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 deneme sürümüne kaydolma

Ayrıca, bir kaynak denemesi aracılığıyla kullanıcılarınız için karartma algoritmasını etkinleştirebilirsiniz. Bu sayede Otomatik Koyu Tema'nın TPG'lerinize kıyasla nasıl performans gösterdiğini test edebilirsiniz.

Ayrıntılı bilgi edinmek için kaynak denemesi oluşturma ardından AutoDarkMode kaynak denemesine kaydolun bir jeton almak için.

Otomatik koyu temayı cihazınızda test edin

Geliştirici Araçları Dahil

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'ı, 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 koyulaştırılacaktır.

Öğe başına özelleştirme

Otomatik Koyu Tema'nın her durumda iyi sonuçlar üretmesini hedeflesek de geliştiricilerle ilk yapılan konuşmalar, belirli öğelerde bazı değişiklikler yapmak istediklerini, ve tarza daha iyi uyum sağlayabilirler.

Bu kaynak denemesinde kullanıcının Otomatik Koyu Tema özelliğini kullanıp kullanmadığını belirlemek için JavaScript kullanılarak ve ardından istenen öğeler özelleştirilerek mümkün hale getirilebilir.

Otomatik Koyu Tema Algılanıyor

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 dışındaysa (rgb(255, 255, 255)), sonra 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 kullanın:

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

Öğe başına özelleştirme API'si hâlâ geliştirme aşamasındadır. Geliştiricilere kapsam dışında kalma seçeneği için daha etkili bir API sağlamak amacıyla standart ekipleriyle çalışıyoruz. Bu GitHub sorunuyla ilgili görüşmeyi takip edebilirsiniz.

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

Kullanıcının cihazında seçimine saygı göstermenin yanı sıra, koyu temalar, kullanıcılara pil ömrünü uzatma ve erişilebilirlik gibi avantajlar sunar. Otomatik koyu temayı devre dışı bırakmak yerine Bunun yerine kendi özel koyu temanızı uygulamanızı öneririz. kullanıcının tercihine saygı duymak ve bu avantajları korumaktır.

Ancak kendi koyu temanızı uygulamanın uygun olmadığı durumlarda, Otomatik Koyu Tema ile oluşturulan sonuç tatmin edici değilse bu özelliği devre dışı bırakabilir,

Meta etiket kullanma

Otomatik Koyu Tema'yı devre dışı bırakmanın ilk alternatifi, aşağıdaki meta etiketi sayfanızın başlığına eklemektir. Meta etiketi kullanmanın avantajı, Otomatik Koyu Tema'nın uygulanmasını tamamen engellemesidir. "koyu renkli 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ırakmanın ikinci bir alternatifi, color-scheme değerini ayarlamaktır. CSS mülkünü only light olarak ayarlayın. Tüm sayfayı Otomatik Koyu Mod'da devre dışı bırakmak için öğe bazında devre dışı bırakma kullanılabilir ancak Bu yaklaşımın avantajlarından biri, sayfanın yalnızca belirli bölümlerinin devre dışı bırakılmasına olanak sağlamasıdır:

#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 hâlâ belirtiliyor. ve uygulamanın tüm alanları hakkında geri bildirim istiyoruz: öğe özelleştirme ve devre dışı bırakma için geliştirici API'lerine kadar, karartma algoritmasının sonuçlarından

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

Fotoğraf: Félix Besombes.