Telefonun Karanlık Modu Web Sitesini Bozuyor: Zorla Koyu Tema Nasıl Kapatılır?

Bu yazıda Talha Aslan ve ekibi olarak tek bir soruya odaklanıyoruz: siteniz koyu tema sunmuyorken ziyaretçinin telefonu renkleri değiştiriyorsa ne yapmalısınız? Ayrıca sorunu nasıl teşhis edeceğinizi, hangi tarayıcı ayarının bunu tetiklediğini ve kalıcı çözüm için hangi iki CSS özelliğini kullanacağınızı adım adım anlatıyoruz. Kod bloğu vermiyoruz; ancak geliştiricinize ne isteyeceğinizi net biçimde öğreneceksiniz.

Hangi tarayıcılar ve uygulamalar sayfanızı kendiliğinden koyulaştırır?

En bilinen örnek Android için Chrome'daki otomatik koyu tema özelliğidir. Chrome geliştirici blogundaki Auto Dark Theme açıklamasına göre bu özellik yalnız kullanıcı işletim sisteminde koyu temayı açtığında çalışır ve açık renkli sitelere tarayıcının ürettiği bir koyu tema uygular. Kullanıcı bunu işletim sisteminden ya da Chrome ayarından kapatabilir.

Öte yandan tek kaynak Chrome değildir. Samsung Internet gibi bazı mobil tarayıcılar da kendi koyu mod seçenekleriyle sayfaları koyulaştırabilir. Ayrıca bazı e-posta uygulamaları ve uygulama içi tarayıcılar (bir uygulamanın içinde açılan web görünümü) benzer dönüşümler yapabilir. Davranış sürüme göre değiştiği için her ortamı kendi cihazınızda denemenizi öneriyoruz.

• Android için Chrome: işletim sistemi koyu temadayken ve ilgili tema ayarı açıkken.
• Kendi koyu modunu sunan diğer mobil tarayıcılar: kullanıcı ayarına bağlı olarak.
• E-posta uygulamaları: bülten ve bildirim e-postalarında renkleri tersine çevirebilir.
• Uygulama içi tarayıcılar: sosyal medya uygulamalarında açılan linkler, cihaz temasını farklı yorumlayabilir.

Zorla koyu tema sitenizde hangi belirtilerle ortaya çıkar?

Sorun genellikle bir müşterinin ya da çalışanınızın ekran görüntüsüyle fark edersiniz. Masaüstünde her şey düzgündür; ancak aynı sayfa bir Android telefonda tamamen farklı renklere bürünür. Bu nedenle şikâyet çoğu zaman "sitemiz telefonda bozuk" cümlesiyle gelir, oysa sayfa sağlamdır, yalnızca tarayıcı renkleri değiştirmiştir.

• Koyu renkli logo, koyulaşan arka planda neredeyse kaybolur.
• Marka renginiz solar ya da beklenmedik bir tona döner.
• Görselin üstündeki metin, arka planla aynı tona yaklaşır.
• Form alanları ve butonlar diğer bölümlerle uyumsuz durur.
• Gölgeler ve ince çizgiler kaybolur, kartlar birbirine karışır.

Özetle belirtiler rastgele değildir; hepsi tarayıcının renk tahmini yapmasından doğar. Ancak bu tahmin her bileşende aynı başarıyı göstermez. Özellikle elle hazırladığınız renk geçişleri, yarı saydam katmanlar ve metin içeren görseller en çok zarar gören bölümlerdir.

Logo neden karanlık modda kayboluyor?

En sık gelen soru budur. Logonuz büyük olasılıkla şeffaf arka planlı bir PNG dosyasıdır ve koyu lacivert ya da siyah tonlardadır. Açık temada beyaz zemin üstünde net durur; fakat tarayıcı zemini koyulaştırınca şeffaf alanlar da koyu görünür ve koyu logo bu zemine karışır.

Chrome'un resmi açıklaması görsellerin nasıl işlendiğini ayrıntılı anlatmıyor; bu yüzden davranışa güvenmek yerine logoyu her iki zeminde de çalışacak şekilde hazırlamanızı öneriyoruz. Örneğin logonun açık zemin sürümünü ve koyu zemin sürümünü ayrı tutabilir ya da logonun çevresine ince bir açık kontur ekleyebilirsiniz. Logo netliği ayrı bir sorunsa web sitesinde logo ve görsellerin bulanık görünmesi yazımız o konuyu ele alıyor.

1. Şeffaf PNG logonun yanına koyu zemin için açık renkli bir sürüm hazırlayın.
2. SVG logo kullanıyorsanız renkleri tek bir yerden yönetilebilir hale getirin.
3. Logoyu düz renkli bir rozet ya da kutu içine almak da hızlı bir geçici çözümdür.
4. Her değişikliği koyu temalı bir telefonda tekrar kontrol edin.

Bu sorunu hemen nasıl teşhis edersiniz?

İlk olarak sorunun gerçekten zorla koyu tema mı olduğunu doğrulayın. Çünkü aynı şikâyet önbellek, eksik CSS dosyası ya da tarayıcı çevirisi gibi başka nedenlerden de gelebilir. Aşağıdaki sırayı izlerseniz birkaç dakikada sonuca ulaşırsınız.

1. Şikâyet eden kişiden telefon modelini, tarayıcıyı ve karanlık modun açık olup olmadığını öğrenin.
2. Kendi Android telefonunuzda sistem temasını koyuya alın ve siteyi Chrome ile açın.
3. Aynı sayfayı sistem teması açıkken tekrar açın ve iki görünümü karşılaştırın.
4. Fark yalnız koyu temada çıkıyorsa sorun büyük olasılıkla zorla koyu temadır.
5. Masaüstü Chrome'da geliştirici araçlarının Rendering panelindeki otomatik koyu mod taklidiyle sonucu doğrulayın.

Böylece sorunu tahmine değil, tekrar üretilebilir bir teste dayandırırsınız. Eğer fark çeviri açıkken çıkıyorsa Chrome çevirisinin siteyi bozması yazımıza, yalnız iPhone'da çıkıyorsa iPhone Safari görünüm sorunları yazımıza bakın.

Teşhis sırasında not almayı da ihmal etmeyin. Hangi sayfada, hangi bileşende ve hangi ayarla sorun çıktığını kısa bir tabloya yazarsanız düzeltme sonrası karşılaştırma çok daha kolay olur. Üstelik bu not, geliştiricinize ileteceğiniz talebin temelini oluşturur.

Masaüstünde zorla koyu temayı nasıl taklit edersiniz?

Chrome geliştirici blogu, masaüstü Chrome'da geliştirici araçlarını açıp üç nokta menüsünden More Tools ve ardından Rendering bölümüne gitmeyi, orada "Emulate auto dark mode" seçeneğini etkinleştirmeyi anlatıyor. Bu yol, telefon olmadan aynı dönüşümü görmenizi sağlar; dolayısıyla tasarımcı ve geliştirici aynı ekrana bakarak konuşabilir.

Yine de taklit, gerçek cihazın birebir aynısı olmayabilir. Bu nedenle son kontrolü mutlaka gerçek bir Android telefonda yapın. Resmi açıklamaya göre telefonda test için Chrome'un deneysel özellikler sayfasında ilgili bayrağı açıp ardından tema ayarında sitelere koyu tema uygulama seçeneğini işaretleyebilirsiniz. Menü adları sürümle değişebildiği için panelde ilgili bölümü arayın.

Kalıcı çözüm için hangi iki yol var?

Temelde iki yolunuz var. Birincisi, sitenin yalnız açık temada çalıştığını tarayıcıya açıkça söyleyip otomatik koyulaştırmayı kapatmaktır. İkincisi ise sitenize kendi koyu temanızı tasarlayıp tarayıcının tahmin yapmasına gerek bırakmamaktır. Chrome ekibi de kapatma yerine kendi koyu temanızı oluşturmayı öneriyor.

Hangisini seçeceğinize karar verirken koyu temanın ziyaretçiniz için ne kadar önemli olduğunu düşünün. Bu stratejik soruyu koyu tema web sitenize eklenmeli mi başlıklı yazımızda ayrıntılı tartıştık; burada tekrar etmiyoruz.

color-scheme özelliği tam olarak ne işe yarar?

color-scheme, bir sayfanın ya da öğenin hangi renk şemalarında gösterilebileceğini tarayıcıya bildiren CSS özelliğidir. web.dev rehberine göre bu özellik form alanları, kaydırma çubukları ve sistem renkleri için tarayıcının hazır stillerini seçmenizi sağlar. Kök öğede kullanıldığında sayfa zeminini ve varsayılan metin rengini de etkiler.

MDN belgesine göre değerler normal, light, dark ve only anahtar kelimesinden oluşur. Örneğin light ve dark birlikte yazıldığında sayfa iki temayı da desteklediğini söyler. Ayrıca only anahtar kelimesi, tarayıcının o öğenin renk şemasını kendi başına değiştirmesini engeller; MDN bunun Chrome'un otomatik koyu temasını kapatabileceğini özellikle belirtir.

• normal: öğe sayfanın genel ayarını izler.
• light: öğe açık şemada gösterilebilir.
• dark: öğe koyu şemada gösterilebilir.
• only light: öğe yalnız açık şemada kalır, tarayıcı dönüştürmez.

Otomatik koyulaştırmayı tamamen kapatmak için ne yapmalısınız?

Chrome'un resmi açıklamasına göre sayfanın baş bölümüne color-scheme adlı bir meta etiketi ekleyip değer olarak only light yazdığınızda tarayıcı koyulaştırmayı hiç uygulamaz. Meta etiketinin avantajı, CSS dosyası yüklenmeden önce okunmasıdır; böylece sayfa açılırken kısa süreli koyu yanıp sönme de oluşmaz.

Alternatif olarak aynı değeri CSS içinde kök öğeye verebilirsiniz. Ancak CSS dosyası geç yüklenirse ilk karede dönüşüm görünebilir. Bu yüzden biz meta etiketini ana yöntem, CSS kuralını ise destekleyici katman olarak kullanmayı öneriyoruz. Geliştiricinize iletmeniz gereken talep kısaca şudur: baş bölüme yalnız açık şema bildiren color-scheme meta etiketi ekleyin.

1. Etiketi tüm şablonlarda ortak baş bölüme ekleyin, tek sayfaya değil.
2. Önbellek eklentisi kullanıyorsanız değişiklikten sonra önbelleği temizleyin.
3. Testi yeniden koyu temalı telefonda ve masaüstü taklidinde yapın.
4. Sonucu ekran görüntüsüyle kaydedin, ileride karşılaştırma yaparsınız.

Son bir not olarak, meta etiketini ekledikten sonra sitenizin herhangi bir yerinde prefers-color-scheme ile yazılmış eski koyu tema kuralları kalıp kalmadığını da kontrol edin. Böyle kurallar varsa sonuç beklenmedik bir karışım olabilir.

Yalnız belirli bir bölümü korumak mümkün mü?

Evet, mümkün. MDN ve Chrome belgeleri, only light değerini yalnız belirli öğelere vererek o öğeleri dönüşümden çıkarabileceğinizi söyler. Örneğin site genelinde koyulaştırmaya izin verip yalnız logo alanını, ürün fotoğraflarının çevresini ya da marka renginin kritik olduğu bir kampanya bandını koruyabilirsiniz.

Ancak bu yaklaşım dikkat ister. Koyulaşmış bir sayfanın ortasında beyaz kalan bir kutu, bazı ziyaretçilere hata gibi görünebilir. Dolayısıyla bölüm bazlı korumayı yalnız küçük ve anlamlı alanlarda kullanın. Genel kural olarak ya tüm sayfayı açık bırakın ya da gerçek bir koyu tema hazırlayın.

prefers-color-scheme ne zaman işe yarar, ne zaman yetmez?

prefers-color-scheme, ziyaretçinin cihazında açık mı koyu mu tema seçtiğini algılayan bir CSS medya özelliğidir. Bu özellikle koyu tema seçen ziyaretçiye özel renkler tanımlarsınız. web.dev rehberi, color-scheme ile varsayılan görünümü, prefers-color-scheme ile de özelleştirilebilir görünümü belirlemenizi ve ikisini birlikte kullanmanızı önerir.

Öte yandan Chrome'un açıklaması önemli bir uyarı içerir: prefers-color-scheme bir kapatma yöntemi değildir. Bu sorgu yalnız bazı öğeleri koyulaştırmak için kullanılırsa, otomatik koyu tema olmayan tarayıcılarda yarı koyu, yarı açık bir sayfa ortaya çıkabilir. Yani bu sorguyu kullanacaksanız eksiksiz bir koyu tema tasarlamanız gerekir.

Kendi koyu temanızı yaparken nelere dikkat etmelisiniz?

Kendi koyu temanızı hazırlamak, tarayıcının tahminini sizin tasarım kararlarınızla değiştirmek demektir. Bu nedenle renkleri tersine çevirmek yetmez; her rengi koyu zeminde yeniden değerlendirmeniz gerekir. Aşağıdaki liste, örnek senaryolarda en çok atlanan noktaları içerir.

• Saf siyah yerine koyu gri zeminler göz yorgunluğunu azaltabilir; bunu kendi testlerinizle değerlendirin.
• Marka renginin koyu zemin için daha açık bir tonunu belirleyin.
• Logo, ikon ve metin içeren görseller için koyu zemin sürümleri hazırlayın.
• Form alanlarında kenarlık ve odak göstergesinin seçik kaldığını kontrol edin.
• Tablolarda satır ayırıcıların kaybolmadığından emin olun.
• color-scheme değerini light dark olarak tanımlayıp tarayıcıyı da bilgilendirin.

Ayrıca koyu temada metin ve zemin kontrastını her renk çifti için ölçün. Bunun için renk kontrast kontrolü aracımızı kullanabilirsiniz; kontrastın tasarımdaki genel rolünü de tasarımda kontrast nasıl kullanılır yazımızda anlattık.

Zorla koyu tema sorununu tek başınıza ne zaman çözemezsiniz?

Hazır bir tema kullanıyorsanız ve baş bölümü düzenleme izniniz varsa meta etiketini eklemek görece kolaydır. Fakat sayfa oluşturucu eklentiler, kapalı kaynak temalar ya da yıllar içinde biriken özel CSS dosyaları işi karmaşıklaştırır. Özellikle zorla koyu tema yalnız bazı şablonlarda görünüyorsa sorunun kaynağını bulmak saatler alabilir.

Kurumsal web sitesi yaptırma aşamasındaysanız ya da mevcut sitenizin temelden yenilenmesi gündemdeyse, iki temayı baştan planlamak sonradan yama yapmaktan çok daha sağlıklıdır. Ekibimiz bu planlamayı kurumsal web sitesi yaptırma sürecinin parçası olarak ele alır: logo sürümlerini, renk değişkenlerini ve test listesini en başta belirleriz.

Öte yandan hazır temanın kendisi zaten iki temayı destekliyor olabilir. Bu durumda yalnız ayarı açmak yetebilir; fakat logo ve görseller yine sizin hazırlamanız gereken parçalardır. Kısacası tema ne kadar gelişmiş olursa olsun, marka varlıklarınızın koyu zemin sürümü sizin sorumluluğunuzdadır.

Hangi kontrol listesiyle sonucu doğrulamalısınız?

Düzeltmeyi yaptıktan sonra sonucu tek bir ekran görüntüsüyle onaylamayın. Çünkü zorla koyu tema farklı sayfa şablonlarında farklı sonuç verebilir. Aşağıdaki listeyi en az ana sayfa, bir hizmet sayfası, iletişim formu ve bir blog yazısı için uygulayın.

1. Android telefonda sistem teması koyuyken Chrome ile sayfayı açın.
2. Logo, menü ve alt bilgi alanını kontrol edin.
3. Formu doldurup hata mesajlarının rahat okunduğunu doğrulayın.
4. Görsel üstü metinleri ve kampanya bantlarını inceleyin.
5. Masaüstü Chrome'da otomatik koyu mod taklidiyle aynı sayfaları tekrar açın.
6. Sistem teması açıkken sayfanın değişmediğini doğrulayın.

Bunun yanında mobil görünümün genel sağlığını mobil uyumluluk testi ile kontrol etmeniz faydalı olur. Zorla koyu tema sorunu çoğu zaman mobil tarafta başka küçük sorunları da açığa çıkarır.

E-posta bültenlerinde aynı sorun nasıl ortaya çıkar?

Web sitenizdeki sorunun bir benzeri e-posta bültenlerinde de karşınıza çıkar. Bazı e-posta uygulamaları karanlık modda bülten renklerini kısmen ya da tamamen tersine çevirir. Sonuçta koyu logo kaybolur, beyaz zeminli ürün görselleri koyu zemin üstünde kutu gibi durur ve butonların metni zeminle karışabilir.

Ancak e-posta tarafında davranış uygulamadan uygulamaya çok değişir ve web tarayıcısındaki color-scheme desteği her istemcide aynı şekilde çalışmaz. Bu nedenle bültenlerde en güvenli yol, logoyu her iki zeminde net duracak biçimde hazırlamak ve gönderim öncesi koyu temalı cihazlarda test e-postası açıp kontrol etmektir. Üstelik bu kontrol yalnız kendi hesaplarınızla yapılmalıdır, gerçek abonelere deneme göndermeyin.

Zorla koyu tema SEO ve dönüşümü etkiler mi?

Zorla koyu temanın doğrudan bir sıralama sinyali olduğuna dair resmi bir açıklama yoktur; bu yüzden böyle bir iddiada bulunmuyoruz. Yine de okunmayan metin ve kaybolan butonlar kullanıcı deneyimini bozar. Ziyaretçi iletişim butonunu göremiyorsa ya da fiyat bilgisini okuyamıyorsa, sayfadan ayrılma olasılığı artar.

Kısacası etki dolaylıdır ve sitenizin türüne göre değişir. Örnek senaryo: bir hizmet firmasının telefon butonu marka renginde ve koyu temada zemine karışıyor. Ziyaretçi butonu fark etmediği için form ya da arama gerçekleşmiyor. Bu tür kayıpları analitik verilerinizde cihaz ve tarayıcı kırılımıyla inceleyebilirsiniz.

Analitik tarafında bu etkiyi ölçmek isterseniz düzeltmeden önceki ve sonraki dönemleri aynı cihaz kırılımıyla karşılaştırın. Ancak tek başına bir ayın verisi kesin sonuç vermez; kampanyalar, mevsim ve trafik kaynağı da sonucu etkiler. Bu yüzden sonucu bir eğilim olarak yorumlayın, kesin bir kazanç rakamına çevirmeyin.

Hangi hatalardan kaçınmalısınız?

Hızlı çözüm ararken yapılan bazı hatalar sorunu büyütebilir. Bu nedenle aşağıdaki maddeleri düzeltmeye başlamadan önce gözden geçirin. Hepsi örnek senaryolarda sık rastladığımız, ancak kolayca önlenebilen hatalardır.

• prefers-color-scheme ile yalnız birkaç öğeyi koyulaştırıp kapatma sanmak.
• Meta etiketini yalnız ana sayfaya eklemek, diğer şablonları unutmak.
• Logoyu tek şeffaf PNG olarak bırakıp yalnız zemin rengine güvenmek.
• Testi yalnız masaüstü taklidinde yapıp gerçek telefonu atlamak.
• Önbelleği temizlemeden sonucu değerlendirmek.
• Ziyaretçiden koyu modu kapatmasını istemek; bu bir çözüm değil, sorunu onlara yüklemektir.

Formlar ve butonlar karanlık modda neden bozulur?

Formlar, zorla koyu temada en hassas bölümlerdir. Tarayıcı form alanlarının zeminini ve kenarlığını kendi kurallarına göre değiştirir; fakat sizin elle verdiğiniz renkler bu kurallarla çakışabilir. Sonuçta beyaz bir giriş kutusunun içinde açık gri bir yazı ya da koyu zeminde kaybolan bir yer tutucu metin ortaya çıkar.

Butonlarda durum biraz farklıdır. Marka renginiz zaten koyuysa tarayıcı onu daha da koyulaştırabilir ya da tamamen başka bir tona taşıyabilir. Bu yüzden iletişim, teklif ya da sepete ekle gibi kritik butonları ayrıca kontrol edin. Örneğin buton metninin ve kenarlığının her iki temada da net kaldığını doğrulamak için birkaç dakika yeterlidir.

• Giriş kutularının zemini ile yazı rengi arasındaki farkı kontrol edin.
• Yer tutucu metnin koyu zeminde kaybolup kaybolmadığına bakın.
• Hata ve başarı mesajlarının rengini her iki temada deneyin.
• Onay kutusu ve açılır menü gibi tarayıcı bileşenlerinin uyumunu inceleyin.

Görsel üstündeki metinler ve arka plan fotoğrafları ne olur?

Arka plan fotoğrafı üstüne yazılmış bir başlık, açık temada sorunsuz durabilir. Ancak tarayıcı metin rengini değiştirip fotoğrafa dokunmadığında, beyaza dönen yazı açık tonlu bir fotoğraf üstünde kaybolur. Tersi de mümkündür; yani koyulaşan bir yarı saydam katman fotoğrafı gereğinden fazla karartabilir.

Bu sorunu azaltmanın en sağlam yolu, metni görselin içine gömmemek ve metinle fotoğraf arasında kendi kontrolünüzde olan bir katman kullanmaktır. Ayrıca metin içeren afiş ve kampanya görsellerinin koyu zemin sürümünü hazırlayın. Böylece tarayıcı ne yaparsa yapsın, mesajınız okura ulaşır.

Ürün fotoğraflarında da benzer bir durum vardır. Beyaz zeminli ürün fotoğrafları koyulaşan bir sayfada parlak kutular gibi durur. Bu bir hata sayılmaz; ancak sayfanın bütünlüğünü bozar. Dolayısıyla ürün kartlarına ince bir çerçeve ya da hafif bir zemin vermek, iki temada da daha düzenli bir görünüm sağlar.

Hazır temalarda değişikliği nereye yapmalısınız?

İçerik yönetim sistemi kullanıyorsanız değişikliği sayfa sayfa değil, tüm sayfaların paylaştığı ortak baş bölüme yapmalısınız. Çoğu temada bunun için tema ayarlarında bir alan, bir eklenti ya da alt tema dosyası bulunabilir. Menü adları temadan temaya değiştiği için panelde ilgili bölümü arayın ve emin değilseniz önce bir deneme ortamında çalışın.

Üstelik tema güncellemeleri doğrudan ana tema dosyasına yaptığınız değişikliği silebilir. Bu nedenle kalıcı değişiklikleri alt temada ya da temanın sunduğu özel kod alanında tutun. Değişiklikten sonra önbellek eklentisinin ve varsa içerik dağıtım ağının önbelleğini temizlemeyi de unutmayın; aksi halde eski sürümü test edip yanlış sonuca varırsınız.

1. Önce sitenin yedeğini alın.
2. Değişikliği deneme ortamında yapın ve test edin.
3. Ortak baş bölüme meta etiketini ekleyin.
4. Önbelleği temizleyip koyu temalı telefonda kontrol edin.
5. Sorun yoksa değişikliği canlı siteye taşıyın.

Geliştiricinize hangi talebi iletmelisiniz?

Teknik bilginiz sınırlıysa sorunu doğru tarif etmek çözüm süresini kısaltır. "Sitemiz telefonda bozuk" demek yerine hangi cihazda, hangi tarayıcıda ve hangi tema ayarıyla sorunun çıktığını yazın. Ardından ekran görüntüsünü ve sorunun çıktığı sayfa adreslerini ekleyin.

Talebinizde ayrıca hangi yolu istediğinizi belirtin: otomatik koyulaştırmanın kapanmasını mı, yoksa kendi koyu temanızın tasarlanmasını mı istiyorsunuz? Bu ayrım önemlidir, çünkü ilki kısa bir iş, ikincisi ise tasarım kararları gerektiren bir projedir. Son olarak logonun koyu zemin sürümünü kimin hazırlayacağını da netleştirin.

• Cihaz, tarayıcı ve tema ayarı bilgisi.
• Sorunlu sayfaların adresleri ve ekran görüntüleri.
• Tercih ettiğiniz çözüm yolu: kapatma ya da kendi koyu tema.
• Logo ve görsellerin koyu zemin sürümlerinin sorumlusu.
• Değişiklik sonrası test listesi.

Koyu temalı cihazda zorla koyu tema her zaman devreye girer mi?

Hayır, girmez. Chrome'un resmi açıklamasına göre özellik yalnız kullanıcı işletim sisteminde koyu temayı açtığında çalışır ve kullanıcı bunu işletim sisteminden ya da Chrome ayarından kapatabilir. Yani aynı telefon modelini kullanan iki ziyaretçi, ayarlarına göre sitenizi tamamen farklı renklerde görebilir.

Bu durum teşhisi zorlaştırır. Örnek senaryo: işletme sahibi kendi telefonunda sorunu göremez, çünkü kendi ayarı kapalıdır; buna karşılık müşterisinin telefonunda logo kaybolmuştur. Bu yüzden "bende sorun yok" cevabıyla konuyu kapatmayın. Bunun yerine ayarı kendi cihazınızda bilerek açın ve sorunu tekrar üretin.

Ayrıca site zaten koyu tema desteğini color-scheme ile bildiriyorsa tarayıcının kendi dönüşümüne ihtiyaç kalmaz. web.dev rehberi de color-scheme özelliğinin tarayıcının kendi dönüşümlerini uygulamasını önlediğini belirtir. Dolayısıyla doğru bildirim, davranışı ziyaretçinin ayarından bağımsız ve öngörülebilir hale getirir.

Karar tablosundan sonra hangi önceliği izlemelisiniz?

Karar verdikten sonra işleri doğru sıraya koymak, hem zamanı hem riski azaltır. Önce ziyaretçiyi etkileyen acil sorunu durdurun, sonra marka varlıklarınızı düzeltin, en son da uzun vadeli tasarım kararını uygulayın. Bu sıra, kendi koyu temanızı yapmaya karar verseniz bile geçerlidir.

1. Bugün: yalnız açık şema bildiren meta etiketiyle otomatik koyulaştırmayı durdurun.
2. Bu hafta: logonun ve metin içeren görsellerin koyu zemin sürümlerini hazırlayın.
3. Sonraki adım: renkleri değişken olarak düzenleyin, böylece iki tema tek yerden yönetilir hale gelir.
4. Planlı proje: kendi koyu temanızı tasarlayın, test edin ve color-scheme değerini iki temayı kapsayacak şekilde güncelleyin.

Böylece bugün yaptığınız hızlı düzeltme, ilerideki koyu tema projesinin önünü kesmez. Aksine, logo sürümleri ve renk düzeni hazır olduğu için asıl tasarım işi daha kısa sürer. Kısacası kapatma ile kendi koyu temanız birbirinin rakibi değil, aynı yolun iki aşamasıdır.

Sonuç olarak hangi yolu seçmelisiniz?

Acil bir şikâyetiniz varsa ilk adım olarak yalnız açık şema bildiren meta etiketini ekleyin; böylece zorla koyu tema anında durur. Ardından logonun koyu zemin sürümünü hazırlayın, çünkü kullanıcı farklı bir tarayıcıda yine farklı bir görünümle karşılaşabilir. Uzun vadede ise kendi koyu temanızı planlamak hem marka kontrolü hem de ziyaretçi tercihi açısından en dengeli yoldur.

Bu planlamayı mevcut sitenizin kodunu bozmadan yapmak istiyorsanız destek alabilirsiniz. Web sitesi yaptırmak ya da sitenizi yenilemek istediğinizde ekibimiz renk değişkenlerini, logo sürümlerini ve test listesini birlikte hazırlar; ayrıntılar için web sitesi yaptırmak sayfamıza göz atabilirsiniz. Form koruma tarafında hata alıyorsanız reCAPTCHA geçersiz alan adı hatası yazımız da işinize yarayabilir.