Web Sitenize veya Uygulamanıza Karanlık Mod Nasıl Eklenir (Beyaz Parlamadan)

Karanlık mod eklemek için renklerinizi sabit değerler yerine adlandırılmış belirteçler (arka plan, metin, yüzey, kenarlık, vurgu) olarak tanımlayın, her belirteç için açık ve koyu bir değer verin ve bunlar arasında CSS prefers-color-scheme medya özelliğiyle geçiş yaparak sitenin ziyaretçinin sistem ayarını izlemesini sağlayın. Manuel bir geçiş de istiyorsanız seçimi tarayıcıda saklayın ve küçük bir satır içi betikle sayfa başlığında uygulayın; böylece yüklenirken beyaz bir parlama olmaz. Ardından her iki temada da kontrastı, görselleri ve grafikleri kontrol edin. Bir yapay zeka uygulama oluşturucusunda tek net bir prompt bu işin çoğunu yapabilir; kaliteyi sağlayan şey kontroldür.

İki yaklaşım

Çoğu uygulama ikinci yaklaşımla daha iyi çalışır: varsayılan olarak sistemi izleyin, ama insanların bunu geçersiz kılmasına izin verin.

Renk belirteçleriyle başlayın

Renkler white, #333 ve gray-100 gibi kodun içine dağılmışsa karanlık mod zahmetlidir. Her renk küçük bir adlandırılmış belirteç kümesinden geliyorsa kolaydır:

Her bileşen belirteç adlarını kullanır. Tema değiştirmek, her bileşeni düzenlemek yerine tek bir değer kümesini değiştirmek demektir.

Koyu palet için ipuçları:

• Büyük alanlarda tamamen siyah ve tamamen beyazdan kaçının; çok koyu gri ve kırık beyaz okumak için daha kolaydır.
• Derinliği gölgeler yerine daha açık yüzeylerle gösterin; gölgeler koyu arka planlarda neredeyse görünmez.
• Parlak marka renklerini biraz yumuşatın; koyu arka planlarda rahatsız edici biçimde parlayabilirler.
• Kontrastı okunabilir tutun. WCAG’ın AA seviyesi normal metin için en az 4,5:1 kontrast ister. Soluk gri metin, koyu temalarda sıklıkla bu şartı karşılamaz.

Tailwind CSS ile

Tailwind, yapay zeka ile oluşturulan birçok uygulamada varsayılan stil aracıdır. Tailwind’in karanlık mod dokümanlarına göre dark: varyantı varsayılan olarak prefers-color-scheme kullanır; bu yüzden bg-white dark:bg-gray-900 gibi sınıflar ekstra bir iş olmadan sistem ayarını izler.

Tailwind v4’te manuel bir geçiş için dokümanlar, varyantın üst bir öğedeki bir sınıfa geçirilmesini gösterir:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Sonra uygulama kök öğeye dark sınıfını ekler veya kaldırır. Dokümanlar ayrıca, sayfa boyanmadan önce kayıtlı seçimi (veya sistem ayarını) uygulayan bir başlık içi satır içi betik önerir — parlamayı önlemenin tam yolu budur.

Beyaz parlamayı önlemek

Parlama, sayfa açık modda boyandığı, ardından JavaScript yüklenip kayıtlı seçimi okuyup koyu moda geçtiği için olur. Çözüm:

1. Sayfa başlığına, kayıtlı temayı okuyup kök öğedeki sınıfı her şey oluşturulmadan önce ayarlayan küçük bir satır içi betik koyun.
2. Tarayıcının çizdiği parçaların (kaydırma çubukları, form denetimleri) eşleşmesi için her tema için color-scheme CSS özelliğini ayarlayın.
3. Her iki temada da sayfaya açık bir arka plan rengi verin.
4. Uygulama sunucu tarafında oluşturuluyorsa, sunucu ile tarayıcının başlangıç temasında aynı fikirde olduğundan emin olun; yoksa sayfa yeniden oluşturulup titreyebilir.

Örnek promptlar

Tam bir kurulum:

Karanlık mod ekle. Önce sabit kodlu renkleri tema belirteçleriyle (arka plan, yüzey, metin, soluk metin, kenarlık, vurgu) açık ve koyu değerlerle değiştir. Varsayılan olarak ziyaretçinin sistem ayarını kullan. Üst bölüme Açık, Koyu ve Sistem seçenekleri olan bir tema anahtarı ekle, seçimi localStorage’da hatırla ve yükleme sırasında beyaz parlama olmaması için başlıkta bir satır içi betikle uygula. Her tema için color-scheme ayarla. Mevcut açık tasarımı tam olarak olduğu gibi koru.

Kalanları düzeltmek:

Her sayfayı karanlık modda kontrol et ve şunları düzelt: düşük kontrastlı metin (en az 4,5:1 hedefle), sabit kodlu beyaz arka planlar, kaybolan kenarlıklar, koyu arka planda koyu metin içeren grafikler ve kaybolan logolar. Açık temayı değiştirme.

Görseller ve grafikler:

Karanlık modda logo için açık bir sürüm kullan. Grafik eksenlerini, ızgara çizgilerini ve etiketleri tema belirteçlerini kullanacak şekilde yap. Ekran görüntülerine karanlık modda ince bir kenarlık ver ki arka planla karışmasınlar.

Adım adım

1. Renkleri denetleyin. Sabit kodlu renkleri bulun ve belirteçlerle değiştirin. Bu işin çoğudur.
2. Her belirteç için koyu değerleri tanımlayın.
3. Sistemi izleyin: prefers-color-scheme ile (veya Tailwind’in varsayılan dark: ile).
4. İsterseniz bir geçiş ekleyin: Açık, Koyu, Sistem. Seçimi tarayıcıda saklayın; giriş yapılan uygulamalarda kullanıcının profiline de kaydedebilirsiniz.
5. Parlamayı önleyin: başlık içi betik ve color-scheme ile.
6. Zor kısımları kontrol edin: logolar, simgeler, beyaz arka planlı görseller, grafikler, kod blokları, haritalar, gömülü içerikler, e-postalar.
7. Her iki temayı test edin: masaüstünde ve telefonda, sistem açık ve koyu iken, bir sert yenilemeden sonra.

Sık yapılan hatalar

• Her şeyi ters çevirmek. Renkleri ters çeviren bir filtre fotoğrafları ve marka renklerini bozar.
• Sabit kodlu renklerin bırakılması. Koyu bir sayfada tek bir beyaz kart hemen göze batar.
• Düşük kontrastlı gri metin. Şık görünür, okunabilirlik testinden kalır.
• Yüklenirken beyaz parlama. Telefonlarda gece özellikle fark edilir.
• Üçüncü taraf gömülü içerikleri unutmak. Haritalar, videolar ve widget’lar açık kalabilir; koyu bir seçeneği olup olmadığını kontrol edin.
• İki durumlu geçiş. Biri bir kez tıkladıktan sonra sistemi izlemeye geri dönemez.
• Açık temayı bozmak. Açık tasarımın değişmemesi gerektiğini promptunuzda açıkça söyleyin.

Kontrol listesi

• Tüm renkler tema belirteçlerinden geliyor
• Varsayılan olarak sistem ayarını izliyor
• İsteğe bağlı Açık, Koyu ve Sistem geçişi, hatırlanıyor
• Yüklemede veya yenilemede beyaz parlama yok
• Form denetimleri ve kaydırma çubukları eşleşsin diye color-scheme ayarlı
• Metin kontrastı her iki temada en az 4,5:1
• Logolar, görseller, grafikler ve gömülü içerikler karanlık modda kontrol edildi
• Açık tema değişmedi
• Masaüstünde ve telefonda test edildi

Mythex ile karanlık mod

Mythex ile oluşturulan uygulamalar varsayılan olarak Vite, React, TypeScript ve Tailwind kullanır; bu yüzden yukarıdaki Tailwind yaklaşımı doğrudan geçerlidir: tam kurulum promptunu sohbete yapıştırın, sonra her iki temada ve telefon boyutunda Önizleme’yi kontrol edin. Mythex’in tasarım promptlama önerisi, neyin değişeceğini ve neyin korunacağını söylemektir; bu burada önemlidir — açık temanın olduğu gibi kalması gerektiğini söyleyin. Bkz. Tasarım ve arayüz promptları; bir deneme ters giderse bir kontrol noktasına geri dönün.

Doğru görünümü elde etmek için daha fazla bilgi için yapay zeka ile güzel görünen bir uygulama nasıl tasarlanır ve yapay zeka uygulama oluşturucuları için prompt nasıl yazılır rehberlerine bakın.

Sorular