Otomatik Koyu Tema

André Cipriani Bandarra

Chrome 96'da, Android'de Auto Koyu Temalar için kaynak deneme sürümü kullanıma sunuldu. Bu özellik sayesinde tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirdiğinde, açık tema içeren sitelere otomatik olarak oluşturulan koyu bir temayı uygular. Kullanıcılar, koyu temayı işletim sistemi düzeyinde veya Chrome'daki belirli bir ayarda devre dışı bırakarak bu özelliği devre dışı bırakabilir.

Kaynak denemesine kaydolma

Kaynak denemesi aracılığıyla kullanıcılarınız için karartma algoritmasını da etkinleştirebilirsiniz. Bu, Otomatik Koyu Tema'nın TPG'lerinize göre nasıl performans gösterdiğini test etmenize olanak tanır.

Kaynak denemesinin nasıl ayarlanacağını öğrenmek için belgeleri inceleyin, ardından jeton almak için AutoDarkMode kaynak denemesine kaydolun.

Otomatik Koyu Tema özelliğini cihazınızda 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 emüle et seçeneğinde Etkinleştir'i seçin.

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 dokunup Ayarlar'ı ve Tema'yı seçip Mümkün olduğunda sitelere koyu tema uygula seçeneğinin yanındaki kutuyu işaretleyin.

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

Öğe bazında özelleştirme

Otomatik Koyu Tema'nın her durumda iyi sonuçlar üretmesini hedeflesek de, geliştiricilerle yaptığımız ilk görüşmelerde, istedikleri görünüm ve tarza daha iyi uyum sağlamak için belirli öğelerde ince ayar yapmak istedikleri yönündeydiler.

Bu kaynak denemesinde bu özelleştirmeler, kullanıcının Otomatik Koyu Temada olup olmadığını algılamak için JavaScript kullanılması ve ardından istenen öğelerin özelleştirilmesiyle mümkün olur.

Otomatik Koyu Temayı algılama

Kullanıcının Otomatik Koyu Tema kullanıp kullanmadığını belirlemek için background-color öğesinin canvas, renk şemasının açık olarak ayarlandığı bir öğe oluşturun. Arka plan için hesaplanan renk beyazdan farklıysa (rgb(255, 255, 255)) 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. Sayfanın gövdesine bir işaretçi sınıfı eklemek için Otomatik Koyu Tema algılama özelliğini de 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â erken geliştirme aşamasındadır. Geliştiricilere kapsam dışında kalmayı seçmeleri için daha etkileyici bir API sunmak amacıyla standart ekiplerle çalışıyoruz. Bu GitHub sorunuyla ilgili sohbeti takip edebilirsiniz.

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

Koyu temalar, kullanıcı tercihine saygı göstermenin yanı sıra, pil ömründe iyileşme ve erişilebilirlik gibi avantajlar sağlar. Otomatik Koyu Tema'yı devre dışı bırakmak yerine, kullanıcının tercihine saygı duymak ve bu avantajları korumak için kendi özel koyu temanızı uygulamanızı kesinlikle öneririz.

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

Meta etiket kullanma

Otomatik Koyu Tema özelliğini devre dışı bırakmanın ilk alternatifi, sayfanızın başlığına aşağıdaki meta etiketi eklemektir. Meta etiket kullanmanın avantajı, Otomatik Koyu Tema'nın uygulanmasını hiç engellememesidir. Bu durum, "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ırakmaya yönelik ikinci bir alternatif de color-scheme CSS mülkünün 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 devre dışı bırakmak için kullanılabilir. Ancak bu yaklaşımın bir avantajı, sayfanın yalnızca belirli bölümlerinin devre dışı bırakılmasına olanak vermesidir:

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

:root öğesinde renk şemasını ayarlayarak sayfanın tamamını Otomatik Koyu Tema'dan devre dışı bırakmak için bu yaklaşımı kullanmak yine de mümkündür:

:root {
  color-scheme: only light;
}

Geri bildirim gönderin.

Otomatik Koyu Tema hâlâ belirtilmeye devam ediyor ve karartma algoritmasının sonuçlarından öğe özelleştirme ve devre dışı bırakmaya yönelik geliştirici API'lerine kadar uygulamanın tüm alanlarında geri bildirim bekliyoruz.

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

Fotoğraf: Félix Besombes.