Preferreds-color-scheme: "Merhaba karanlık, eski dostum

Abartılı bir deneyim mi yoksa bir gereklilik mi? Koyu mod ve bu modu kullanıcılarınıza nasıl destekleyebileceğiniz hakkında her şeyi öğrenin.

Giriş

Koyu Mod'dan önce koyu mod

Koyu modu kullanarak tam bir tur attık. Kişisel bilgi işlem hayatının başlangıcında, koyu mod tercih edilmese de kesin olan bir durum söz konusuydu: Tek renkli CRT bilgisayar monitörleri fosforesan bir ekran üzerinde elektron ışınları tetikleyerek çalışıyordu ve ilk CRT'lerde kullanılan fosfor yeşildi. Metin yeşil renkte gösterildiğinden ve ekranın geri kalanı siyah olduğundan bu modellere genellikle yeşil ekran denir.

Ardından kullanıma sunulan Renkli CRT'ler kırmızı, yeşil ve mavi fosforlar kullanılarak birden fazla renk gösteriyordu. Üç fosforun da aynı anda etkinleştirilmesiyle beyaz renk elde edildi. Daha gelişmiş bir WYSIWYG masaüstü yayıncılığın ortaya çıkmasıyla birlikte, sanal bir dokümanı fiziksel bir kağıda benzetme fikri popüler hale geldi.

Bir tasarım trendi olarak koyu-beyaz, tam da bu noktada başladı ve bu trend, belge tabanlı web'in ilk dönemlerine taşındı. İlk tarayıcı olan WorldWideWeb (henüz CSS'nin henüz icat edilmediğini unutmayın), web sayfalarını bu şekilde görüntülemiştir. Eğlenceli bir gerçek: Terminal tabanlı bir tarayıcı olan Satır Modu Tarayıcısı, ikinci tarayıcı olarak karanlıkta yeşil renkteydi. Günümüzde web sayfaları ve web uygulamaları genellikle açık arka plan üzerinde koyu renk metinle tasarlanmakta ve Chrome gibi kullanıcı aracısı stil sayfalarına da sabit bir şekilde kodlanan temel varsayımdır.

CRT günleri çok geride kaldı. İçerik tüketimi ve üretimi artık arkadan aydınlatmalı LCD veya enerji tasarrufu sağlayan AMOLED ekranlar kullanan mobil cihazlara yöneldi. Daha küçük ve daha taşınabilir bilgisayarlar, tabletler ve akıllı telefonlar, yeni kullanım kalıpları yarattı. Web'e göz atma, eğlence için kodlama ve lüks oyunlar gibi boş zaman aktiviteleri genellikle loş ortamlarda mesai bitiminden sonra gerçekleşir. İnsanlar geceleri cihazlarını yataklarında bile keyifle geçiriyor. İnsanlar cihazlarını karanlıkta kullandıkça, açık-koyu özelliğinin köklerine geri dönme fikri de o kadar popüler hale gelir.

Neden koyu mod?

Estetik nedenlerle koyu mod

İnsanlara koyu modu neden istedikleri veya neden istedikleri sorulduğunda en popüler yanıt, "gözü yormayan", ardından "şık ve güzel" oluyor. Apple, Koyu Mod geliştirici belgelerinde bu durumu açıkça şu şekilde ekliyor: "Açık veya koyu görünümün etkinleştirilmesi, çoğu kullanıcı için estetik bir tercih ve ortam aydınlatma koşullarıyla ilgili olmayabilir."

Erişilebilirlik aracı olarak koyu mod

Koyu moda ihtiyaç duyan ve bunu başka bir erişilebilirlik aracı olarak kullanan kullanıcılar da vardır (örneğin, az gören kullanıcılar). Bu tür bir erişilebilirlik aracının en eski örneği, System 7'nin CloseView özelliğini (Beyaz üzerine siyah ve Siyah üzerine beyaz için açma/kapatma düğmesine sahip) içeriyordu. Sistem 7'yi destekleyen renklere rağmen, varsayılan kullanıcı arayüzü hâlâ siyah beyazdı.

Bu ters çevirmeye dayalı uygulamalar, renk kullanıma sunulduktan sonra zayıflıklarını gösterdi. Szpiro et al. tarafından az görme erişimine sahip bilgisayar cihazlarıyla ilgili yapılan kullanıcı araştırması, görüşen tüm kullanıcıların ters çevrilmiş resimleri beğenmediğini, ancak birçoğunun koyu renkli arka plandaki açık renkli metinleri tercih ettiğini göstermiştir. Apple, Akıllı Çevirme adlı bir özellikle bu kullanıcı tercihini yerine getirir. Bu özellik resimler, medyalar ve koyu renk stilleri kullanan bazı uygulamalar hariç, ekrandaki renkleri tersine çevirir.

Az görmenin özel bir biçimi Bilgisayar Görüşü Sendromu, Dijital Göz Yoruğu olarak da bilinir."Bilgisayar (masaüstü, dizüstü bilgisayar ve tabletler dahil) ve diğer elektronik ekranların (ör. akıllı telefonlar ve elektronik okuma cihazları) kullanımıyla ilişkili göz ve görme sorunlarının kombinasyonu" olarak tanımlanır." Elektronik cihazların ergenler tarafından özellikle geceleri kullanılmasının daha kısa uyku süresi, daha uzun uyku başlangıcında gecikme ve daha fazla uyku eksikliği riskine yol açtığı önerilmiştir. Buna ek olarak, mavi ışığa maruz kalmanın sirkadiyen ritmin ve uyku döngüsünün düzenlenmesinde rol aldığı yaygın bir şekilde bildirilmiştir. Rosenfield tarafından yürütülen araştırmaya göre düzensiz ışık ortamları, ruh halini ve görev performansını da etkileyerek uykusuzluğa yol açabilir. Bu olumsuz efektleri sınırlandırmak için iOS'in Gece Hareketi veya Android Gece Işığı gibi özellikler aracılığıyla ekran renk sıcaklığını ayarlayarak mavi ışığı azaltmak, ayrıca koyu temalar ya da koyu modlar aracılığıyla parlak ışıklardan veya genel olarak düzensiz ışıklardan kaçınmak için de işe yarayabilir.

AMOLED ekranlarda koyu mod güç tasarrufu

Son olarak, koyu modun AMOLED ekranlarda çok enerji tasarrufu sağladığı bilinmektedir. YouTube gibi popüler Google uygulamalarına odaklanan Android örnek olayları, güç tasarrufunun %60'a varan oranlarda olabileceğini göstermiştir. Aşağıdaki videoda bu örnek olaylar ve uygulama başına güç tasarrufu hakkında daha ayrıntılı bilgi verilmektedir.

İşletim sisteminde koyu modu etkinleştirme

Koyu modun birçok kullanıcı için neden bu kadar önemli olduğuyla ilgili arka planı ele aldığımıza göre şimdi bu modu nasıl destekleyebileceğinizi gözden geçirelim.

Koyu modu veya koyu temayı destekleyen işletim sistemlerinin genellikle bu özelliği ayarlardan bir yerde etkinleştirme seçeneği vardır. Bu simge, macOS X'te sistem tercihinin Genel bölümünde Görünüm (ekran görüntüsü) olarak adlandırılır. Windows 10'da ise Renkler bölümünde Renk seçin (ekran görüntüsü) olarak adlandırılır. Android Q'da bunu Ekran'ın altında Koyu Tema açma/kapatma anahtarı (ekran görüntüsü) olarak bulabilirsiniz. iOS 13'te ise ayarların Ekran ve Parlaklık bölümünden Görünüm'ü değiştirebilirsiniz (ekran görüntüsü).

prefers-color-scheme medya sorgusu

Başlamadan önce son bir teorim kaldı. Medya sorguları, yazarların oluşturulan dokümandan bağımsız olarak kullanıcı aracısı veya görüntüleme cihazının değerlerini ya da özelliklerini test etmesine ve sorgulamasına olanak tanır. Bunlar, bir dokümana koşullu olarak stil uygulamak için CSS @media kuralında ve HTML ile JavaScript gibi diğer çeşitli bağlam ve dillerde kullanılır. Medya Sorguları Düzey 5, kullanıcı tercihi medya özellikleri olarak adlandırılan bir özelliği kullanıma sunar. Bu, sitelerin içeriği görüntülemek için kullanıcının tercih ettiği yöntemi algılamasının bir yoludur.

prefers-color-scheme medya özelliği, kullanıcının sayfanın açık veya koyu bir renk teması kullanmasını isteyip istemediğini algılamak için kullanılır. Aşağıdaki değerlerle çalışır:

• light: Kullanıcının, açık temaya (açık arka plan üzerinde koyu metin) sahip bir sayfayı tercih ettiğini sisteme bildirdiğini belirtir.
• dark: Kullanıcının, koyu temaya (koyu arka plan üzerinde açık metin) sahip bir sayfayı tercih ettiğini sisteme bildirdiğini belirtir.

Koyu modu destekleme

Tarayıcının koyu modu destekleyip desteklemediğini öğrenme

Koyu mod bir medya sorgusu üzerinden bildirildiğinden, prefers-color-scheme medya sorgusunun eşleşip eşleşmediğini kontrol ederek geçerli tarayıcının koyu modu destekleyip desteklemediğini kolayca kontrol edebilirsiniz. Herhangi bir değeri eklemediğime, ancak yalnızca medya sorgusunun eşleşip eşleşmediğini kontrol ettiğime dikkat edin.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Bu yazının yazıldığı tarihte prefers-color-scheme, hem masaüstü bilgisayarlarda hem de mobil cihazlarda (kullanılabilen yerlerde) Chrome ve Edge tarafından sürüm 76, Firefox sürüm 67 ve Safari, macOS sürüm 12.1 ve iOS'ta sürüm 13 itibarıyla Safari tarafından desteklenmektedir. Diğer tüm tarayıcılar için Destek tablolarını kullanabilir miyim? bölümüne bakabilirsiniz.

İstek zamanında kullanıcı tercihleri hakkında bilgi edinme

Sec-CH-Prefers-Color-Scheme istemci ipucu başlığı, sitelerin istek zamanında isteğe bağlı olarak kullanıcının renk şeması tercihlerini almasına olanak tanır. Böylece sunucuların doğru CSS'yi satır içine alması sağlanır ve böylece yanlış renk temasının yanıp sönmesi önlenir.

Pratikte koyu mod

Şimdi de koyu modu desteklemenin pratikte nasıl göründüğüne bakalım. Highlander'da olduğu gibi, koyu modla yalnızca bir tane olabilir: koyu veya açık iki tema asla olamaz! Neden bundan bahsediyorum? Çünkü bu durum, yükleme stratejisini etkileyecektir. Lütfen kullanıcıları şu anda kullanmadıkları bir mod için kritik oluşturma yolunda CSS indirmeye zorlamayın. Bu nedenle, yükleme hızını optimize etmek amacıyla kritik olmayan CSS'yi ertelemek için uygulamadaki aşağıdaki önerileri gösteren örnek uygulamadaki CSS'mi üç bölüme ayırdım:

• Sitede evrensel olarak kullanılan genel kurallar içeren style.css.
• Yalnızca koyu mod için gereken kuralları içeren dark.css.
• Yalnızca açık mod için gereken kuralları içeren light.css.

Yükleme stratejisi

Son iki seçenek (light.css ve dark.css) koşullu olarak <link media> sorgusu ile yüklenir. Başlangıçta tüm tarayıcılar prefers-color-scheme'i desteklemeyecektir (yukarıdaki kalıp kullanılarak algılanabilir). Bunu, varsayılan light.css dosyasını eksi satır içi bir komut dosyasına koşullu olarak eklenmiş <link rel="stylesheet"> öğesi aracılığıyla dinamik bir şekilde yükleyerek ele alıyorum (ışığı isteğe bağlı olarak tercih ettim, varsayılan yedek deneyimi de koyu hale getirebilirdim). Stilsiz içeriğin bir an önce akıp gitmesini önlemek için, light.css yüklenene kadar sayfanın içeriğini gizlerim.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

Stil sayfası mimarisi

CSS değişkenlerinden maksimum şekilde yararlanıyorum. Bu, genel style.css öğemin genel style.css olmasını sağlıyor ve tüm açık veya koyu mod özelleştirmesi, diğer iki dosya dark.css ve light.css'da gerçekleşiyor. Gerçek stillerden bir alıntıyı aşağıda görebilirsiniz, ancak bu, genel fikri aktarmak için yeterli olacaktır. Temelde açık-koyu-açık ve açık-koyu temel teması oluşturan iki değişken (-⁠-⁠color ve -⁠-⁠background-color) tanımlıyorum.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

Daha sonra style.css kuralımda, bu değişkenleri body { … } kuralında kullanıyorum. :root CSS sahte sınıfı'de tanımlandığı gibi, HTML'de <html> öğesini temsil eden ve seçici html ile özdeş olan bir seçici bulunur. Tek fark, bunun daha spesifik olduğu CSS'nin daha yüksek düzeyde belirtilmesidir.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

Yukarıdaki kod örneğinde, boşlukla ayrılmış light dark değerine sahip bir color-scheme özelliğini fark etmiş olabilirsiniz.

Bu, tarayıcıya uygulamamın hangi renk temalarını desteklediğini bildirir ve kullanıcı aracısı stil sayfasının özel varyantlarını etkinleştirmesine olanak tanır. Örneğin, tarayıcının form alanlarını koyu bir arka planla ve açık metinle oluşturmasına, kaydırma çubuklarını ayarlamasına veya temaya duyarlı bir vurgu rengi etkinleştirmesine izin verir. color-scheme öğesinin tam ayrıntıları CSS Renk Ayarlama Modülü Düzey 1'de belirtilmiştir.

Bundan sonra geri kalan her şey, sitemde önem arz eden unsurlar için CSS değişkenlerini tanımlamaktan ibarettir. Stilleri semantik olarak düzenlemek, koyu modla çalışırken çok yararlı olur. Örneğin, -⁠-⁠highlight-yellow yerine -⁠-⁠accent-color değişkenini çağırmayı düşünün. "sarı", koyu modda sarı renkte olmayabilir (veya tam tersi) olabilir. Aşağıda, benim örneğimde kullandığım başka değişkenlere bir örnek verilmiştir.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Tam örnek

Aşağıdaki Glitch yerleştirmesinde, yukarıdaki kavramların uygulamaya koyulduğu tam örneği görebilirsiniz. İşletim sisteminizin ayarlarında koyu modu açıp kapatmayı deneyin ve sayfanın nasıl tepki verdiğine bakın.

Etki yükleniyor

Bu örneği incelediğinizde, medya sorguları aracılığıyla neden dark.css ve light.css öğelerimi yüklediğimi görebilirsiniz. Koyu modu kapatıp sayfayı yeniden yüklemeyi deneyin. Şu anda eşleşmeyen belirli stil sayfaları yine de yüklenir ancak en düşük önceliğe sahip olur. Böylece şu anda sitenin ihtiyaç duyduğu kaynaklarla hiçbir zaman rekabet etmezler.

Koyu mod değişikliklerine tepki verme

Diğer medya sorgusu değişikliklerinde olduğu gibi, koyu mod değişikliklerine de JavaScript aracılığıyla abone olunabilir. Örneğin, bir sayfanın site simgesini dinamik olarak değiştirmek veya Chrome'daki URL çubuğunun rengini belirleyen <meta name="theme-color"> simgesini değiştirmek için bu özelliği kullanabilirsiniz. Yukarıdaki tam örnekte bunu uygulamalı olarak görebilirsiniz. Tema rengi ve site simgesi değişikliklerini görmek için demoyu ayrı bir sekmede açın.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

Chromium 93 ve Safari 15'ten itibaren, meta tema renk öğesinin media özelliğini kullanarak bir medya sorgusuna göre rengi ayarlayabilirsiniz. Eşleşen ilk kişi seçilir. Örneğin, açık mod için bir renk, koyu mod için başka bir renk kullanılabilir. Bunları yazarken manifest dosyanızda tanımlayamazsınız. w3c/manifest#975 GitHub sorununu inceleyin.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Koyu modda hata ayıklama ve test etme

Geliştirici Araçları'nda prefers-color-scheme emülasyonu

Tüm işletim sisteminin renk şemasını değiştirmek çok hızlı bir şekilde can sıkıcı hale gelebilir. Bu nedenle Chrome DevTools artık kullanıcının tercih ettiği renk şemasını yalnızca geçerli sekmeyi etkileyen bir şekilde emüle etmenize olanak tanıyor. Komut Menüsü'nü açın, Rendering yazmaya başlayın, Show Rendering komutunu çalıştırın ve ardından CSS medya özelliğini tercih eden-renk-scheme'i seçeneğini değiştirin.

Puppeteer ile prefers-color-scheme ekran görüntüsü alınıyor

Puppeteer, Chrome veya Chromium'u DevTools Protokolü üzerinden kontrol etmek için üst düzey API sağlayan bir Node.js kitaplığıdır. dark-mode-screenshot ile sayfalarınızın hem koyu hem de açık modda ekran görüntülerini oluşturmanıza olanak tanıyan bir Puppeteer komut dosyası sağlarız. Bu komut dosyasını tek seferlik çalıştırabilir veya Sürekli Entegrasyon (CI) test paketinize dahil edebilirsiniz.

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Koyu modla ilgili en iyi uygulamalar

Saf beyazdan kaçının

Saf beyaz kullanmadığımı fark etmiş olabilirsin. Bunun yerine, etraftaki koyu içeriğin parlamasını ve kanamasını önlemek için biraz daha koyu bir beyaz seçiyorum. rgb(250, 250, 250) gibi bir seçenek iyi sonuç verir.

Fotoğraf görsellerini yeniden renklendirme ve koyulaştırma

Aşağıdaki iki ekran görüntüsünü karşılaştırırsanız açık-koyu olan temel temanın açık-koyu olarak değiştirildiğini, hero resmin de biraz farklı göründüğünü fark edeceksiniz. Kullanıcı araştırmam, ankete katılan kişilerin çoğunluğunun koyu mod etkin olduğunda biraz daha canlı ve parlak görüntüleri tercih ettiğini gösterdi. Buna yeniden renklendirme diyorum.

Resimlerim üzerindeki bir CSS filtresiyle yeniden renklendirme yapılabilir. URL'lerinde .svg olmayan tüm resimlerle eşleşen bir CSS seçici kullanıyorum. Örneğin, vektör grafiklerine (simgeler) resimlerimden (fotoğraflar) farklı bir yeniden renklendirme işlemi uygulayabilirim. Bu konuyla ilgili daha fazla bilgiyi sonraki paragrafta bulabilirsiniz. Filtremi daha sonra esnek bir şekilde değiştirebilmek için nasıl tekrar bir CSS değişkeni kullandığıma dikkat edin.

Yeniden renklendirme yalnızca koyu modda yapılması gerektiğinden, light.css özelliği dark.css etkinken buna karşılık gelen kural yoktur.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

JavaScript ile koyu modu yeniden renklendirme yoğunluklarını özelleştirme

Herkes aynı değildir ve her kullanıcının koyu mod gereksinimleri farklıdır. Yukarıda açıklanan yeniden renklendirme yöntemine bağlı kalarak, gri tonlama yoğunluğunu JavaScript aracılığıyla değiştirebileceğim bir kullanıcı tercihi haline getirebilirim ve 0% değerini ayarlayarak yeniden renklendirmeyi tamamen devre dışı bırakabilirim. document.documentElement öğesinin belgenin kök öğesine, yani :root CSS sözde sınıfı ile başvurabileceğim öğeye bir referans sağladığını unutmayın.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Vektörel grafikleri ve simgeleri ters çevirin

Benim örneğimde <img> öğeleri üzerinden başvurduğum simgeler olarak kullanılan vektör grafikleri için farklı bir yeniden renklendirme yöntemi kullanıyorum. Araştırmalar, kullanıcıların fotoğrafları ters çevirmeyi sevmediklerini gösterse de çoğu simgede iyi sonuç veriyor. Yine normal ve :hover durumunda ters çevirme miktarını belirlemek için CSS değişkenleri kullanıyorum.

Yine, light.css ile değil yalnızca dark.css içindeki simgeleri ters çevirdiğime ve kullanıcının seçtiği moda bağlı olarak simgenin biraz daha koyu veya biraz daha parlak görünmesi için :hover öğesinin iki durumda nasıl farklı bir ters çevirme yoğunluğu elde ettiğine dikkat edin.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

Satır içi SVG'ler için currentColor öğesini kullan

Satır içi SVG resimlerde ters çevirme filtreleri kullanmak yerine, bir öğenin color özelliğinin değerini temsil eden currentColor CSS anahtar kelimesinden yararlanabilirsiniz. Bu, color değerini varsayılan olarak almayan mülklerde kullanmanıza olanak tanır. SVG fill veya stroke özelliklerinin değeri olarak currentColor kullanılıyorsa uygun bir şekilde, değerini renk özelliğinin devralınan değerinden alır. Daha da iyisi, bu özellik <svg><use href="…"></svg> için de işe yarar. Böylece ayrı kaynaklarınız olabilir ve currentColor, bağlam içinde uygulanmaya devam eder. Bunun yalnızca satır içi veya <use href="…"> SVG'ler için geçerli olduğunu, bir resmin src veya bir şekilde CSS aracılığıyla referans verilen SVG'ler için geçerli olmadığını lütfen unutmayın. Bunun nasıl uygulandığını aşağıdaki demoda görebilirsiniz.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Modlar arasında yumuşak geçişler

Hem color hem de background-color animasyon yapılabilir CSS özellikleri olduğu için koyu moddan açık moda veya tam tersi yönde geçiş yapılabilir. Animasyonu oluşturmak, iki mülk için iki transition belirtmek kadar kolaydır. Aşağıdaki örnek, genel fikri göstermektedir. Bu örneği demoda canlı olarak deneyimleyebilirsiniz.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

Koyu modla sanat yönetimi

Genel olarak yükleme performansı ile ilgili nedenlerle, <link> öğelerinin media özelliğinde (stil sayfalarında satır içi yerine) yalnızca prefers-color-scheme ile çalışmanızı öneririz. Ancak bazı durumlarda doğrudan HTML kodunuzda satır içi olarak kullanmak isteyebilirsiniz.prefers-color-scheme Sanat yönetimi de tam bu durumda. Web'de sanat yönetimi, bir sayfanın genel görsel görünümüyle, görsel olarak nasıl iletişim kurduğu, ruh hallerini nasıl canlandırdığı, özellikleri nasıl kontrastlandırdığı ve hedef kitleye psikolojik olarak nasıl hitap ettiğiyle ilgilenir.

Koyu mod ile belirli bir modda en iyi görüntünün hangisi olduğuna ve resimlerin yeniden renklendirilmesinin yeterince iyi olup olmadığına karar vermek tasarımcıya bağlıdır. <picture> öğesiyle birlikte kullanılırsa gösterilecek resmin <source> değeri, media özelliğine bağlı hale getirilebilir. Aşağıdaki örnekte, koyu mod için Batı yarımküreyi, açık mod için Doğu yarımküreyi veya herhangi bir tercih belirtilmeyen diğer tüm durumlarda varsayılan olarak Doğu yarımküreyi gösteriyorum. Bu, elbette sadece örnek amaçlıdır. Farkı görmek için cihazınızda koyu modu açın.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

Koyu mod, ancak devre dışı bırakma seçeneği ekleyin

Yukarıdaki neden koyu mod bölümünde belirtildiği gibi, koyu mod çoğu kullanıcı için estetik bir seçimdir. Sonuç olarak, bazı kullanıcılar aslında işletim sistemlerinin kullanıcı arayüzünün karanlık olmasını isteyebilirler, ancak yine de web sayfalarını alışkın oldukları gibi görmeyi tercih edebilirler. Başlangıçta tarayıcının prefers-color-scheme üzerinden gönderdiği sinyale bağlı kalıp daha sonra kullanıcıların sistem düzeyindeki ayarlarını geçersiz kılmasına izin vermek mükemmel bir kalıptır.

<dark-mode-toggle> özel öğesi

Elbette bunun için kodu kendiniz oluşturabilirsiniz, ama isterseniz tam da bu amaçla oluşturduğum hazır bir özel öğeyi (web bileşeni) de kullanabilirsiniz. <dark-mode-toggle> olarak adlandırılmış ve sayfanıza tamamen özelleştirebileceğiniz bir açma/kapatma düğmesi (koyu mod: açık/kapalı) veya tema değiştirici (tema: açık/koyu) ekler. Aşağıdaki demo, öğenin nasıl çalıştığını gösterir (evet, bunu yukarıdaki tüm diğer örneklerde de 🤫 sessizce gizlice yerleştirdim).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

Aşağıdaki demoda sağ üst köşedeki koyu renk mod kontrollerine dokunmayı veya tıklamayı deneyin. Üçüncü ve dördüncü kontroldeki onay kutusunu işaretlerseniz sayfayı yeniden yüklediğinizde mod seçiminizin nasıl hatırlandığına bakın. Bu sayede, ziyaretçileriniz işletim sistemlerini koyu modda tutarken sitenizin açık modunun keyfini çıkarabilir veya tam tersi geçerli olabilir.

Sonuçlar

Koyu modla çalışmak ve bu modu desteklemek hem eğlenceli hem de yeni tasarım alanları yaratıyor. Ziyaretçilerinizin bazıları için bu, sitenizi yönetememekle mutlu bir kullanıcı olmak arasındaki fark olabilir. Bazı tuzaklar var ve dikkatli testler kesinlikle gerekli. Ancak koyu mod, tüm kullanıcılarınızı önemsediğinizi göstermeniz için kesinlikle mükemmel bir fırsat. Bu yayında bahsedilen en iyi uygulamalar ve <dark-mode-toggle> özel öğesi gibi yardımcılar, muhteşem bir koyu mod deneyimi oluşturabileceğinize inanmanızı sağlayacaktır. Oluşturduğunuz içerikleri, bu yayının faydalı olup olmadığını veya geliştirilme önerilerinizi Twitter'dan bize bildirin. Okuduğunuz için teşekkür ederiz! 🌒

İlgili bağlantılar

prefers-color-scheme medya sorgusu için kaynaklar:

• Chrome Platformu Durumu sayfası
• Chromium hatası
• Medya Sorguları Düzey 5 spesifikasyonu

color-scheme meta etiketi ve CSS mülkü için kaynaklar:

• color-scheme CSS özelliği ve meta etiketi
• Chrome Platformu Durumu sayfası
• Chromium hatası
• CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonu
• Meta etiket ve CSS özelliği için CSS WG GitHub Sorunu
• Meta etiket için HTML WHATWG GitHub sorunu

Genel koyu mod bağlantıları:

• Materyal Tasarım - Koyu Tema
• Web Denetleyicisi'nde Koyu Mod
• WebKit'te Koyu Mod Desteği
• Apple İnsan Arayüzü Yönergeleri - Koyu Mod

Bu yayına ilişkin arka plan araştırma makaleleri:

• Koyu Mod'un "desteklenen renk şemaları" Neler Yapar? 🤔
• Bırak! 🌚 Belki...
• Koyu Mod için Yeniden Renklendirme

Teşekkür

prefers-color-scheme medya özelliği, color-scheme CSS özelliği ve ilgili meta etiket, 👏 Rune Lillesveen'in uygulama çalışmasıdır. Rune aynı zamanda CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonunun da yardımcı editörüdür. Bu makaleyi ayrıntılı olarak inceledikleri için 🙏 Lukasz Zbylut, Rowan Merewood, Chirag Desai ve Rob Dodson'a teşekkür etmek istiyorum. Yükleme stratejisi, Jake Archibald'ın buluşudur. Emilio Cobos Álvarez, beni doğru prefers-color-scheme algılama yöntemine yönlendirdi. Referans verilen SVG'ler ve currentColor içeren ipucu Timothy Hatcher'dan geldi. Son olarak, bu makaledeki önerilerin şekillendirilmesine yardımcı olan çeşitli kullanıcı araştırmalarında çok sayıda anonim katılımcıya teşekkür ederim. Nathan Anderson'ın lokomotif resmi.