Koyu mod açma/kapatma düğmeleri

Koyu mod açma/kapatma düğmesi, kullanıcıların bir site için sistem renk şemasını geçersiz kılmasına olanak tanır. Geçersiz kılma işlemi <meta name="color-scheme"> güncellenerek uygulanır: light dark "sistem tercihini takip et" anlamına gelir, light veya dark açık bir şemayı sabitler. Renkler (light-dark()), sistem renkleri ve yerel kullanıcı arayüzü, CSS color-scheme özelliğini temel alır. Bu nedenle açma/kapatma düğmesi, bu özelliği <meta> ile senkronize tutarak çalışır (Geçersiz kılmayı CSS'ye yansıtma bölümüne bakın).

Kalıcı açma/kapatma düğmesi mi, ayarlar kontrolü mü yoksa hiç açma/kapatma düğmesi olmaması mı?

Çoğu sitenin kullanıcı arayüzünde (başlık, gezinme, altbilgi vb.) kalıcı bir renk şeması açma/kapatma düğmesine ihtiyacı yoktur. Varsayılan olarak sistem tercihini uygulayın ve manuel geçersiz kılma gerekiyorsa kontrolü ayrı bir ayarlar yüzeyine (ayarlar sayfası, panel veya yer paylaşımı) yerleştirin.

Bir şemayı işletim sistemine sabitlemek meşru ancak nadir bir amaçtır ve nadir amaçlar her zaman görünür olan bir kontrolde değil, kademeli açıklamanın arkasında yer alır.

Kalıcı açma/kapatma düğmeleri çoğunlukla geliştiricilere yönelik veya geliştiricilere yakın (ör.tasarımcılar için) sitelerde bulunur. Bu sitelerde şema değiştirme, ortalama bir web kullanıcısına kıyasla çok daha sık yapılan bir işlemdir. Geliştirici sitelerinde yaygın bir kalıp olduğu için eklemeyin. Geliştiricinin bu kontrole olan ilgisi, tipik kullanıcıları temsil etmez.

Uygulama

Öncelikle, varsayılan olarak sistem tercihini kullanarak her iki şemayı da desteklemek için Koyu mod bölümündeki tüm adımları uygulayın.

Veri modeli

Koyu mod açma/kapatma düğmesinin veri modeli genellikle üç durum içerir:

1. Sistem (kayıtlı değer yok): Kullanıcı arayüzü, sistem renk şemasını kullanır. İdeal olarak bu varsayılan ayar olmalıdır.
2. Açık ("light" olarak depolanır): Kullanıcı arayüzü, sistem renk şemasından bağımsız olarak açık temayı kullanır.
3. Koyu ("dark" olarak depolanır): Kullanıcı arayüzü, sistem renk şemasından bağımsız olarak koyu temayı kullanır.

Bu durum genellikle localStorage içinde depolanır ve doküman başlığındaki bir <meta name="color-scheme"> öğesine yansıtılır.

Geçersiz kılmayı CSS'ye yansıtma

<meta> yalnızca bir sunum ipucudur: Yazar CSS'sindeki tüm color-scheme bildirimleri bunu geçersiz kılar. Koyu mod, :root üzerinde color-scheme: light dark değerini ayarladığından yalnızca <meta> değerini güncellemek işe yaramaz. CSS önceliklidir. <meta> değerini mülkle eşleyerek kaskadın bu değeri izlemesini sağlayın:

:root {
  color-scheme: light dark;

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }
  &:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }
}

Kök varsayılan olarak color-scheme: light veya color-scheme: dark değerini kod gömmeyin. Temel beyan light dark olarak KALMALIDIR. CSS, JS'ye bağlı OLMAMALIDIR: JS hiç çalışmazsa <meta>, light dark olarak kalır ve site, sistem tercihine uyar. Hiçbir şey bozulmaz.

Kalıcılık ve FOUC önleme

Geçersiz kılma işlemini localStorage içinde kalıcı hale getirin. Sistem varsayılanına dönerken girişi kaldırın.

Yanlış şemanın görünmesini önlemek için kayıtlı değeri, <meta> öğesinin hemen ardından yerleştirilen satır içi komut dosyasına (type=module DEĞİL, defer DEĞİL) uygulayın:

<meta name="color-scheme" content="light dark">
<script>
document.querySelector('meta[name="color-scheme"]').content = localStorage.getItem("color-scheme") ?? "light dark";
</script>

• Bu satır içi komut dosyası yalnızca FOUC'yi önlemek için kullanılır. Mümkün olduğunca küçük tutun. Renk şeması geçişini işlemek için ek JS daha sonra yüklenebilir.
• Nadir durumlarda localStorage erişimi hata verebilir (ör.site verileri engellendi). Ancak bu komut dosyası başka bir işlem yapmadığından tek yan etki konsol hatası olur. Bu önemliyse try .. catch içine alın. Kalıcı olmasa bile temanın sayfaya uygulanmaya devam ettiğinden emin olun.
• Geçersiz kılma başka bir sekmeden değiştirilebilir: Senkronizasyonu sürdürmek için window öğesinin storage etkinliğini işleyin.
• Sistem tercihi, depolanan değerle eşleşecek şekilde değiştiğinde depolanan değeri kaldırmak için matchMedia() KULLANMAYIN. Birçok kullanıcının OS'u, günün saatine göre şemaları otomatik olarak değiştirir. İkisi çakıştığında depolanan değerin kaldırılması, bir şemanın sabitlenmesini tamamen imkansız hale getirir.

HTML ve renk dışı değerler için dallanma

Renkler için ek işlem yapmanız gerekmez: <meta>, color-scheme ile eşleştirildikten sonra (yukarıda) light-dark(), geçersiz kılma işlemini uygular. Bu bölümde diğer değerlerin (ör. font-weight, medya kaynakları vb.) uyarlanması ele alınmaktadır.

Sayfa yalnızca sistem tercihini takip ettiğinde, <picture> veya <video> kaynakları da dahil olmak üzere dallandırma için (prefers-color-scheme: dark) kullanılabilir. Renk şemasını geçersiz kılmak başka bir soruna yol açar: Sistem tercihi artık doğru kaynak değildir ve yalnızca medya sorgularını kabul eden API'ler için doğrudan bir alternatif yoktur.

Dallanma için YALNIZCA .dark gibi JS tarafından uygulanan sınıflara güvenmeyin. JS yüklenmezse ve işletim sisteminin varsayılanı koyuysa bu sınıflar yanlış olur.

Medya sorgusunu bir :root:has(> head > meta[name="color-scheme"][content="dark"]) (veya light) seçiciyle birleştirerek dallandırabilirsiniz. Bunu düzgün bir şekilde nasıl uygulayacağınızla ilgili ayrıntılar için Seçici ve @-kuralı Kombinasyonları bölümüne bakın.

Kontrolün kendi seçenekleri de renkli olmayan dallardır: Her iki durumu da işaretlemeye ekleyin (simge ve görsel olarak gizlenmiş işlem metni, örneğin "Koyu temaya geç") ve etkin olmayan durumu bu seçiciler aracılığıyla gizleyin. display: none, gereksiz seçeneği AT'den de kaldırır. Böylece, sistem tercihi değiştiğinde kontrolün güncel kalması için JS gerekmez.

HTML içi medya için şu anda tek yol, her iki sürümü de ayrı öğeler olarak eklemek ve görünürlüğü uygun şekilde değiştirmektir. <source> öğelerini display: none ile gizlemek işe yaramaz.

Kullanıcı Arayüzü

İki veya üç eyalet mi?

Tüm durumlarda kullanıcı arayüzü, renk şemasını sisteme geri döndürmeyi veya ayarlamayı DESTEKLEMELİDİR.

Sitenin üstbilgi, gezinme, altbilgi gibi alan kısıtlaması olan bölümlerinde iki durumlu anahtarlar kullanın. Bu bölümlerde alan kısıtlıdır ve ayarları değiştirmek genellikle kullanıcının asıl amacından bağımsızdır.

Ayrı bir ayar yüzeyindeki (sayfa, panel veya yer paylaşımı) renk şeması kontrolü farklı bir senaryodur ve üç durumu da açıkça gösterebilir ("Açık", "Koyu", "Sistem"): Burada kullanıcı, gelecekteki davranışlar hakkında bilinçli kararlar verir ve seçenekleri açıklamak için yer vardır.

Site, bağlama duyarlı şemalar (ör. OS karanlık olduğunda daha loş bir ışık modu) uyguluyorsa "Açık" ve "Sistem (şu anda açık)" gerçekten farklı olduğundan üç açık durum da garanti edilir.

İki durumlu açma/kapatma düğmeleri

Bu tür bir kontrol kullanıldığında, mevcut durumun uzun vadede korunmasını sağlamak yerine geçici bir konfor ayarı ("şu anda çok parlak") olma eğilimindedir. Bu nedenle, iki durumlu açma/kapatma düğmeleri için üç ayardan ikisini görüntülemek yeterlidir: sistem (ayarın geri alınabilmesi için) ve sistemin mevcut tersi (mevcut değişmez değeri olarak saklanır).

Yalnızca iki durum olmalıdır:

1. Sistem varsayılanı: Depolanan değer yok, <meta> içerik light dark. Mevcut çözümlenmiş değeri olarak gösterilir (ör. açık renkli olduğunda güneş simgesi).
2. Geçersiz kılma: Tam olarak light veya dark şeklinde depolanır.

Temel olarak, mevcut sistem tercihiyle eşleşen açık durumun erişilemez olduğu üç durumlu bir kontroldür (light dark, light, dark).

Kullanıcı açma/kapatma düğmesini kullandığında:

1. Hedef şema = şu anda oluşturulan şemanın tersi (varsa depolanan değer, yoksa sistem tercihi). Kullanıcı niyeti, "sistem varsayılanının tersini seçmek" DEĞİL, "Right Now'da gördüğümün tersini seçmek"tir.
2. Hedef, mevcut sistem tercihinden farklıysa olduğu gibi saklayın.
3. Hedef, mevcut sistem tercihiyle eşleşirse kullanıcı, yaptığı düzenlemeyi geri alır: Depolanan değeri kaldırın. Bu değeri saklamayın. Aksi takdirde, şema gelecekteki sistem değişikliklerine karşı görünmez bir şekilde sabitlenir.
4. <meta> içeriğini depolanan değere veya yoksa light dark değerine ayarlayın.

ÖNEMLİ: Farklılık yalnızca depolama sırasında kontrol edilmeli, hiçbir zaman geriye dönük olarak kontrol edilmemelidir: Sistem tercihinin daha sonra eşleşecek şekilde değiştiği depolanmış bir değer SAKLANMALIDIR. Birçok kullanıcının OS'u, günün saatine göre şemaları otomatik olarak değiştirir. İkisi çakıştığında depolanan değerin kaldırılması, bir şemanın sabitlenmesini tamamen imkansız hale getirir.

İşletim sisteminin açık renk moduna ayarlandığı örnek senaryo:

1. Kullanıcı açma/kapatma düğmesini kullanır. Koyu tema, sistem tercihinden farklı olduğu için dark depolanır ve site koyu temaya geçer.
2. İşletim sistemi ayarı koyu olarak değişir. Site karanlık kalır (depolanan değer artık sistem tercihiyle eşleşir ancak korunur).
3. İşletim sistemi ayarı tekrar açık moda döner. Site karanlık kalır.
4. Kullanıcı, açma/kapatma düğmesini kullanır. Hedef (açık) sistem tercihiyle eşleştiğinden, depolanan değer kaldırılır ve site tekrar sistemi takip eder.

Üç durumlu açma/kapatma düğmeleri

Daha fazla alan olduğunda ve kullanıcılar uzun vadeli tercihler belirleme düşüncesindeyken üç durumlu kontrol daha fazla netlik sağlayabilir. Bu durumda veri modeli, üç kullanıcı arayüzü seçeneğiyle (sistem, açık ve koyu) net bir şekilde eşleşir.

Bilişsel yükü azaltmak için "sistem" seçeneği, mevcut sistem ayarının ne olduğunu da göstermelidir. Örneğin:

• Simge (ör. sistem simgesinin sağ alt kısmındaki güneş simgesi)
• Metin, ör. "Sistem (Şu anda açık)"