İOS 13 Karanlık Modunun e-postaları kırmasını önleme

Satın alma işlemi yapıldığında sipariş ayrıntılarını gönderen bir e-ticaret uygulamamız var ve bu e-posta şablonunu yeniden tasarladık. Son birkaç gün içinde, e-postadaki metnin yarısının eksik olduğu bazı müşterilerin raporlarını aldık.

Sonunda bir ekran görüntüsü aldıktan sonra, sorunun karanlık modu kullanan iPhone'larda meydana geldiğini öğrendik. Şimdiye kadar hepsi Mail uygulamasıyla veya Safari ile gmail kullanan müşterilerdi (her ikisinin de aynı sorunu var). Gmail faktörünün ilgili veya tesadüf olup olmadığından emin değilim.

E-postamız basit - beyaz bir arka plan, gri başlıklar ve siyah gövde metni var. Koyu mod beyaz arka plana ve gri başlıklara dokunmuyor, ancak gövde metni siyahtan beyaza değiştiriliyor. Beyaz arka planda, beyaz metin açıkça görünmez ve e-postada büyük miktarda içerik eksik gibi görünüyor.

Karanlık modun metnimizi siyahtan beyaza çevirmesini önlemek için yapılabilecek bir şey var mı?

Ayrıca, e-postaya gömülü bir QR kodumuz olduğuna dikkat etmeliyim, bu yüzden QR kodunun tanınmasını zorlaştıracağına inandığım için karanlık modun tam e-postamızı yeniden renklendirmeye devam etmesini sağlayacak çözümler hakkında endişeliyim. .

Düzenleme: Bu herhangi bir uygulama koduyla ilgili değildir, bu nedenle karanlık mod için iOS geliştirme yönergeleri geçerli değildir. Bu, yalnızca Apple'ın iOS 13'teki Mail uygulamasının karanlık modda nasıl bir HTML e-postası görüntülediğidir.

— jessica
kaynak

Metin

— Pratik Sodha

Yazı tipinin rengini açıkça ayarlarsanız ne olur? Karanlık modun yazı tipini yalnızca varsayılan renkle bırakıldığında beyaz olarak değiştirdiğini varsayıyorum.

— Frank Schlegel

İlgili: webkit.org/blog/8840/dark-mode-support-in-webkit

— Frank Schlegel

@PratikSodha bu soru iOS uygulamaları ile ilgilidir, sadece Apple'ın Mail uygulamasında karanlık modda görüntülenen bir HTML e-postadan bahsediyorum.

— jessica

@FrankSchlegel, renk ve arka plan rengi açıkça her yere ayarlandı ve hala değiştiriliyordu. Verdiğiniz bağlantının cevabı vardı color-scheme: light only, tüm unsurları ayarlamak zorundaydım . Çok teşekkür ederim.

— jessica

Yanıtlar:

Bunu Apple cihazlarda zorla kaldırabilirsiniz, ancak şimdi onları durdurmanın bir yolu olmadan Mac'te Gmail ve Outlook'umuz var.

Bunu şuraya koymanız yeterlidir <head>:

<meta name="color-scheme" content="only">

"Yalnızca", "Yalnızca ışık" ın kısaltmasıdır (yine de çalışır)

Yani iPhone karanlık modu ve Apple Mail ama için çözecektir değil Mac veya Gmail Outlook.

Şu anda Mac'te Outlook'u geçersiz kılabilirsiniz, ancak Gmail için bilinen bir saldırı yoktur.

Mac'te Outlook için nasıl geçersiz kılınacağı aşağıda açıklanmıştır:

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

Bunun için Litmus forumunda Brian Thies'e HT

Ancak, müşterilerinizin istediği bir işlevi (karanlık mod) kaldırmak yerine kök sorununu denemek ve düzeltmek en iyisidir.

Apple böyle bir yol sağladı <head>:

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

Ayrıca, arka plan rengiyle en dıştaki öğenizin "karanlık mod" sınıfına sahip olduğundan emin olun, örn.

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

Yani varsayılan olarak, beyaz arka plana, siyah metne sahip olacaksınız; ve karanlık modda açık metin içeren koyu bir arka plan olacaktır.

(Lütfen başka sorgular için kodu belirtin.)

— Nathan
kaynak

@FrankSchlegel tarafından sağlanan bağlantı sayesinde

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

color-scheme: light onlytüm elemanlarda css kullanmak cevaptı. Teşekkür ederim!

— jessica
kaynak