Bagaimana mencegah Mode Gelap iOS 13 dari memecah email

10

Kami memiliki aplikasi e-commerce yang mengirimkan detail pesanan saat pembelian dilakukan, dan kami hanya mendesain ulang templat email itu. Kami telah menerima laporan selama beberapa hari terakhir dari beberapa pelanggan yang memiliki setengah teks di email yang hilang.

Setelah akhirnya mendapatkan tangkapan layar, kami mengetahui bahwa masalah ini terjadi pada iPhone menggunakan mode gelap. Sejauh ini mereka semua telah menjadi pelanggan yang menggunakan gmail dengan aplikasi Mail atau dengan Safari (keduanya memiliki masalah yang sama). Saya tidak yakin apakah faktor gmail relevan atau kebetulan.

Email kami sederhana - email ini memiliki latar belakang putih, judul abu-abu, dan teks hitam. Mode gelap membiarkan latar belakang putih dan judul abu-abu tidak tersentuh, tetapi teks tubuh diubah dari hitam menjadi putih. Pada latar belakang putih, teks putih jelas tidak terlihat, dan email sepertinya kehilangan konten dalam jumlah besar.

Adakah yang bisa dilakukan untuk mencegah mode gelap mengubah teks kita dari hitam menjadi putih?

Saya harus mencatat bahwa kami juga memiliki kode QR yang disematkan dalam email, jadi saya khawatir tentang solusi yang akan memungkinkan mode gelap untuk melanjutkan dalam recoloring email lengkap kami, karena saya percaya itu akan membuat lebih sulit bagi kode QR untuk dikenali .

Sunting: ini tidak terkait dengan kode aplikasi apa pun, jadi pedoman tentang pengembangan iOS untuk mode gelap tidak berlaku. Ini hanya masalah bagaimana aplikasi Mail Apple di iOS 13 dalam mode gelap menampilkan email HTML.

ios css email gmail ios-darkmode jessica
sumber
Kemungkinan duplikat masalah Warna Putih iOS13 dengan textColor of UIKit
Pratik Sodha
Apa yang terjadi jika Anda mengatur warna font secara eksplisit? Saya menganggap mode gelap hanya mengubah font menjadi putih jika dibiarkan dengan warna default.
Frank Schlegel
2
Terkait: webkit.org/blog/8840/dark-mode-support-in-webkit
Frank Schlegel
@PratikSodha pertanyaan itu berkaitan dengan aplikasi iOS, saya hanya berbicara tentang email HTML yang ditampilkan di aplikasi Mail Apple dalam mode gelap.
jessica
@FrankSchlegel warna dan warna latar diatur secara eksplisit di mana-mana, dan masih digeser. Tautan yang Anda berikan memiliki jawabannya, saya harus mengatur color-scheme: light onlysemua elemen. Terima kasih banyak.
jessica

Jawaban:

10

Anda dapat menghapus ini secara paksa di perangkat Apple, tetapi sekarang kami memiliki Gmail dan Outlook di Mac tanpa cara untuk menghentikannya.

Sederhananya di <head>:

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

"Only" adalah kependekan dari "Light only" (yang juga masih berfungsi)

Itu akan memperbaiki mode gelap iPhone dan Apple Mail tetapi tidak Outlook di Mac atau Gmail.

Saat ini Anda dapat menimpa Outlook di Mac, tetapi tidak ada retasan yang dikenal untuk Gmail.

Berikut ini cara menimpa Outlook di Mac:

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

HT ke Brian Thies di forum Litmus untuk ini

Tetapi yang terbaik adalah mencoba dan memperbaiki masalah root, daripada menghapus fungsi (mode gelap) yang diinginkan pelanggan Anda.

Apple telah menyediakan cara seperti itu, dengan ini di <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>

Juga, pastikan elemen terluar Anda dengan warna latar belakang memiliki kelas "darkmode", misalnya

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

Jadi secara default, Anda akan memiliki latar belakang putih, teks hitam; dan pada mode gelap itu akan menjadi latar belakang gelap dengan teks terang.

(Harap berikan kode untuk pertanyaan lebih lanjut.)

Nathan
sumber