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
![Yeşil ekran bilgisayar monitörü](https://web.dev/static/articles/prefers-color-scheme/image/green-screen-computer-mon-01027d880d7ee.jpg?authuser=6&hl=tr)
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.
![Koyu beyaz renkli kelime işleme](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-word-processi-c815d99e74013.jpg?authuser=6&hl=tr)
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.
![WorldWideWeb tarayıcısında koyu beyaz web sayfası](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-webpage-the-b32b5ae575bbe.png?authuser=6&hl=tr)
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.
![Yatakta uzanırken kullanılan akıllı telefon](https://web.dev/static/articles/prefers-color-scheme/image/smartphone-used-while-lyi-d0cbc01823ee4.jpg?authuser=6&hl=tr)
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."
![CloseView özelliğini kullanarak Mac OS System 7'de](https://web.dev/static/articles/prefers-color-scheme/image/closeview-mac-os-system-d5554c867b6af.png?authuser=6&hl=tr)
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.
![Android Q koyu mod ayarları](https://web.dev/static/articles/prefers-color-scheme/image/android-q-dark-mode-setti-43e0e230e78da.png?authuser=6&hl=tr)
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.
![Açık modda koyu mod CSS'sinin en düşük öncelikli olarak nasıl yüklendiğini gösteren ağ yükleme diyagramı](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-012ca50547d95.png?authuser=6&hl=tr)
![Koyu modda açık moddaki CSS'nin en düşük öncelikli olarak nasıl yüklendiğini gösteren ağ yükleme diyagramı](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-2c75aa35a227f.png?authuser=6&hl=tr)
![Varsayılan açık modda koyu mod CSS'sinin en düşük öncelikli olarak nasıl yüklendiğini gösteren ağ yükleme şeması](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-f53f63ae3c9fc.png?authuser=6&hl=tr)
prefers-color-scheme
'ı desteklemeyen bir tarayıcıda varsayılan açık moddaki site, koyu mod CSS'sini en düşük öncelikli olarak yüklüyor.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.
![Chrome Geliştirici Araçları'nın Oluşturma sekmesinde bulunan "CSS medya özelliğini emüle et" seçeneğinin ekran görüntüsü](https://web.dev/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?authuser=6&hl=tr)
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.
![Koyu modda biraz koyulaşmış lokomotif resim.](https://web.dev/static/articles/prefers-color-scheme/image/hero-image-slightly-darke-a5b441df726e3.png?authuser=6&hl=tr)
![Açık modda normal lokomotif resim.](https://web.dev/static/articles/prefers-color-scheme/image/regular-hero-image-light-28d9151fd34c3.png?authuser=6&hl=tr)
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.
![Koyu modda simgeler ters çevrilir.](https://web.dev/static/articles/prefers-color-scheme/image/icons-are-inverted-dark-d78f9971c6dd6.png?authuser=6&hl=tr)
![Açık moddaki normal simgeler.](https://web.dev/static/articles/prefers-color-scheme/image/regular-icons-light-mode-bcabc11023a1e.png?authuser=6&hl=tr)
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çık modda koyu modu açıp kapatın.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-4a5dd3fe9675d.png?authuser=6&hl=tr)
<dark-mode-toggle>
.
![açık modda koyu modu açıp kapatın.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-f0b507bcb5df2.png?authuser=6&hl=tr)
<dark-mode-toggle>
koyu modda.
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:
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.