Abartılıyor mu yoksa gerekli mi? Koyu mod hakkında her şeyi ve kullanıcılarınızın yararına olacak şekilde nasıl destekleyeceğinizi öğrenin.
Giriş
Koyu mod'dan önce koyu mod
Koyu modda tam bir döngüyü tamamladık. Kişisel bilgisayarların ilk dönemlerinde koyu mod bir tercih değil, bir gerçekti: Tek renkli CRT bilgisayar monitörleri, fosforlu bir ekrana elektron ışınları göndererek çalışıyordu ve ilk CRT'lerde kullanılan fosfor yeşildi. Metinler yeşil renkte gösterildiği ve ekranın geri kalanı siyah olduğu için bu modeller genellikle yeşil ekran olarak adlandırılırdı.
Daha sonra kullanıma sunulan renkli CRT'ler, kırmızı, yeşil ve mavi fosforlar kullanarak birden fazla renk gösteriyordu. Üç fosforu aynı anda etkinleştirerek beyaz rengi oluşturdu. Daha gelişmiş WYSIWYG masaüstü yayıncılığın ortaya çıkmasıyla sanal dokümanı fiziksel bir kağıda benzetme fikri popüler hale geldi.
Beyaz üzerine koyu tasarım trendi bu şekilde başladı ve bu trend, belge tabanlı ilk web sitelerine de taşındı. İlk tarayıcı olan WorldWideWeb (CSS henüz icat edilmemişti) web sayfalarını bu şekilde gösteriyordu. İlginç bir bilgi: Dünyanın ikinci tarayıcısı olan ve terminal tabanlı bir tarayıcı olan Line Mode Browser, koyu arka plan üzerinde yeşil renkteydi. Günümüzde web sayfaları ve web uygulamaları genellikle açık renkli bir arka plan üzerinde koyu renkli metinlerle tasarlanır. Bu temel varsayım, Chrome da dahil olmak üzere kullanıcı aracısı stil sayfalarında da sabit kodlanmıştır.
CRT'lerin devri çoktan kapandı. İçerik tüketimi ve oluşturma, arkadan aydınlatmalı LCD veya enerji tasarruflu AMOLED ekranlar kullanan mobil cihazlara kaydı. Daha küçük ve daha kolay taşınabilir bilgisayarlar, tabletler ve akıllı telefonlar yeni kullanım alışkanlıklarına yol açtı. Web'de gezinme, hobi amaçlı kodlama ve yüksek performanslı oyun oynama gibi boş zaman etkinlikleri genellikle mesai saatleri dışında, loş ortamlarda gerçekleştirilir. Hatta geceleri yatakta bile cihazlarını kullanıyorlar. Cihazlarını karanlıkta kullananların sayısı arttıkça koyu arka plan üzerine açık renkli metin kullanma fikri de popülerlik kazanıyor.
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 yormaması", ikinci en popüler yanıt ise "şık ve güzel olması" oluyor. Apple, Koyu Mod geliştirici belgelerinde açıkça şunları yazıyor: "Açık veya koyu görünümün etkinleştirilip etkinleştirilmeyeceği, ç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 ihtiyaç duyan ve bunu başka bir erişilebilirlik aracı olarak kullananlar da vardır. Örneğin, az gören kullanıcılar. Bu tür bir erişilebilirlik aracının ilk örneği, System 7'nin CloseView özelliğidir. Bu özellik, Beyaz Üzerine Siyah ve Siyah Üzerine Beyaz seçenekleri arasında geçiş yapmayı sağlıyordu. System 7 renkli ekranı desteklese de varsayılan kullanıcı arayüzü hâlâ siyah beyazdı.
Ters çevirmeye dayalı bu uygulamaların zayıf yönleri, renkler devreye girdiğinde ortaya çıktı. Szpiro ve arkadaşları tarafından yapılan, az gören kişilerin bilgisayar cihazlarına nasıl eriştiği ile ilgili kullanıcı araştırması, görüşülen tüm kullanıcıların ters çevrilmiş resimleri sevmediğini ancak çoğunun koyu arka plan üzerinde açık renkli metni tercih ettiğini gösterdi. Apple, bu kullanıcı tercihini Akıllı Ters Çevirme 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 türü de Dijital Göz Yorgunluğu olarak da bilinen Bilgisayar Görüşü Sendromu'dur.Bu sendrom, "bilgisayarların (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 birleşimi" olarak tanımlanır. Ergenlerin özellikle geceleri elektronik cihaz kullanmasının daha kısa uyku süresi, daha uzun uykuya dalma süresi ve daha fazla uyku eksikliği riskine yol açtığı öne sürülmüştür. Ayrıca, mavi ışığa maruz kalmanın sirkadiyen ritim ve uyku döngüsünün düzenlenmesinde rol oynadığı yaygın olarak bildirilmiştir. Rosenfield tarafından yapılan araştırmaya göre, düzensiz ışık ortamları uykusuzluğa yol açarak ruh halini ve görev performansını etkileyebilir. Bu olumsuz etkileri sınırlamak için iOS'un Night Shift veya Android'in Gece Işığı gibi özellikleriyle ekranın renk sıcaklığını ayarlayarak mavi ışığı azaltmak ve koyu temalar ya da koyu modlar aracılığıyla parlak ışıklardan veya düzensiz ışıklardan kaçınmak yardımcı olabilir.
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 olay incelemeleri, güç tasarrufunun %60'a kadar çıkabileceğini göstermiştir. Aşağıdaki videoda bu örnek olaylar ve uygulama başına 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 olduğunu açıkladığıma göre, şimdi bu modu nasıl destekleyebileceğinizi inceleyelim.
Koyu modu veya koyu temayı destekleyen işletim sistemlerinde genellikle ayarlarda bunu etkinleştirebileceğiniz bir seçenek bulunur. 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 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 anahtarı (ekran görüntüsü) olarak bulabilirsiniz. iOS 13'te ise ayarların Ekran ve Parlaklık bölümünde Görünüm'ü değiştirebilirsiniz (ekran görüntüsü).
prefers-color-scheme medya sorgusu
Başlamadan önce son bir teorik bilgi daha vereyim.
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 koşullu olarak uygulamak için ve HTML ile JavaScript gibi çeşitli bağlamlarda ve dillerde kullanılırlar.
Medya Sorguları Seviye 5,
kullanıcı tercihi medya özellikleri olarak adlandırılan özellikleri, yani
sitelerin kullanıcının tercih ettiği içerik görüntüleme yöntemini algılamasını sağlayan bir yöntemi sunar.
prefers-color-scheme medya özelliği, kullanıcının sayfanın 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 temalı (koyu arka plan üzerinde açık renkli metin) bir sayfayı tercih ettiğini sisteme bildirdiğini gösterir.
Koyu modu destekleme
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şiyorsa mevcut tarayıcının koyu modu destekleyip desteklemediğini kolayca kontrol edebilirsiniz.
Herhangi bir değer eklemediğime, yalnızca medya sorgusunun tek başına 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 makalenin yazıldığı tarih itibarıyla prefers-color-scheme, Chrome ve Edge'in 76, Firefox'un 67, Safari'nin macOS'te 12.1 ve iOS'te 13 sürümünden itibaren hem masaüstü hem de mobil cihazlarda (kullanılabildiği yerlerde) desteklenmektedir.
Diğer tüm tarayıcılar için Can I use destek tabloları belgesini inceleyebilirsiniz.
İstek sırasında kullanıcının tercihleri hakkında bilgi edinme
Sec-CH-Prefers-Color-Scheme istemci ipucu başlığı, sitelerin kullanıcının renk şeması tercihlerini isteğe bağlı olarak istek sırasında almasına olanak tanır. Böylece sunucular doğru CSS'yi satır içine alabilir ve yanlış renk temasının görünmesini ö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 da yalnızca bir tane olabilir: koyu veya açık, ancak asla ikisi birden değil. Bundan neden bahsediyorum? Çünkü bu durum, yükleme stratejisini etkiler. 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 örnek uygulamanın CSS'sini, aşağıdaki önerileri uygulamada gösteren üç bölüme ayırdım. Böylece kritik olmayan CSS'yi erteledim:
style.css, sitede genel olarak kullanılan genel kuralları içerir.- 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.
Strateji yükleniyor
Son ikisi 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 özelliğini desteklemeyecektir
(yukarıdaki kalıp kullanılarak algılanabilir).
Bu sorunu, varsayılan light.css dosyasını
küçük bir satır içi komut dosyasında koşullu olarak eklenen bir <link rel="stylesheet"> öğesi aracılığıyla yükleyerek dinamik olarak çözüyorum
(açık renk isteğe bağlı bir seçimdir, varsayılan yedek deneyimi koyu renk de 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 maksimum düzeyde yararlanıyorum.
Bu sayede genel style.css dosyam genel kalıyor
ve tüm açık veya koyu mod özelleştirmeleri diğer iki dosyada (dark.css ve light.css) gerçekleşiyor.
Aşağıda, gerçek stillerden bir alıntı görebilirsiniz. Bu alıntı, genel fikri anlamanız için yeterli olacaktır.
Temelde açık renk üzerine koyu ve koyu renk üzerine açık temel temalar oluşturan --color ve --background-color adlı 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 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çiciyle aynı olan bir seçici) basamaklı olarak aşağı doğru uygulanırlar. Bu da genel CSS değişkenlerini bildirmeme yardımcı olur.
/* 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ği 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ı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ır.
color-scheme ile ilgili ayrıntılar CSS Color Adjustment Module Level 1'de belirtilmiştir.
Geri kalan her şey, sitemde önemli olan şeyler için CSS değişkenleri tanımlamaktan ibaret.
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ırabilirsiniz. Çünkü "sarı", koyu modda sarı olmayabilir veya tam tersi geçerli olabilir.
Aşağıda, örneğimde kullandığım diğer değişkenlerden bazıları 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 yerleştirilmiş demoda, yukarıdaki kavramları uygulamaya koyan eksiksiz örneği görebilirsiniz. Kullandığınız işletim sisteminin ayarlarında koyu modu açıp kapatarak sayfanın nasıl tepki verdiğini inceleyin.
Yükleme etkisi
Bu örnekle denemeler yaptığınızda dark.css ve light.css öğelerimi neden medya sorguları aracılığıyla yüklediğimi görebilirsiniz.
Koyu modu açıp kapatmayı ve sayfayı yeniden yüklemeyi deneyin:
Şu anda eşleşmeyen belirli stil sayfaları hâlâ yüklenir ancak en düşük önceliğe sahiptir.
Böylece, sitenin şu anda ihtiyaç duyduğu kaynaklarla hiçbir zaman rekabet etmezler.
prefers-color-scheme özelliğini desteklemeyen bir tarayıcıda varsayılan açık modda olan site, koyu mod CSS'sini en düşük öncelikle yükler.Koyu mod değişikliklerine tepki verme
Diğer tüm medya sorgusu değişiklikleri 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"> öğesini değiştirmek için bu özelliği kullanabilirsiniz.
Yukarıdaki tam örnek, bu özelliğin nasıl çalıştığını gösterir. 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 kural seçilir. Örneğin, açık mod için bir renk,
koyu mod için başka bir renk kullanabilirsiniz. Bu makalenin yazıldığı tarih itibarıyla, 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" />
Koyu modu hata ayıklama ve test etme
Geliştirici Araçları'nda prefers-color-scheme emülasyonu
İşletim sisteminin tamamının renk şemasını değiştirmek can sıkıcı olabilir.
Bu nedenle Chrome Geliştirici Araçları, kullanıcının tercih ettiği renk şemasını
yalnızca görünür sekmeyi etkileyecek şekilde taklit etmenize olanak tanır.
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ğinin emülasyonunu yap seçeneğini değiştirin.
Puppeteer ile prefers-color-scheme sayfasının ekran görüntüsünü alma
Puppeteer, Geliştirici Araçları 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 modda ekran görüntülerini oluşturmanıza olanak tanıyan bir Puppeteer komut dosyası sunuyoruz.
Bu komut dosyasını tek seferlik çalıştırabilir veya 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
Bembeyaz arka planlardan kaçının.
Fark etmiş olabileceğiniz küçük bir ayrıntı, saf beyaz kullanmamamdır.
Bunun yerine, çevredeki koyu renkli içeriklerin parlamasını ve taşmasını önlemek için biraz daha koyu bir beyaz seçiyorum. rgb(250, 250, 250) gibi bir ifade uygun olabilir.
Fotoğraf görüntülerini 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 açık renk üzerine koyu yerine koyu renk üzerine açık olarak değişmediğini, aynı zamanda hero resmin de biraz farklı göründüğünü fark edeceksiniz. Kullanıcı araştırmam, ankete katılanların çoğunun koyu mod etkinken biraz daha az canlı ve parlak resimleri tercih ettiğini gösterdi. Buna yeniden renklendirme diyorum.
Yeniden renklendirme, resimlerimde bir CSS filtresi aracılığıyla yapılabilir.
URL'sinde .svg bulunmayan tüm resimlerle eşleşen bir CSS seçici kullanıyorum. Buradaki amaç, vektör grafiklerine (simgeler) resimlerimden (fotoğraflar) farklı bir yeniden renklendirme işlemi uygulayabilmek. Bu konu hakkında daha fazla bilgiyi sonraki paragrafta bulabilirsiniz.
Filtremi daha sonra esnek bir şekilde değiştirebilmek için yine bir CSS değişkeni kullandığıma dikkat edin.
Yeniden renklendirme yalnızca koyu modda (dark.css etkin olduğunda) gerektiğinden light.css içinde buna karşılık gelen bir kural yoktur.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
JavaScript ile koyu mod yeniden renklendirme yoğunluklarını özelleştirme
Herkes aynı değildir ve insanların koyu modla ilgili farklı ihtiyaçları vardır.
Yukarıda açıklanan yeniden renklendirme yöntemini kullanarak gri tonlama yoğunluğunu JavaScript aracılığıyla değiştirebileceğim bir kullanıcı tercihi haline getirebilirim. Ayrıca 0% değerini ayarlayarak yeniden renklendirmeyi tamamen devre dışı bırakabilirim.
document.documentElement, belgenin kök öğesine referans sağlar. Bu, :root CSS sözde sınıfıyla referans verebileceğim öğeyle aynıdır.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Vektör 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 çevirmeyi sevmediğini gösterse de bu yöntem çoğu simgede çok iyi sonuç verir.
Normal ve :hover durumunda ters çevirme miktarını belirlemek için yine CSS değişkenlerini kullanıyorum.
Yine simgeleri yalnızca dark.css modunda ters çevirdiğime, light.css modunda ters çevirmediğ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 değerinin 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 resimler için ters çevirme filtreleri kullanmak yerine, bir öğenin color özelliğinin değerini temsil eden currentColor CSS anahtar kelimesinden yararlanabilirsiniz.
Bu sayede, varsayılan olarak color değerini almayan mülklerde bu değeri kullanabilirsiniz.
currentColor, SVG fill veya stroke özelliklerinin değeri olarak kullanıldığında, değerini renk özelliğinin devralınan değerinden 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 özelliğin yalnızca satır içi veya <use href="…"> SVG'lerde çalıştığını, bir resmin src öğesi olarak veya CSS aracılığıyla referans verilen SVG'lerde çalışmadığını 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 sorunsuz geçişler
Hem color hem de background-color animasyonlu CSS özellikleri olduğundan, koyu moddan açık moda veya tam tersi geçişler daha sorunsuz hale getirilebilir.
Animasyonu oluşturmak, iki özellik için iki transition tanımlamak kadar kolaydır.
Aşağıdaki örnekte genel fikir gösterilmektedir. Demo'da 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
Yükleme performansı nedeniyle genel olarak <link> öğelerinin media özelliğinde (stil sayfalarında satır içi yerine) yalnızca prefers-color-scheme ile çalışmanızı önersem de doğrudan HTML kodunuzda satır içi olarak prefers-color-scheme ile çalışmak isteyebileceğiniz durumlar da vardır.
Sanat yönetimi de bu durumlardan biridir.
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 canlandırdığı, ö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 görüntünün ne olduğuna ve görüntülerin yeniden renklendirilmesinin yeterince iyi olup olmadığına karar vermek tasarımcının takdirine bağlıdır.
<picture> öğesiyle birlikte kullanıldığında, gösterilecek resmin <source>, 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 gösteriyorum.
Herhangi bir tercih belirtilmediğinde ise varsayılan olarak Doğu yarımküre gösteriliyor.
Bu, elbette yalnızca ö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 tercihtir.
Bu nedenle, bazı kullanıcılar işletim sistemi kullanıcı arayüzlerini koyu modda kullanmak istese de web sayfalarını her zamanki gibi görmeyi tercih edebilir.
En iyi yöntem, başlangıçta tarayıcının prefers-color-scheme üzerinden gönderdiği sinyale uymak, ardından 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
Bunun için kodu kendiniz de yazabilirsiniz ancak bu amaçla 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>
<dark-mode-toggle> (açık modda).
<dark-mode-toggle>.
Aşağıdaki demoda sağ üst köşedeki koyu mod kontrollerini tıklamayı veya 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 tutarken sitenizi açık modda kullanabilir veya tam tersini yapabilir.
Sonuçlar
Koyu modla çalışmak ve koyu modu desteklemek eğlencelidir ve yeni tasarım yolları açar.
Bazı ziyaretçileriniz için bu, sitenizi kullanamamak ile mutlu bir kullanıcı olmak arasındaki farkı yaratabilir.
Bazı zorluklar vardır ve dikkatli bir şekilde test edilmesi kesinlikle gereklidir ancak koyu mod, tüm kullanıcılarınızı önemsediğinizi göstermek için kesinlikle harika 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 size güven verecektir.
Neler oluşturduğunuzu ve bu yayının faydalı olup olmadığını veya yayını iyileştirmeye yönelik önerilerinizi Twitter'da bana bildirin.
Okuduğunuz için teşekkürler. 🌒
İlgili bağlantılar
prefers-color-scheme medya sorgusu için kaynaklar:
color-scheme meta etiketi ve CSS özelliğiyle ilgili kaynaklar:
color-schemeCSS özelliği ve meta etiketi- Chrome Platform Statüsü sayfası
- Chromium hatası
- CSS Color Adjustment Module Level 1 spesifikasyonu
- Meta etiketi 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 Denetçisi'nde koyu mod
- WebKit'te koyu mod desteği
- Apple Human Interface Guidelines—Dark Mode
Bu yayınla ilgili arka plan araştırma makaleleri:
- Koyu modun "supported-color-schemes" özelliği aslında ne işe yarar? 🤔
- Karanlık modda kullanın. 🌚 Belki…
- Koyu Mod için Yeniden Renklendirme
Onaylar
prefers-color-scheme medya özelliği, color-scheme CSS özelliği ve ilgili meta etiket, 👏 Rune Lillesveen'in uygulama çalışmasıdır.
Rune, CSS Color Adjustment Module Level 1 spesifikasyonunun da ortak editörlerinden biridir.
Bu makaleyi kapsamlı bir şekilde inceledikleri için Lukasz Zbylut, Rowan Merewood, Chirag Desai ve Rob Dodson'a 🙏 teşekkür ederiz.
Yükleme stratejisi, Jake Archibald'ın fikridir.
Emilio Cobos Álvarez, doğru prefers-color-scheme algılama yöntemini gösterdi.
Referans verilen SVG'ler ve currentColor ile ilgili ipucu, Timothy Hatcher'dan alınmıştır.
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.