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

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

Thomas Steiner

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."

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.css yalnızca koyu mod için gereken kuralları içerir.
• light.css yalnı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.

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.

ziyaret edin.

'nı inceleyin.

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.

ziyaret edin.

'nı inceleyin.

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>

ziyaret edin.

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:

• Chrome Platform Durum sayfası
• Chromium hatası
• Medya Sorguları Düzey 5 spesifikasyonu

color-scheme meta etiketi ve CSS mülkü için kaynaklar:

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

Genel koyu mod bağlantıları:

• Materyal Tasarım - Koyu Tema
• Web 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.