Aşırı heyecan veya ihtiyaç mı duyuyorsunuz? Koyu mod ve bu modu kullanıcılarınızın yararına nasıl destekleyeceğinizi öğrenin
Giriş
Koyu Mod'dan önce koyu mod
Koyu mod ile tam döngüye girdik. Kişisel bilişimin başlangıcında, koyu mod bir tercih meselesi değildi. ama önemli bir nokta: Elektron ışınlarıyla çalışan tek renkli CRT bilgisayar monitörleri 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 ekranlara dikkat edin.
Sonradan kullanıma sunulan Renk CRT'leri farklı renklerde kullanarak gerçekleşebilir. Üç fosforu da aynı anda etkinleştirerek beyaz yarattılar. Daha sofistike WYSIWYG'nin ortaya çıkmasıyla birlikte masaüstü yayıncılık, sanal dokümanı fiziksel bir kağıt parçasına benzetme fikri popülerlik kazandı.
dark-on-white burada bir tasarım trendi olarak başladı. ve bu eğilim dünya genelinde ilk aşamalarda doküman tabanlı web'de kullanılabilir. İlk tarayıcı, WorldWideWeb (Unutmayın, Henüz icat edilmemiştir). web sayfalarını bu şekilde görüntüledi. İlginç bir bilgi: Dünyanın ikinci tarayıcısı, Terminal tabanlı tarayıcı olan Satır Modu Tarayıcı koyu üzerine yeşil. Günümüzde web sayfaları ve web uygulamaları genellikle koyu renk metinle tasarlanır açık renkli bir arka planda, kullanıcı aracısı stil sayfalarına da sabit kodlu bir temel varsayımıyla ilişkilidir. Chrome'un işletim sistemi.
CRT'lerin olduğu günler geride kaldı. İçerik tüketimi ve üretimi mobil cihazlara kaydı arkadan aydınlatmalı LCD kullanan ya da enerji tasarrufu sağlayan AMOLED ekranlar kullanın. Daha küçük ve daha 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 ileri teknoloji oyun gibi boş zaman aktiviteleri mesai saatlerinde, genelde loş ortamlarda ortaya çıkar. Kullanıcılar, geceleri de yataklarının keyfini çıkarıyor. Karanlıkta cihaz kullanan kişilerin sayısı light-on-dark etkinliğinin köklerine geri gitme fikri daha popüler hale geliyor.
Neden koyu mod?
Estetik amaçlı olarak koyu mod
Kullanıcılar sorulduğunda koyu modu neden sevdiklerini veya istediklerini en popüler cevap "göze daha kolay geliyor" ve ardından "bu zarif ve güzel" ifadesi yer alır. Apple Koyu Mod geliştirici belgeleri açıkça yazıyor: "Açık veya koyu görünümü etkinleştirme seçimi çoğu kullanıcı açısından estetik bir çözüm olduğunu söylüyor ve ortam aydınlatma koşullarıyla alakalı olmayabilir."
ziyaret edin.
Erişilebilirlik aracı olarak koyu mod
Koyu moda ihtiyaç duyan ve bu modu başka bir erişilebilirlik aracı olarak kullananlar da var. Örneğin, az gören kullanıcılar için. Böyle bir erişilebilirlik aracının ilk olarak Sistem 7'nin açma/kapatma düğmesini içeren CloseView özelliği, Beyaz üzerine Siyah ve Siyah üzerine Beyaz. Sistem 7'de renk desteklense de varsayılan kullanıcı arayüzü siyah beyaz olmaya devam ediyordu.
Ters çevirmeye dayalı bu uygulamalar, renklerin tanıtılmasından sonra zayıf yönlerini ortaya koydu. Szpiro ve diğerleri tarafından, az görenler için bilgi işlem cihazlarına nasıl erişiyorlar? tüm katılımcıların ters çevrilmiş resimleri beğenmediğini, ancak pek çok kişi koyu arka plan üzerinde açık renkli metin tercih eder. Apple, bu kullanıcı tercihini Akıllı Ters çevirme Bu, resimler, medya ve öğeler hariç, ekrandaki renkleri tersine çevirir. ve koyu renk stilleri kullanan bazı uygulamalar.
Az görmenin özel bir biçimi, dijital göz yorgunluğu olarak da bilinen Bilgisayar Görme Sendromudur. tanımlı "bilgisayar kullanımıyla ilişkili göz ve görme sorunlarının birleşimi (masaüstü, dizüstü ve tablet bilgisayarlar dahil) ve diğer elektronik ekranlar (ör. akıllı telefonlar ve elektronik okuma cihazları)." Önerildiğim gibi ergenlerin özellikle geceleri elektronik cihaz kullanmasının uyku süresinin kısalması riskini artırır. daha uzun süre gecikme ve uyku eksikliğinde artış. Buna ek olarak, mavi ışığa maruz kalma uygulaması çoğu zaman bildirildi ve proje yönetiminin hayata geçirilmesinde sirkadiyen ritmi ve uyku döngüsünü etkileyebilir. ve düzensiz ışıklı ortamlar uykusuzluğa neden olabilir, kullanıcıların ruh hali ve görev performansını etkileyebilir. Rosenfield tarafından yapılan araştırma. Bu olumsuz etkileri sınırlandırmak için ekran renk sıcaklığını ayarlayarak mavi ışığı azaltın iOS' gibi özellikler sayesinde Night Shift veya Android'in Gece Işığı işe yarayabilir, koyu temalar veya koyu modlar kullanarak genel olarak parlak ışıklardan ya da düzensiz ışıklardan kaçınmayı içerir.
AMOLED ekranlarda koyu mod güç tasarrufu
Son olarak, koyu modun şu cihazlarda çok enerji tasarrufu yaptığı bilinmektedir AMOLED ekranlar Popüler Google uygulamalarına odaklanan Android örnek olayları . 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ğunun arka planını nasıl destekleyebileceğinize bakalım.
Koyu modu veya koyu temayı destekleyen işletim sistemleri genellikle ayarlarda bir yerde etkinleştirme seçeneği bulunuyor. macOS X'te bu, sistem tercihinin Genel bölümünde Görünüm (ekran görüntüsü) olarak bulunur. Windows 10'da bu seçenek Renkler bölümündedir ve Renkinizi seçin (ekran görüntüsü) olarak adlandırılır. Android Q'da bu seçeneği Ekran'ın altında Koyu Tema açma/kapatma anahtarı (ekran görüntüsü) olarak bulabilirsiniz. iOS 13'te ise Görünüm'ü Ekran ve Parlaklık (ekran görüntüsü) bölümüne bakın.
prefers-color-scheme medya sorgusu
Başlamadan önce son bir teori.
Medya sorguları
yazarların, 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.
belgenin oluşturulmasından bağımsızdır.
CSS @media kuralında kullanılan etiketler, bir dokümana koşullu olarak stil uygulamak için kullanılır.
ve HTML ve JavaScript gibi diğer çeşitli bağlam ve dillerde kullanılabilir.
Medya Sorguları Düzey 5
Kullanıcı tercihine dayalı medya özellikleri, yani
sitelerin, kullanıcının içerik görüntülemek için tercih ettiği yöntemi tespit etmesini sağlayan bir yöntemdir.
prefers-color-scheme
algılamak için kullanılır
Kullanıcı, sayfanın açık veya koyu renk temasını kullanmasını istediyse.
Aşağıdaki değerlerle çalışır:
light: Kullanıcının sisteme, açık temaya sahip bir sayfayı tercih ettiğini bildirdiğini belirtir (açık arka plan üzerinde koyu renk metin).dark: Kullanıcının sisteme, koyu temaya sahip bir sayfayı tercih ettiğini bildirdiğini belirtir (koyu arka plan üzerinde açık renk metin) kullanabilirsiniz.
Koyu mod destekleniyor
Tarayıcının koyu modu destekleyip desteklemediğini öğrenme
Koyu mod bir medya sorgusu aracılığıyla bildirildiğinden, mevcut tarayıcının
prefers-color-scheme medya sorgusunun eşleşip eşleşmediğini kontrol ederek koyu modu destekler.
Herhangi bir değer eklemediğime, bunun yerine 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');
}
prefers-color-scheme, yazıldığı sırada hem masaüstü bilgisayarlarda hem de mobil cihazlarda (kullanılabiliyorsa) desteklenir
76'dan itibaren Chrome ve Edge tarafından, sürüm 67'den itibaren Firefox
ve Safari'de macOS'te sürüm 12.1 ve iOS'te sürüm 13'ten itibaren kullanılabilir.
Diğer tüm tarayıcılar için Destek tablolarını kullanabilir miyim? başlıklı makaleye göz atabilirsiniz.
İ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 istek sırasında isteğe bağlı olarak almasına olanak tanır.
Böylece sunucuların doğru CSS'yi satır içine alarak yanlış renk temasının yanıp sönmesini önleyebilir.
Uygulamada koyu mod
Son olarak, uygulamada koyu modu desteklemenin nasıl bir şey olduğuna bakalım. Tıpkı Highlander'da olduğu gibi, koyu modla yalnızca bir tane olabilir: koyu veya açık ama ikisi birden olamaz! Bundan neden bahsediyorum? Bu durumun yükleme stratejisini etkilemesi beklenir. Lütfen kullanıcıları kritik oluşturma yolunda CSS indirmeye zorlamayın bu ayar, şu anda kullanmadıkları bir modla ilgili. Bu nedenle, yükleme hızını optimize etmek amacıyla örnek uygulama için CSS'mi böldüm pratikte aşağıdaki önerileri gösteren kritik olmayan CSS'leri ertelemek için üç bölüme ayrılır:
- Sitede evrensel olarak kullanılan genel kurallar içeren
style.css. dark.cssyalnızca koyu mod için gereken kuralları içerir.light.cssyalnızca açık mod için gereken kuralları içerir.
Yükleme stratejisi
İkincisi, light.css ve dark.css,
<link media> sorgusu ile koşullu olarak yüklenir.
İlk aşamada,
prefers-color-scheme tüm tarayıcılar tarafından desteklenmez
(yukarıdaki kalıp kullanılarak algılanabilir),
Ben varsayılan light.css dosyasını yükleyerek dinamik bir şekilde
küçük satır içi komut dosyasına koşullu olarak eklenmiş <link rel="stylesheet"> öğesi aracılığıyla
(ışık rastgele bir seçimdir. Karanlık modu da varsayılan yedek deneyim olarak ayarlayabilirdim).
Stilsiz içeriğin yanıp sönmesini ö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
genel style.css anahtar kelimelerimin, genel ve
Ayrıca, tüm açık veya koyu mod özelleştirmesi diğer iki dosyada da gerçekleşir: dark.css ve light.css.
Aşağıda gerçek stillerden bir alıntı görebilirsiniz, ancak bu alıntı, genel fikri aktarmaya yeterli olacaktır.
--color ve --background-color olmak üzere iki değişken tanımlıyorum.
light-on-light ve light-on-koyu temel teması oluşturan öğeler de bulunuyor.
/* 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 de bu değişkenleri body { … } kuralında kullanıyorum.
:root gerçek olmayan CSS sınıfı:
HTML'de <html> öğesini temsil eden seçici
ve html seçicisi ile aynıdır, tek fark şudur:
daha yüksek... kademeli olarak aşağı iniyor. Bu da genel CSS değişkenlerini bildirmeme yardımcı oluyor.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
Yukarıdaki kod örneğinde muhtemelen bir mülk
color-scheme
light dark değerini boşlukla ayrılmış olarak yazın.
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ı oluşturmasına izin vermek için yararlıdır.
bir arka plana ve açık renkli metinlere sahip olacak şekilde, kaydırma çubuklarını
veya temaya duyarlı bir vurgu rengi etkinleştirebilirsiniz.
color-scheme ile ilgili tam ayrıntılar şurada belirtilmiştir:
CSS Renk Düzenleme Modülü Düzeyi 1.
Diğer her şey CSS değişkenlerini tanımlamakla
bir şeyler bulmak için mükemmeldir.
Stilleri anlamsal olarak düzenlemek, koyu modla çalışırken çok yardımcı olur.
Örneğin, --highlight-yellow yerine değişkeni çağırmayı düşünebilirsiniz
--accent-color, "sarı" koyu modda sarı olmayabilir.
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ştirmesinde, yukarıdaki kavramların pratiğe aktarıldığı tam örneği 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örebilirsiniz.
Yükleme etkisi
Bu örnekle oynadığınızda,
dark.css ve light.css videolarımı neden medya sorguları aracılığıyla yüklediğimi öğrendim.
Koyu modu açıp kapatmayı deneyin ve sayfayı yeniden yükleyin:
o anda eşleşmeyen belirli stil sayfaları yüklenmeye devam eder ancak en düşük önceliğe sahip olur.
Böylece, sitenin ihtiyaç duyduğu kaynaklarla asla rekabete girmezler.
prefers-color-scheme özelliğini desteklemeyen bir tarayıcıda varsayılan açık modda, koyu mod CSS'sini en düşük öncelikli olarak yüklüyor.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, bunu, Dinamik Arama Ağı Reklamları için
site simgesi
veya
<meta name="theme-color">
Chrome'daki URL çubuğunun rengini belirler.
Yukarıdaki tam örnek bunu uygulamalı olarak göstermektedir.
Tema rengi ve site simgesi değişikliklerini görmek için
ayrı bir sekmede görüntüleyebilirsiniz.
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, kullandığınız tarayıcıya bağlı olarak
meta tema renk öğesinin media özelliğine sahip medya sorgusu. İlgili içeriği oluşturmak için kullanılan
eşleşen ilk öğe seçilir. Örneğin, tek bir renk kullanarak
açık mod, diğeri ise koyu mod için. Yazma sırasında
bunları manifest dosyanızda tanımlayın. w3c/manifest#975 GitHub'a bakın
sorun.
<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
Geliştirici Araçları'nda prefers-color-scheme emülasyonu
Tüm işletim sisteminin renk şemasını değiştirmek
çok çabuk sinir bozucu olabiliyor.
Böylece Chrome Geliştirici Araçları artık kullanıcının tercih ettiği renk şemasını emüle etmenize olanak tanıyor
yalnızca o anda görünür olan sekmeyi etkileyecek şekilde
Komut Menüsü'nü açın, Rendering yazmaya başlayın, Show Rendering komutunu çalıştırın ve ardından CSS medya özelliği emülasyonu tercihler-color-scheme seçeneğini değiştirin.
Puppeteer ile prefers-color-scheme ekran görüntüsü alınıyor
Puppeteer, bir Node.js kitaplığıdır
Chrome'u veya Chromium'u kontrol etmek için üst düzey bir API sağlayan
Geliştirici Araçları Protokolü.
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ı.
Bu komut dosyasını bir defaya mahsus olarak çalıştırabilir veya
Sürekli Entegrasyon (CI) test paketi.
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 beyaz kullanmaktan kaçının
Fark etmiş olabileceğiniz küçük bir ayrıntı, saf beyaz kullanmadığıdır.
Bunun yerine, etrafındaki karanlık içeriğin parlamasını ve kanamasını önlemek için
Biraz daha koyu bir beyaz seçiyorum. rgb(250, 250, 250) gibi bir yöntem işe yarar.
Fotoğrafik resimleri yeniden renklendirme ve koyulaştırma
Aşağıdaki iki ekran görüntüsünü karşılaştırırsanız sadece temel temanın değişmediğini de fark edeceksiniz. dark-on-light yerine ışık-koyu arasında seçim yapmak istiyor. Ancak hero resim de biraz farklı görünüyor. Kullanıcı araştırmam ankete katılan kullanıcıların çoğunluğunun koyu mod etkin olduğunda biraz daha az canlı ve parlak görüntüleri tercih eder. Buna yeniden renklendirme diyorum.
Resimlerimdeki bir CSS filtresinden yeniden renklendirme yapılabilir.
URL'sinde .svg içermeyen tüm resimlerle eşleşen bir CSS seçici kullanıyorum
çünkü vektör grafiklerine (simgeler) farklı bir yeniden renklendirme işlemi uygulayabileceğim.
daha fazla bilgiye bir sonraki paragrafta ulaşabilirsiniz.
Yine bir CSS değişkeni kullandığımı unutmayın,
Öyleyse daha sonra filtremi esnek bir şekilde değiştirebiliyorum.
Yeniden renklendirme yalnızca koyu modda (dark.css etkin durumdayken) gerektiğinden
light.css bölgesinde karşılık gelen kural yok.
/* 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 herkesin farklı koyu mod ihtiyaçları vardır.
Yukarıda açıklanan yeniden renklendirme yöntemini izleyerek
Gri tonlama yoğunluğunu kolayca yapabileceğim bir kullanıcı tercihi
JavaScript aracılığıyla değiştirebilirsiniz.
ve 0% değerini ayarlayarak yeniden renklendirmeyi tamamen devre dışı bırakabilirim.
document.documentElement
dokümanın kök öğesine bir referans sağlar.
Yani, aynı öğe için başvurabileceğim
:root gerçek olmayan CSS sınıfı.
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 belirttiğim simgeler olarak kullanılan vektör grafikleri için
ve farklı bir yeniden renklendirme yöntemi kullanın.
Araştırmalar
pek çok simgede iyi sonuç verir.
Ters çevirme miktarını belirlemek için yine CSS değişkenleri kullanıyorum
normal ve :hover durumundadır.
Yine yalnızca dark.css içindeki simgeleri ters çevirip light.css dilinde değil, :hover içinde nasıl çevirdiğimi ve :hover
simgenin görünmesi için iki durumda farklı bir ters çevirme yoğunluğu alır
kullanıcının seçtiği moda bağlı olarak biraz daha koyu veya biraz daha parlak olur.
/* 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 resimleri için ters çevirme filtreleri kullanmak yerine
currentColor
Bir öğenin color özelliğinin değerini temsil eden CSS anahtar kelimesi.
Bu sayede color değerini, varsayılan olarak almayan mülklerde kullanabilirsiniz.
SVG'nin değeri olarak currentColor kullanılması uygundur.
fill veya stroke özellikleri,
değerini, renk özelliğinin devralınan değerinden alır.
Daha da iyisi: Bu yöntem diğer
<svg><use href="…"></svg>
ayrı kaynaklara sahip olmak için
currentColor bağlam içinde uygulanmaya devam edecek.
Bunun yalnızca satır içi veya <use href="…"> SVG'lerde çalıştığını lütfen unutmayın.
ancak bir resmin src öğesi veya bir şekilde CSS aracılığıyla referans verilen SVG'ler hariçtir.
Bunun aşağıdaki demoda uygulandığını görebilirsiniz.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
Modlar arasında yumuşak geçişler
Koyu moddan açık moda (veya tam tersi) geçiş,
hem color hem de background-color
animasyona uygun CSS özellikleri kullanabilirsiniz.
Animasyonu oluşturmak, iki özellik için iki transition tanımlamak kadar kolaydır.
Aşağıdaki örnek, fikrin genelini gösterir. Bunu Google Cloud'da
demo.
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ıyla ilgili nedenlerle yalnızca prefers-color-scheme ile çalışmanızı öneririm
<link> öğelerinin media özelliğinde (stil sayfalarında satır içi yerine)
prefers-color-scheme ile doğrudan HTML kodunuzda satır içinde çalışmak isteyebileceğiniz durumlar vardır.
Sanat eseri yönetimi böyle bir durumu temsil eder.
Web'de sanat yönetimi, bir sayfanın genel
görsel görünümüyle ve görsel olarak
nasıl iletişim kurduğunu ele alır.
ruh hallerini harekete geçirir, özelliklerin farkını ortaya koyar ve hedef kitleye psikolojik olarak hitap eder.
Koyu modda belirli bir modda en iyi resmin hangisi olduğuna karar vermek tasarımcının kararına kalmıştır
ve resimlerin yeniden renklendirilmesinin yeterince iyi olup olmadığını kontrol edebilir.
<picture> öğesiyle kullanılırsa gösterilecek resmin <source> özelliği media özelliğine bağlı olabilir.
Aşağıdaki örnekte koyu mod için Batı yarıküreyi, açık mod için Doğu yarıküreyi gösteriyorum
veya herhangi bir tercih verilmediğinde, diğer tüm durumlarda varsayılan olarak Doğu yarımküre kullanılır.
Bu bilgiler kesinlikle açıklama 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 koyu mod neden 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 gerçekten de işletim sistemlerinin kullanıcı arayüzüne sahip
ancak yine de web sayfalarını görmeye alışkın oldukları şekilde görmeyi tercih ediyor.
İlk başta tarayıcının gönderdiği sinyale bağlı kalmak iyi bir yöntemdir.
prefers-color-scheme ancak isteğe bağlı olarak kullanıcıların sistem düzeyindeki ayarlarını geçersiz kılmasına izin verebilir.
<dark-mode-toggle> özel öğesi
Elbette bunun için kodu kendiniz oluşturabilirsiniz ancak
tam olarak bu amaçla oluşturduğum hazır bir özel öğe (web bileşeni).
Adı <dark-mode-toggle>
koyu mod: açık/kapalı) veya
Sayfanıza tamamen özelleştirebileceğiniz bir tema değiştirici (tema: açık/koyu) ekleyin.
Aşağıdaki demoda öğenin nasıl çalıştığı gösterilmektedir
(Ben de 🤫 oturduğum her yere
diğer
örnekler
üzerinde) yer alır.
<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 kutularını işaretlerseniz mod seçiminizin nasıl sayfayı yeniden yüklediğinizde bile hatırlanır. Bu, ziyaretçilerinizin işletim sistemlerini koyu modda tutmalarına olanak tanır. sitenizin tadını açık modda çıkarın.
Sonuçlar
Koyu modla çalışmak ve bu modu desteklemek eğlencelidir. Ayrıca yeni tasarım alanlarının önünü açar.
Ziyaretçilerinizden bazıları için, sitenizi işleyememek ile sitenizi kullanamamak arasında fark olabilir.
ve mutlu bir kullanıcı olmak.
Bazı tuzaklar var ve dikkatli testler kesinlikle gereklidir,
koyu mod, tüm kullanıcılarınızı önemsediğinizi göstermek için kesinlikle mükemmel bir fırsat.
Bu yayında bahsedilen en iyi uygulamalar ve
<dark-mode-toggle> özel öğe
koyu mod deneyimi yaratabileceğinizden hiç şüpheniz olmasın.
Neler oluşturduğunuzu ve bu yayının faydalı olup olmadığını Twitter'dan bildirin
veya iyileştirilmesi için öneriler de sunar.
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-schemeCSS ö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 Denetleyicisi'nde Koyu Mod
- WebKit'te Koyu Mod Desteği
- Apple İnsan Arayüzü Yönergeleri - Koyu Mod
Bu yayın için arka plan araştırması makaleleri:
- Koyu Mod'un "desteklenen renk şemaları" nedir? Gerçekten mi? 🤔
- Karanlık olsun! 🌚 Belki...
- Koyu Mod için Yeniden Renklendirme
Teşekkür
prefers-color-scheme medya özelliği, color-scheme CSS mülkü,
ve ilgili meta etiket, 👏 Rune Lillesveen'in uygulama çalışmasıdır.
Rune aynı zamanda CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonunun yardımcı düzenleyicisidir.
Lukasz Zbylut'a teşekkür etmek istiyorum,
Rowan Merewood,
Chirag Desai,
ve Rob Dodson
ayrıntılı incelemelerini isteyin.
Yükleme stratejisi, Jake Archibald'ın ilk örneğidir.
Emilio Cobos Álvarez, beni doğru prefers-color-scheme algılama yöntemine yönlendirdi.
Referans verilen SVG'leri ve currentColor içeren ipucu
Timothy Hatcher'da oturum açın.
Son olarak, çeşitli kullanıcı araştırmalarının anonim katılımcılarına teşekkür ederim.
yardımcı oldu.
Nathan Anderson'ın hero resmi.