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

Abartılıyor mu yoksa gerekli mi? Koyu mod ve kullanıcılarınızın yararına olacak şekilde bu modu nasıl destekleyeceğiniz hakkında her şeyi öğrenin.

Thomas Steiner

Giriş

Koyu mod öncesinde koyu mod

Koyu modla ilgili tüm adımları tamamladık. Kişisel bilgisayarların ilk dönemlerinde karanlık mod bir tercih değil, bir gerçeklikti: Tek renkli CRT bilgisayar monitörleri, fosforlu bir ekrana elektron ışınları göndererek çalışıyordu ve ilk CRT'lerde kullanılan fosfor yeşildi. Metin yeşil renkte, ekranın geri kalanı ise siyah renkte gösterildiği için bu modeller genellikle yeşil ekran olarak adlandırılıyordu.

Daha sonra piyasaya sürülen renkli CRT'ler, kırmızı, yeşil ve mavi fosforlar kullanılarak birden fazla renk gösteriyordu. Üç fosforu aynı anda etkinleştirerek beyaz rengi oluştururlar. Daha gelişmiş WYSIWYG masaüstü yayıncılığının ortaya çıkmasıyla birlikte, sanal dokümanı fiziksel bir kağıda benzetme fikri popüler hale geldi.

Beyaz zemin üzerinde koyu renk tasarım trendi buradan başladı ve bu trend, erken dönem doküman tabanlı web'e taşındı. İlk tarayıcı olan WorldWideWeb (CSS'in henüz icat edilmediğini unutmayın) web sayfalarını bu şekilde gösteriyordu. Eğlenceli bilgi: İkinci tarayıcı olan Line Mode Browser (terminal tabanlı bir tarayıcı) koyu zemin üzerinde yeşil renkteydi. Günümüzde web sayfaları ve web uygulamaları genellikle açık renkli bir arka plan üzerinde koyu renkli metinle tasarlanır. Bu temel varsayım, Chrome da dahil olmak üzere kullanıcı aracısı stil sayfalarına sabit kodlanmıştır.

CRT'lerin dönemi çoktan sona erdi. İçerik tüketimi ve oluşturma, arkadan aydınlatmalı LCD veya enerji tasarrufu sağlayan AMOLED ekranlar kullanan mobil cihazlara kaydı. Daha küçük ve taşınabilir bilgisayarlar, tabletler ve akıllı telefonlar yeni kullanım şekillerine yol açtı. Web'de gezinme, eğlence amaçlı kodlama ve üst düzey oyun oynama gibi boş zaman aktiviteleri genellikle loş ortamlarda ve mesai saatleri dışında yapılır. Kullanıcılar, cihazlarını gece yataklarında bile kullanıyor. Kullanıcılar cihazlarını karanlıkta daha çok kullandıkça açık renkli metinlerin koyu renkli arka planlarda kullanıldığı günlere geri dönme fikri daha popüler hale geliyor.

Koyu modun avantajları

Estetik nedenlerle koyu mod

Kullanıcılara koyu modu neden beğendikleri veya istedikleri sorulduğunda en popüler yanıt "gözleri yormadığı" oluyor. Bunu "şık ve güzel olduğu" yanıtı takip ediyor. Apple, Koyu Mod geliştirici belgelerinde açıkça şöyle yazıyor: "Açık veya koyu görünümün etkinleştirilip etkinleştirilmeyeceği seçimi çoğu kullanıcı için estetik bir seçimdir ve ortam ışığı koşullarıyla ilgili olmayabilir."

Erişilebilirlik aracı olarak koyu mod

Koyu moda gerçekten ihtiyacı olan ve bunu başka bir erişilebilirlik aracı olarak kullanan kişiler de 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ğidir. Bu özellik, Siyah üzerine beyaz ve Beyaz üzerine siyah için bir açma/kapatma düğmesine sahipti. System 7 renkli ekranı desteklese de varsayılan kullanıcı arayüzü siyah beyazdı.

Bu ters çevirmeye dayalı uygulamalar, renk kullanıma sunulduktan sonra zayıf yönlerini göstermeye başladı. Szpiro ve diğerleri tarafından az gören kişilerin bilgisayar cihazlarına nasıl eriştiği üzerine yapılan kullanıcı araştırması, görüşülen tüm kullanıcıların ters çevrilmiş resimleri beğenmediğini ancak çoğunun koyu arka plan üzerinde açık renkli metni tercih ettiğini gösterdi. Apple, bu kullanıcı tercihini karşılamak için Akıllı Ters Çevirme adlı bir özellik sunar. Bu özellik, ekrandaki renkleri ters çevirir ancak resimler, medya ve koyu renk stilleri kullanan bazı uygulamalar bu kapsamda değildir.

Bir tür özel az görme durumu olan Bilgisayar Görme Sendromu, Dijital Göz Yorgunluğu olarak da bilinir ve "masaüstü, dizüstü ve tabletler dahil olmak üzere bilgisayarların ve akıllı telefonlar ile elektronik okuma cihazları gibi diğer elektronik ekranların kullanımıyla ilişkili göz ve görme sorunlarının birleşimi" olarak tanımlanır. Ergenlerin elektronik cihazları, özellikle gece saatlerinde kullanmasının uyku süresinin kısalması, uykuya dalma süresinin uzaması ve uyku eksikliği riskini artırdığı önerilmektedir. Ayrıca, mavi ışığa maruz kalmanın sirkadiyen ritmin ve uyku döngüsünün düzenlenmesinde rol oynadığı yaygın olarak bildirilmiştir. Rosenfield'ın araştırmasına göre, düzensiz ışık ortamları uyku eksikliğine yol açarak ruh halini ve görev performansını etkileyebilir. Bu olumsuz etkileri sınırlamak için ekran renk sıcaklığını ayarlayarak mavi ışığı azaltabilirsiniz. iOS'in Night Shift veya Android'in Gece Işığı gibi özellikler bu konuda yardımcı olabilir. Ayrıca, karanlık temalar veya karanlık modlar kullanarak genel olarak parlak veya düzensiz ışıklardan kaçınabilirsiniz.

AMOLED ekranlarda koyu mod ile güç tasarrufu

Son olarak, karanlık modun AMOLED ekranlarda çok fazla enerji tasarrufu sağladığı bilinmektedir. YouTube gibi popüler Google uygulamalarına odaklanan Android örnek olay incelemeleri, güç tasarrufunun %60'a kadar çıkabileceğini gösterdi. Bu örnek olaylar ve uygulama başına güç tasarrufu hakkında daha fazla bilgiyi aşağıdaki videoda bulabilirsiniz.

İşletim sisteminde koyu modu etkinleştirme

Koyu modun neden birçok kullanıcı için bu kadar önemli olduğunu açıkladıktan sonra, bu özelliği nasıl destekleyebileceğinizi inceleyelim.

Koyu modu veya koyu temayı destekleyen işletim sistemlerinde genellikle ayarlarda bu özelliği etkinleştirme seçeneği bulunur. macOS X'te sistem tercihlerinin Genel bölümünde yer alır ve Görünüm (ekran görüntüsü) olarak adlandırılır. Windows 10'da ise Renkler bölümünde yer alır ve Renginizi seçin (ekran görüntüsü) olarak adlandırılır. Android Q'da Ekran bölümünde Koyu Tema açma/kapatma düğmesi (ekran görüntüsü) olarak bulabilirsiniz. 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

Başlamadan önce son bir teorik bilgi. 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. Bir belgeye koşullu olarak stil uygulamak için CSS @media kuralında ve HTML ile JavaScript gibi çeşitli bağlamlarda ve dillerde kullanılır. Media Queries Level 5 kullanıcı tercihi medya özellikleri olarak adlandırılan bir özelliği kullanıma sunar. Bu özellik, sitelerin kullanıcının içeriği görüntülemek için tercih ettiği yöntemi algılamasını sağlar.

prefers-color-scheme Medya özelliği, kullanıcının sayfadan açık veya koyu 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 tema (açık arka plan üzerinde koyu metin) içeren bir sayfayı tercih ettiğini sisteme bildirdiğini gösterir.
• dark: Kullanıcının, koyu tema (koyu arka plan üzerinde açık metin) içeren bir sayfayı tercih ettiğini sisteme bildirdiğini gösterir.

Koyu mod desteği

Koyu modun tarayıcı tarafından desteklenip desteklenmediğini öğrenme

Koyu mod bir medya sorgusu aracılığıyla bildirildiğinden, medya sorgusu prefers-color-scheme eşleşip eşleşmediğini kontrol ederek mevcut tarayıcının koyu modu destekleyip desteklemediğini kolayca kontrol edebilirsiniz. Herhangi 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');
}

Bu makalenin yazıldığı sırada prefers-color-scheme, Chrome ve Edge'in 76. sürümünden, Firefox'un 67. sürümünden, Safari'nin ise macOS'te 12.1, iOS'te 13. sürümünden itibaren hem masaüstünde hem de mobil cihazlarda (kullanılabildiği yerlerde) desteklenmektedir. Diğer tüm tarayıcılar için Can I use destek tabloları dokümanına göz atabilirsiniz.

İstek sırasında kullanıcının tercihlerini öğrenme

Sec-CH-Prefers-Color-Scheme istemci ipucu başlığı, sitelerin istek sırasında kullanıcının renk şeması tercihlerini isteğe bağlı olarak almasına olanak tanır. Böylece sunucular doğru CSS'yi satır içi olarak ekleyebilir ve yanlış renk temasıyla ilgili bir flaş oluşmasını önleyebilir.

Koyu modun kullanımı

Son olarak, koyu mod desteğinin pratikte nasıl göründüğüne bakalım. İskoçyalı filminde olduğu gibi, koyu modda yalnızca bir tane olabilir: koyu veya açık, ancak asla ikisi birden değil. Bunu neden belirtiyorum? Çünkü bu durum, yükleme stratejisini etkilemelidir. Lütfen kullanıcıları, kritik oluşturma yolunda CSS indirmeye zorlamayın bu CSS, şu anda kullanmadıkları bir mod içindir. Bu nedenle, yükleme hızını optimize etmek için aşağıdaki önerileri uygulamada gösteren örnek uygulamanın CSS'sini önemli olmayan CSS'yi ertelemek amacıyla üç bölüme ayırdım:

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

Yükleme stratejisi

Son iki öğe olan light.css ve dark.css, <link media> sorgusuyla koşullu olarak yüklenir. Başlangıçta, tüm tarayıcılar prefers-color-scheme (yukarıdaki kalıp kullanılarak algılanabilir) desteklemeyecek. Bu durumu, koşullu olarak eklenmiş bir <link rel="stylesheet"> öğesi aracılığıyla varsayılan light.css dosyasını minik bir satır içi komut dosyasına yükleyerek dinamik olarak ele alıyorum (ışık, rastgele bir seçimdir. Varsayılan yedek deneyimi karanlık da yapabilirdim). Biçimlendirilmemiş içeriğin bir anlığına gösterilmesini önlemek için, light.css yüklenene kadar sayfanın içeriğini gizliyorum.

<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 kalabiliyor ve açık veya koyu modda yapılan tüm özelleştirmeler diğer iki dosya olan dark.css ve light.css'de yapılıyor. Aşağıda, gerçek stillerden bir alıntı görebilirsiniz. Bu alıntı, genel fikri aktarmak için yeterli olacaktır. Temel olarak koyu renkli metin ve açık renkli arka plan ile açık renkli metin ve koyu renkli arka plan teması oluşturan -⁠-⁠color ve -⁠-⁠background-color olmak üzere iki değişken 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);
}

style.css içinde, bu değişkenleri body { … } kuralında kullanıyorum. :root CSS sahte 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çiciyle aynı olan bir seçici) aşağı doğru basamaklanırlar. Bu da genel CSS değişkenlerini bildirmem için uygundur.

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

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

Yukarıdaki kod örneğinde, muhtemelen boşlukla ayrılmış light dark değerine sahip bir özellik color-scheme görmüşsünüzdür.

Bu, tarayıcıya uygulamamın hangi renk temalarını desteklediğini bildirir ve tarayıcının, kullanıcı aracısı stil sayfasının özel varyantlarını etkinleştirmesine olanak tanır. Bu, örneğin tarayıcının form alanlarını koyu arka plan ve açık renkli metinle oluşturmasına, kaydırma çubuklarını ayarlamasına veya temaya duyarlı bir vurgu rengini etkinleştirmesine olanak tanımak için kullanışlıdır. color-scheme ile ilgili ayrıntılı bilgiler CSS Color Adjustment Module Level 1'de belirtilmiştir.

Geriye kalan her şey, sitemde önemli olan öğeler için CSS değişkenlerini tanımlamaktan ibarettir. Stilleri anlamsal olarak düzenlemek, koyu modda çalışırken çok yardımcı olur. Örneğin, -⁠-⁠highlight-yellow yerine değişkeni -⁠-⁠accent-color olarak adlandırmayı tercih edin. Çünkü "sarı" değişkeni, koyu modda aslında sarı olmayabilir veya bunun tam tersi de geçerli olabilir. Aşağıda, örneğimde kullandığım bazı değişkenlere dair 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ı uygulamaya döken eksiksiz örneği görebilirsiniz. Kullandığınız işletim sisteminin ayarlarında koyu modu etkinleştirip devre dışı bırakarak sayfanın nasıl tepki verdiğini görün.

Yükleme etkisi

Bu örnekle oynadığınızda dark.css ve light.css öğelerini neden medya sorguları aracılığıyla yüklediğimi görebilirsiniz. Koyu modu açıp kapatmayı deneyin ve sayfayı yeniden yükleyin: Şu anda eşleşmeyen belirli stil sayfaları, en düşük öncelikte olsa da yüklenmeye devam eder. Böylece, site için şu anda gerekli olan kaynaklarla hiçbir zaman rekabet etmezler.

Koyu mod değişikliklerine tepki verme

Diğer tüm medya sorgusu değişiklikleri gibi, koyu mod değişikliklerine de JavaScript üzerinden 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">'u değiştirmek için bu özelliği kullanabilirsiniz. Yukarıdaki tam örnekte bu durum gösterilmektedir. 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ğiyle medya sorgusuna göre rengi ayarlayabilirsiniz. Eşleşen ilk öğe 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 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 kısa sürede can sıkıcı hale gelebilir. Bu nedenle Chrome Geliştirici Araçları artık kullanıcının tercih ettiği renk şemasını yalnızca o anda görünür olan sekmeyi etkileyecek şekilde taklit 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ği emülasyonu seçeneğini değiştirin.

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

Puppeteer, Geliştirici Araçları Protokolü üzerinden Chrome veya Chromium'u kontrol etmek için üst düzey bir API sağlayan 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ı sunuyoruz. Bu komut dosyasını tek seferlik olarak çalıştırabilir veya alternatif olarak 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 mod ile ilgili en iyi uygulamalar

Tam beyazdan kaçının

Belki fark etmişsinizdir, saf beyaz kullanmıyorum. Bunun yerine, etrafındaki koyu içerikte parlamayı ve taşmayı önlemek için biraz daha koyu bir beyaz seçiyorum. rgb(250, 250, 250) gibi bir ifade işe yarar.

Fotoğrafik görüntüleri yeniden renklendirme ve koyulaştırma

Aşağıdaki iki ekran görüntüsünü karşılaştırdığınızda yalnızca temel temanın koyu-açık yerine açık-koyu olarak değişmediğini, aynı zamanda ana resmin de biraz farklı göründüğünü fark edeceksiniz. Kullanıcı araştırmam, ankete katılanların çoğunun karanlık mod etkin olduğunda biraz daha az canlı ve parlak görüntüleri tercih ettiğini gösterdi. Buna yeniden renklendirme diyorum.

Yeniden renklendirme, resimlerimde CSS filtresi kullanılarak yapılabilir. URL'lerinde .svg olmayan tüm resimlerle eşleşen bir CSS seçici kullanıyorum. Buradaki amaç, vektör grafiklere (simgeler) resimlerimden (fotoğraflar) farklı bir yeniden renklendirme işlemi uygulamaktır. Bu konuyla ilgili daha fazla bilgiyi sonraki paragrafta bulabilirsiniz. Daha sonra filtremi esnek bir şekilde değiştirebilmek için CSS değişkenini tekrar nasıl kullandığıma dikkat edin.

Yeniden renklendirme yalnızca koyu modda, yani dark.css etkin olduğunda gerektiğinden light.css içinde ilgili kurallar yoktur.

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

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

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

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

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

Vektörel grafikleri ve simgeleri ters çevirme

Benim durumumda <img> öğeleri aracılığıyla referans verdiğim simgeler olarak kullanılan vektör grafikler için farklı bir yeniden renklendirme yöntemi kullanıyorum. Araştırmalar, kullanıcıların fotoğraflarda ters çevirme özelliğini beğenmediğini gösterse de bu özellik çoğu simge için çok iyi çalışır. Normal ve :hover durumunda ters çevirme miktarını belirlemek için yine CSS değişkenlerini kullanıyorum.

Yine yalnızca dark.css içindeki simgeleri ters çevirdiğime ancak light.css içindeki simgeleri ters çevirmediğime ve kullanıcının seçtiği moda bağlı olarak simgenin biraz daha koyu veya biraz daha açık görünmesi için :hover öğesinin iki durumda farklı bir ters çevirme yoğunluğu aldığına 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 kullanın.

Satır içi SVG resimlerinde, ters çevirme filtreleri kullanmak yerine, bir öğenin currentColor CSS anahtar kelimesinden yararlanabilirsiniz. Bu anahtar kelime, öğenin color özelliğinin değerini temsil eder. Bu sayede, varsayılan olarak color değerini almayan özelliklerde bu değeri kullanabilirsiniz. currentColor, SVG fill veya stroke özelliklerinin değeri olarak kullanılıyorsa bunun yerine renk özelliğinin devralınan değerini alır. Daha da iyisi: Bu özellik <svg><use href="…"></svg> için de geçerlidir. Böylece ayrı kaynaklara sahip olabilirsiniz ve currentColor bağlam içinde uygulanmaya devam eder. Bu işlevin yalnızca satır içi veya <use href="…"> SVG'ler için çalıştığını, ancak bir resmin src olarak veya CSS aracılığıyla referans verilen SVG'ler için çalışmadığını lütfen unutmayın. Bu özelliği aşağıdaki demoda kullanırken görebilirsiniz.

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

Modlar arasında sorunsuz geçiş

color ve background-color, animasyonlu CSS özellikleri olduğundan koyu moddan açık moda veya tam tersi geçişler sorunsuz bir şekilde yapılabilir. Animasyon oluşturmak, iki özellik için iki transition bildirmek kadar kolaydır. Aşağıdaki örnekte genel fikir gösterilmektedir. Bu özelliği demoda canlı olarak deneyebilirsiniz.

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 modda sanat yönetimi

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

Koyu modda, belirli bir modda en iyi görüntünün ne olduğuna ve görüntülerin yeniden renklendirilmesinin yeterince iyi olup olmadığına tasarımcı karar verir. <picture> öğesiyle birlikte kullanıldığında, gösterilecek resmin <source> değeri media özelliğine bağlı olabilir. Aşağıdaki örnekte, koyu mod için Batı Yarımküre'yi, açık mod için ise Doğu Yarımküre'yi gösteriyorum. Tercih belirtilmediğinde ise diğer tüm durumlarda varsayılan olarak Doğu Yarımküre'yi gösteriyorum. Bu elbette yalnızca örnek amaçlıdır. Farkı görmek için cihazınızda koyu modu açıp 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 modun neden tercih edildiği bölümünde belirtildiği gibi, koyu mod çoğu kullanıcı için estetik bir tercihtir. Sonuç olarak, bazı kullanıcılar işletim sistemlerinin kullanıcı arayüzünü karanlık modda kullanmayı tercih etse de web sayfalarını alıştıkları şekilde görmeyi tercih edebilir. Harika bir model, başlangıçta tarayıcının prefers-color-scheme üzerinden gönderdiği sinyale uymak ancak daha sonra isteğe bağlı olarak kullanıcıların sistem düzeyindeki ayarlarını geçersiz kılmasına izin vermektir.

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

Elbette bu kodları kendiniz de 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 bileşen, 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 nasıl çalıştığı gösterilmektedir (Ayrıca, 🤫 yukarıdaki diğer örneklerin hepsine de sessizce 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 veya tam tersi şekilde kullanabilir.

Sonuçlar

Koyu modla çalışmak ve koyu modu desteklemek eğlencelidir ve yeni tasarım yolları açar. Bu, bazı ziyaretçileriniz için sitenizi kullanamamak ile mutlu bir kullanıcı olmak arasındaki farkı yaratabilir. Bazı tuzaklar olsa da dikkatli bir test yapmanız kesinlikle gerekir. Ancak karanlık mod, tüm kullanıcılarınızla ilgilendiğinizi göstermeniz için harika bir fırsattır. Bu yayında belirtilen en iyi uygulamalar ve <dark-mode-toggle> özel öğesi gibi yardımcılar, harika bir koyu mod deneyimi oluşturma konusunda size güven verecektir. Ne oluşturduğunuzu ve bu yayının faydalı olup olmadığını ya da yayını iyileştirmeye yönelik önerilerinizi Twitter'da bana bildirin. Okuduğunuz için teşekkür ederiz. 🌒

İlgili bağlantılar

prefers-color-scheme medya sorgusuyla ilgili 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 Durumu sayfası
• Chromium hatası
• CSS Color Adjustment Module Level 1 spec
• Meta etiketi ve CSS özelliği için CSS WG GitHub sorunu
• Meta etiketiyle ilgili HTML WHATWG GitHub sorunu

Genel koyu mod bağlantıları:

• Materyal Tasarım - Koyu Tema
• Web Inspector'da koyu mod
• WebKit'te Koyu Mod Desteği
• Apple Human Interface Guidelines—Dark Mode (Apple İnsan Arayüzü Kuralları - Koyu Mod)

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

• Koyu temanın "supported-color-schemes" özelliği aslında ne iş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'in çalışmasıdır. Rune, CSS Color Adjustment Module Level 1 spesifikasyonunun ortak editörüdür. 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'ın fikriyle ortaya çıkmıştır. Emilio Cobos Álvarez, beni doğru prefers-color-scheme algılama yöntemine yönlendirdi. Referans verilen SVG'ler ve currentColor ile ilgili ipucu, Timothy Hatcher tarafından gönderildi. Son olarak, bu makaledeki önerilerin şekillenmesine yardımcı olan çeşitli kullanıcı araştırmalarının birçok anonim katılımcısına teşekkür ederim.