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

Aşırı heyecan veya ihtiyaç mı duyuyorsunuz? Koyu mod ve kullanıcılarınıza fayda sağlayacak şekilde bu modu nasıl destekleyeceğiniz hakkında her şeyi öğrenin.

Thomas Steiner

Giriş

Koyu Mod'dan önce koyu mod

Koyu modu tam anlamıyla hayata geçirdik. Kişisel bilgisayarların ilk dönemlerinde koyu mod bir tercih değil, zorunluluktu: Tek renkli CRT bilgisayar monitörleri, fosforlu bir ekrana elektron ışınları göndererek çalışırdı ve ilk CRT'lerde kullanılan fosfor yeşildi. Metin yeşil renkte görüntülendiği ve ekranın geri kalanı siyah olduğu için bu modeller genellikle yeşil ekran olarak adlandırılıyordu.

Daha sonra kullanıma sunulan renkli CRT'ler, kırmızı, yeşil ve mavi fosforlar kullanılarak birden fazla renk göstermiştir. Üç fosforu da aynı anda etkinleştirerek beyaz rengi oluşturdular. Daha gelişmiş WYSIWYG masaüstü yayıncılık yazılımlarının ortaya çıkmasıyla birlikte, sanal dokümanı fiziksel bir kağıda benzetme fikri popüler oldu.

dark-on-white bu noktada bir tasarım trendi olarak başladı ve bu trend, ilk belge tabanlı web'e taşındı. İlk tarayıcı olan WorldWideWeb (CSS'nin henüz icat edilmediğini unutmayın), web sayfalarını bu şekilde gösterirdi. İlginç bir bilgi: İlk tarayıcının ardından geliştirilen ikinci tarayıcı olan Line Mode Browser (satır modu tarayıcı), koyu arka planda yeşil renkteydi. Günümüzde web sayfaları ve web uygulamaları genellikle açık arka plan üzerinde koyu renkli metinlerle tasarlanmaktadır. Bu, Chrome'un da dahil olduğu kullanıcı aracısı stil sayfalarında da sabit kodlanmış olan temel bir varsayımdır.

CRT'lerin kullanıldığı günler çoktan sona erdi. İçerik tüketimi ve oluşturma, arka aydınlatmalı LCD veya enerji tasarruflu AMOLED ekranlar kullanan mobil cihazlara kaymıştır. Daha küçük ve taşınabilir bilgisayarlar, tabletler ve akıllı telefonlar yeni kullanım kalıplarına yol açtı. Web'de gezinme, eğlence için kodlama ve üst düzey oyun oynama gibi boş zaman etkinlikleri genellikle çalışma saatlerinden sonra loş ortamlarda gerçekleşir. Kullanıcılar, cihazlarını geceleri yataklarında bile kullanıyor. Kullanıcılar cihazlarını karanlıkta ne kadar fazla kullanırsa light-on-dark (karanlıkta ışık) kavramına geri dönme fikri o kadar popüler hale geliyor.

Koyu mod neden kullanışlıdır?

Estetik nedenlerle koyu mod

Kullanıcılara koyu modu neden sevdikleri veya istedikleri sorulduğunda en popüler yanıt "gözlere daha kolay geliyor", ardından "zarif ve güzel" oluyor. Apple, Koyu Mod geliştirici dokümanlarında açıkça şunları belirtiyor: "Açık veya koyu görünümü etkinleştirme seçimi çoğu kullanıcı için estetik bir seçimdir ve ortam ışığı koşullarınla ilgili olmayabilir."

Erişilebilirlik aracı olarak koyu mod

Ayrıca, koyu moda ihtiyaç duyan ve bu modu başka bir erişilebilirlik aracı olarak kullanan (ör. az gören kullanıcılar) da vardır. Bu tür bir erişilebilirlik aracının kullanıldığı en eski örnek, System 7'deki CloseView özelliğidir. Bu özellikte Beyaz zemin üzerine siyah ve Siyah zemin üzerine beyaz seçenekleri bulunur. System 7 renkleri desteklemesine rağmen varsayılan kullanıcı arayüzü hâlâ siyah beyazdı.

Renk kullanıma sunulduğunda, ters çevirme tabanlı bu uygulamalar zayıflıklarını gösterdi. Szpiro ve arkadaşları tarafından az gören kişilerin bilgisayar cihazlarına erişimi hakkında yapılan kullanıcı araştırması, görüşü az olan tüm kullanıcıların ters çevrilmiş resimlerden hoşlanmadığını ancak çoğunun koyu arka plan üzerinde açık renkli metni tercih ettiğini gösterdi. Apple, bu kullanıcı tercihini Akıllı Ters Çevir adlı bir özellikle karşılar. Bu özellik, resimler, medya ve koyu renk stilleri kullanan bazı uygulamalar hariç ekrandaki renkleri tersine çevirir.

Az görmenin özel bir şekli olan bilgisayar görüşü sendromu (dijital göz yorgunluğu olarak da bilinir), "bilgisayarların (masaüstü, dizüstü 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 bir kombinasyonu" olarak tanımlanır. Ergenlerin özellikle geceleri elektronik cihaz kullanmasının uyku süresinin kısalmasına, uykuya dalma süresinin uzamasına ve uyku eksikliğinin artmasına yol açtığı önerilmiştir. Ayrıca, mavi ışığa maruz kalmanın sirkadiyen ritm ve uyku döngüsünün düzenlenmesinde rol oynadığı yaygın olarak bildirilen bir durumdur. Rosenfield'ın yaptığı araştırmaya göre, düzensiz ışık ortamları uyku eksikliğine yol açabilir ve bu da ruh halini ve görev performansını etkileyebilir. Bu olumsuz etkileri sınırlamak için iOS'in Night Shift veya Android'in Night Light gibi özelliklerden yararlanarak ekran renk sıcaklığını ayarlayarak mavi ışığı azaltmanın yanı sıra koyu temalar veya koyu modlar aracılığıyla parlak ışıklardan ya da düzensiz ışıklardan kaçınabilirsiniz.

AMOLED ekranlarda koyu mod güç tasarrufu

Son olarak, koyu modun AMOLED ekranlarda çok fazla enerji tasarrufu sağladığı bilinmektedir. YouTube gibi popüler Google uygulamalarına odaklanan Android örnek olaylarında, güç tasarrufunun %60'a kadar çıkabileceği gösterilmiştir. Aşağıdaki videoda bu örnek olaylar ve uygulama başına sağlanan güç tasarrufu hakkında daha fazla bilgi verilmektedir.

İşletim sisteminde koyu modu etkinleştirme

Koyu modun birçok kullanıcı için neden bu kadar önemli bir konu olduğunu ele aldığımıza göre bu özelliği nasıl destekleyebileceğinize bakalım.

Koyu modu veya koyu temayı destekleyen işletim sistemlerinde genellikle ayarlarda bu modu etkinleştirme seçeneği bulunur. macOS X'te sistem tercihinin Genel bölümünde bulunan Görünüm (ekran görüntüsü) ve Windows 10'da Renkler bölümünde bulunan Renginüzü seçin (ekran görüntüsü) seçenekleri bu ayara erişmenizi sağlar. Android Q'de bu ayarı Ekran bölümündeki Koyu Tema açma/kapatma düğmesi olarak bulabilirsiniz (ekran görüntüsü). iOS 13'te ise ayarların Ekran ve Parlaklık bölümündeki Görünüm'ü değiştirebilirsiniz (ekran görüntüsü).

prefers-color-scheme medya sorgusu

Devam etmeden önce son bir teoriden bahsedeceğim. Medya sorguları, yazarların oluşturulan dokümandan bağımsız olarak kullanıcı aracısının veya görüntüleme cihazının değerlerini ya da özelliklerini test etmesine ve sorgulamasına olanak tanır. CSS @media kuralında, stilleri bir dokümana ve HTML ve JavaScript gibi diğer çeşitli bağlamlar ile dillerde koşullu olarak uygulamak için kullanılırlar. Medya Sorguları 5. Düzey, kullanıcı tercihi medya özellikleri adı verilen, yani sitelerin kullanıcının içerik görüntülemek için tercih ettiği yolu algılamasının bir yoludur.

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

• light: Kullanıcının, açık tema (açık arka plan üzerinde koyu metin) olan bir sayfayı tercih ettiğini sisteme bildirdiğini belirtir.
• dark: Kullanıcının, koyu temalı (koyu arka plan üzerinde açık metin) bir sayfayı tercih ettiğini sisteme bildirdiğini gösterir.

Koyu mod destekleniyor

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

Koyu mod, medya sorgusu aracılığıyla raporlandığından, mevcut tarayıcının koyu modu destekleyip desteklemediğini kolayca kontrol etmek için medya sorgusunun prefers-color-scheme eşleşip eşleşmediğini kontrol edebilirsiniz. Hiçbir değer eklemediğimi, yalnızca medya sorgusunun eşleşip eşleşmediğini kontrol ettiğimi unutmayın.

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

prefers-color-scheme, bu makalenin yazıldığı sırada Chrome ve Edge'in 76 numaralı sürümünden itibaren, Firefox'un 67 numaralı sürümünden itibaren ve Safari'nin macOS'te 12.1 numaralı sürümünden itibaren, iOS'te ise 13 numaralı sürümünden itibaren hem masaüstünde hem de mobilde (kullanılabilir olduğunda) desteklenmektedir. Diğer tüm tarayıcılar için Destek tablolarını kullanabilir miyim? başlıklı makaleye göz atabilirsiniz.

İstekte bulunulan sırada kullanıcının tercihleri hakkında bilgi edinme

Sec-CH-Prefers-Color-Scheme istemci ipucu üstbilgisi, sitelerin istekte bulunurken isteğe bağlı olarak kullanıcının renk şeması tercihlerini almasına olanak tanır. Bu sayede sunucular doğru CSS'yi satır içi olarak yerleştirebilir ve yanlış renk temasının gösterilmesini önleyebilir.

Koyu modun kullanımı

Son olarak, koyu mod desteğinin pratikte nasıl göründüğüne bakalım. Highlander filminde olduğu gibi, koyu modda da yalnızca bir tane olabilir: koyu veya açık, ama ikisini birden kullanamazsınız. Bunun neden 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 için aşağıdaki önerileri uygulamada gösteren örnek uygulamanın CSS'sini kritik olmayan CSS'yi ertelemek amacıyla üç bölüme ayırdım:

• style.css dosyasını oluşturun.
• dark.css yalnızca koyu mod için gereken kuralları içerir.
• light.css dosyasını oluşturun.

Yükleme stratejisi

Sonraki iki light.css ve dark.css, <link media> sorgusuyla koşullu olarak yüklenir. Başlangıçta tüm tarayıcılar prefers-color-scheme öğesini desteklemez (yukarıdaki kalıp ile algılanabilir). Varsayılan light.css dosyasını, koşullu olarak eklenmiş bir <link rel="stylesheet"> öğesi aracılığıyla küçük bir satır içi komut dosyası aracılığıyla yükleyerek dinamik olarak hallediyorum (ışık rastgele bir seçimdir, ayrıca varsayılan yedek deneyimi koyulaştırabilirdim). Biçimlendirilmemiş içeriğin gösterilmesini ö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 en iyi şekilde yararlanıyorum. Bu sayede genel style.css öğem genel olarak kalır ve tüm açık veya koyu mod özelleştirmeleri diğer iki dosyada (dark.css ve light.css) gerçekleşir. Aşağıda gerçek stillerden bir alıntı görebilirsiniz, ancak bu alıntı, genel fikri aktarmaya yeterli olacaktır. Temel olarak açık zemin üzerine koyu ve koyu zemin üzerine açık bir temel tema oluşturan -⁠-⁠color ve -⁠-⁠background-color adlı iki değişken tanımladım.

/* 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);
}

Ardından, style.css'te bu değişkenleri body { … } kuralında kullanırım. :root CSS sözde sınıfında tanımlandıkları için (HTML'de <html> öğesini temsil eden ve özgüllüğü daha yüksek olması dışında html seçicisiyle aynı olan bir seçici) aşağı doğru basamaklanırlar. Bu, genel CSS değişkenlerini bildirmemi sağlar.

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

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

Yukarıdaki kod örneğinde, light dark değeriyle boşlukla ayrılmış bir mülk color-scheme olduğunu fark etmişsinizdir.

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. Bu, örneğin, tarayıcıda form alanlarının koyu arka planlı ve açık renkli metinle oluşturulmasını, kaydırma çubuklarının ayarlanmasını veya temaya duyarlı bir vurgu renginin etkinleştirilmesini sağlar. color-scheme ile ilgili ayrıntılar CSS Renk Düzenleme Modülü 1. Seviye'de belirtilmiştir.

Geriye kalan her şey, sitemde önemli olan şeyler için CSS değişkenleri tanımlamaktan ibaret. Stillerin anlamsal olarak düzenlenmesi, koyu modla çalışırken çok faydalıdır. Örneğin, -⁠-⁠highlight-yellow yerine -⁠-⁠accent-color değişkenini çağırmayı deneyin. Koyu modda "sarı", koyu modda sarı olmayabilir (veya tam tersi). Aşağıda, örneğimde kullandığım diğer bazı değişkenlere ilişkin 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şiminde, yukarıdaki kavramların uygulandığı örneğin tamamını görebilirsiniz. Kullandığınız işletim sisteminin ayarlarında koyu modu açıp kapatmayı deneyin ve sayfanın nasıl tepki verdiğini görün.

Yükleme etkisi

Bu örnekle oynarken dark.css ve light.css öğelerini neden medya sorguları aracılığıyla yüklediğimi görebilirsiniz. Karanlık modu açıp sayfayı yeniden yüklemeyi deneyin: Şu anda eşleşmeyen belirli stil sayfaları yine yüklenir ancak en düşük önceliğe sahip olur. Böylece, sitenin şu anda ihtiyaç duyduğu kaynaklarla hiçbir zaman rekabet etmez.

Koyu mod değişikliklerine tepki verme

Diğer tüm medya sorgusu değişikliklerinde olduğu gibi, koyu mod değişikliklerine JavaScript aracılığıyla abone olunabilir. Örneğin, bir sayfanın favicon'unu dinamik olarak değiştirmek veya Chrome'daki URL çubuğunun rengini belirleyen <meta name="theme-color"> değişkenini değiştirmek için bu özelliği kullanabilirsiniz. Yukarıdaki tam örnekte bu uygulama gösterilmiştir. 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 rengi öğesinin media özelliğini kullanarak rengi bir medya sorgusuna göre ayarlayabilirsiniz. Eşleşen ilk dosya seçilir. Örneğin, açık mod için bir renk, koyu mod için başka bir renk kullanabilirsiniz. Bu makalenin yazıldığı sırada bunları manifest dosyanızda tanımlayamazsınız. w3c/manifest#975 GitHub sorununa bakın.

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

Hata ayıklama ve koyu modu test etme

DevTools'da prefers-color-scheme'ü taklit etme

İşletim sisteminin tüm renk şemasının değiştirilmesi çok hızlı bir şekilde can sıkıcı olabilir. Bu nedenle Chrome Geliştirici Araçları, artık kullanıcının tercih ettiği renk şemasını yalnızca şu anda görünen sekmeyi etkileyecek ş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 prefers-color-scheme medya özelliğini emülasyonla çalıştır seçeneğini değiştirin.

Puppeteer ile prefers-color-scheme ekran görüntüsü alma

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

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

Koyu mod ile ilgili en iyi uygulamalar

Saf beyazdan kaçının

Fark etmiş olabileceğiniz küçük bir ayrıntı, saf beyaz kullanmamdır. Bunun yerine, etrafındaki koyu içeriğe karşı parlama ve taşmayı önlemek için biraz daha koyu bir beyaz seçiyorum. rgb(250, 250, 250) gibi bir ad kullanabilirsiniz.

Fotoğrafları yeniden renklendirme ve koyulaştırma

Aşağıdaki iki ekran görüntüsünü karşılaştırırsanız yalnızca ana temanın açık zemin üzerine koyu yerine koyu zemin üzerine açık olarak değişmediğini, kahraman resminin de biraz farklı göründüğünü fark edersiniz. Kullanıcı araştırmam, ankete katılanların çoğunun karanlık mod etkinken biraz daha az canlı ve parlak resimleri tercih ettiğini gösterdi. Buna yeniden renklendirme diyorum.

Resimlerimdeki bir CSS filtresinden yeniden renklendirme yapılabilir. URL'sinde .svg bulunmayan tüm resimlerle eşleşen bir CSS seçici kullanıyorum. Bunun amacı, vektör grafiklerine (simgeler) resimlerime (fotoğraflar) göre farklı bir yeniden renklendirme işlemi uygulamaktır. Bu konu hakkında daha fazla bilgiyi sonraki paragrafta bulabilirsiniz. Daha sonra filtremi esnek bir şekilde değiştirebilmek için tekrar bir CSS değişkeni kullandığımı unutmayın.

Yeniden renklendirme yalnızca koyu modda, yani dark.css etkinken gerekli olduğundan light.css'da buna karşılık gelen kurallar yoktur.

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

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

Koyu modda yeniden renklendirme yoğunluklarını JavaScript ile özelleştirme

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

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

Vektör grafiklerini ve simgeleri tersine çevirme

Vektör grafikleri için (benim durumumda <img> öğeleri aracılığıyla referans verdiğim simgeler olarak kullanılır) farklı bir yeniden renklendirme yöntemi kullanıyorum. Araştırmalar, kullanıcıların fotoğraflarda renkleri tersine çevirme özelliğini sevmediğini gösterse de bu özellik çoğu simge için çok iyi sonuç verir. Normalde ve :hover durumunda ters çevirme miktarını belirlemek için yine CSS değişkenleri kullanıyorum.

Yine yalnızca dark.css içindeki simgelerin tersini aldığımı, light.css içindeki simgelerin tersini almadığımı ve :hover'nin, kullanıcının seçtiği moda bağlı olarak simgenin biraz daha koyu veya biraz daha parlak görünmesi için iki durumda farklı bir ters çevirme yoğunluğu aldığını unutmayın.

/* 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 kullanma

Satır içi SVG resimler için ters çevirme filtreleri kullanmak yerine, bir öğenin color özelliğinin değerini temsil eden currentColor CSS anahtar sözcüğünden yararlanabilirsiniz. Bu sayede, varsayılan olarak almayan mülkler için color değerini kullanabilirsiniz. SVG fill veya stroke özelliklerinin değeri olarak currentColor kullanılırsa bu değer, renk özelliğinin devralınan değerinden alınır. Daha da iyisi: Bu yöntem <svg><use href="…"></svg> için de geçerlidir. Böylece ayrı kaynaklara sahip olabilirsiniz ve currentColor bağlama göre uygulanmaya devam eder. Bunun yalnızca satır içi veya <use href="…"> SVG'lerde işe yaradığını, ancak bir resmin src olarak veya bir şekilde CSS aracılığıyla referans verilen SVG'lerde işe yaramadığını lütfen unutmayın. Bu özelliğin uygulandığı durumu aşağıdaki demoda görebilirsiniz.

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

Modlar arasında sorunsuz geçiş

Hem color hem de background-color animasyonlu CSS özellikleri olduğu için, koyu moddan açık moda (veya tam tersi) geçiş sorunsuz yapılabilir. Animasyonu oluşturmak, iki mülk için iki transition tanımlamak kadar kolaydır. Aşağıdaki örnekte genel fikir gösterilmektedir. Bu özelliğ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 mod ile sanat yönü

Genel olarak yükleme performansı nedeniyle, stil sayfalarında satır içi olarak kullanmak yerine <link> öğelerinin media özelliğinde yalnızca prefers-color-scheme ile çalışmanızı öneririz. Bununla birlikte, prefers-color-scheme ile doğrudan HTML kodunuzda satır içi olarak çalışmak isteyebileceğiniz durumlar da vardır. Sanat yönetmeliği de bu tür bir durumdur. Web'de sanat yönetmenliği, bir sayfanın genel görsel görünümüyle ve sayfanın görsel olarak nasıl iletişim kurduğu, ruh hallerini nasıl etkilediği, özellikleri nasıl karşılaştırdığı ve hedef kitleye psikolojik olarak nasıl hitap ettiğiyle ilgilenir.

Koyu modda, belirli bir modda en iyi resmin hangisi olduğuna ve resimlerin yeniden renklendirilmesinin yeterince iyi olup olmadığına karar vermek tasarımcının takdirine bağlıdır. <picture> öğesiyle birlikte kullanılırsa gösterilecek resmin <source> özelliği, 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 tercih belirtilmediğinde varsayılan olarak diğer tüm durumlarda doğu yarımküreyi gösteriyorum. Bu, elbette yalnızca örnek amaçlıdır. Farklılığı görmek için cihazınızda koyu modu açın veya kapatı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 koyu modu kullanmanın avantajları bölümünde de belirtildiği gibi, koyu mod çoğu kullanıcı için estetik bir tercihtir. Sonuç olarak, bazı kullanıcılar işletim sistemi kullanıcı arayüzlerinin koyu olmasını tercih etse de web sayfalarını alıştıkları şekilde görmeyi tercih edebilir. Başlangıçta prefers-color-scheme üzerinden tarayıcı tarafından gönderilen sinyali takip etmek, ancak daha sonra kullanıcıların isteğe bağlı olarak sistem düzeyindeki ayarlarını geçersiz kılmasına izin vermek iyi bir yöntemdir.

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

Elbette bu kodu kendiniz oluşturabilirsiniz ancak bu amaç için özel olarak oluşturduğum hazır bir özel öğeyi (web bileşeni) de kullanabilirsiniz. <dark-mode-toggle> adlı bu öğe, 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 demoda öğenin işleyişi gösterilmektedir (Ayrıca 🤫 bu öğeyi diğer örneklerin hepsine gizlice ekledim).

<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 mod kontrollerini tıklamayı veya bunlara dokunmayı deneyin. Üçüncü ve dördüncü kontroldeki onay kutusunu işaretlerseniz sayfayı yeniden yüklediğinizde bile mod seçiminizin nasıl hatırlandığını görebilirsiniz. Bu sayede ziyaretçileriniz işletim sistemlerini koyu modda tutabilir ancak sitenizi açık modda kullanabilir veya tam tersini yapabilir.

Sonuçlar

Koyu modla çalışmak ve bu modu desteklemek eğlencelidir. Ayrıca yeni tasarım alanlarının önünü açar. Bu, ziyaretçilerinizin bazıları için sitenizi kullanamama ile memnun bir kullanıcı olma arasındaki fark olabilir. Bazı tuzaklar vardır ve dikkatli testler kesinlikle gereklidir. Ancak karanlık mod, tüm kullanıcılarınıza önem verdiğinizi göstermek için kesinlikle mükemmel bir fırsattır. Bu yayında bahsedilen en iyi uygulamalar ve <dark-mode-toggle> özel öğesi gibi yardımcılar, muhteşem bir koyu mod deneyimi oluşturma konusunda kendinize güvenmelisiniz. Oluşturduğunuz içeriği ve bu yayından yararlanıp yararlanmadığınızı Twitter'da bize bildirin. Ayrıca, bu yayını iyileştirmeyle ilgili önerilerinizi de paylaşabilirsiniz. Bu e-postayı okuduğunuz için teşekkür ederiz. 🌒

İlgili bağlantılar

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

• Chrome Platform Durumu sayfası
• Chromium hatası
• Medya Sorguları 5. Seviye spesifikasyonu

color-scheme meta etiketi ve CSS özelliğiyle ilgili kaynaklar:

• color-scheme CSS özelliği ve meta etiketi
• Chrome Platform Durum sayfası
• Chromium hatası
• CSS Renk Düzenleme Modülü Düzey 1 özelliği
• Meta etiket ve CSS mülkü için CSS WG GitHub sorunu
• Meta etiket için HTML WHEREWG GitHub Sorunu

Genel koyu mod bağlantıları:

• Materyal Tasarım: Koyu Tema
• Web İnceleyici'de koyu mod
• WebKit'te Koyu Mod Desteği
• Apple Kullanıcı Arayüzü Kuralları: Karanlık Mod

Bu yayınla ilgili arka plan araştırma makaleleri:

• Koyu Mod'un "supported-color-schemes" Parametresi Ne İşe Yarar? 🤔
• Karanlık olsun. 🌚 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 tarafından uygulanmıştır. Rune, CSS Renk Düzenleme Modülü 1. Seviye spesifikasyonunun da ortak düzenleyicisidir. Bu makaleyi ayrıntılı bir şekilde inceledikleri için Lukasz Zbylut, Rowan Merewood, Chirag Desai ve Rob Dodson'a 🙏 teşekkür ederim. Yükleme stratejisi, Jake Archibald tarafından geliştirilmiştir. Emilio Cobos Álvarez beni doğru prefers-color-scheme algılama yöntemine yönlendirdi. Referans verilen SVG'ler ve currentColor içeren ipucun sahibi Timothy Hatcher. Son olarak, bu makaledeki önerilerin şekillendirilmesine yardımcı olan çeşitli kullanıcı araştırmalarına katılan çok sayıda anonim katılımcıya teşekkür ederim. Nathan Anderson'ın hero resmi.