Cách ngăn iOS 13 Dark Mode phá vỡ email


10

Chúng tôi có một ứng dụng thương mại điện tử gửi chi tiết đơn hàng khi mua hàng được thực hiện và chúng tôi chỉ thiết kế lại mẫu email đó. Chúng tôi đã nhận được báo cáo trong vài ngày qua về một số khách hàng có một nửa văn bản trong email bị thiếu.

Sau khi nhận được ảnh chụp màn hình, chúng tôi đã biết rằng sự cố đang xảy ra trên iPhone khi sử dụng chế độ tối. Cho đến nay, tất cả họ đều là khách hàng sử dụng gmail với ứng dụng Thư hoặc với Safari (cả hai đều có cùng một vấn đề). Tôi không chắc liệu yếu tố gmail có liên quan hay trùng hợp không.

Email của chúng tôi rất đơn giản - nó có nền trắng, tiêu đề màu xám và văn bản cơ thể màu đen. Chế độ tối đang để nền trắng và các tiêu đề màu xám không bị ảnh hưởng, nhưng văn bản cơ thể đang được thay đổi từ đen sang trắng. Trên nền trắng, văn bản màu trắng rõ ràng là vô hình và email có vẻ như thiếu một lượng lớn nội dung.

Có bất cứ điều gì có thể được thực hiện để ngăn chế độ tối thay đổi văn bản của chúng tôi từ đen sang trắng?

Tôi nên lưu ý rằng chúng tôi cũng có mã QR được nhúng trong email, vì vậy tôi lo ngại về các giải pháp cho phép chế độ tối tiến hành đổi màu email đầy đủ của chúng tôi, vì tôi tin rằng mã QR sẽ khó nhận ra hơn .

Chỉnh sửa: điều này không liên quan đến bất kỳ mã ứng dụng nào, vì vậy, hướng dẫn phát triển iOS cho chế độ tối không áp dụng. Đây chỉ đơn giản là vấn đề về cách ứng dụng Mail của Apple trên iOS 13 ở chế độ tối đang hiển thị email HTML.



Điều gì xảy ra nếu bạn đặt màu của phông chữ rõ ràng? Tôi giả sử chế độ tối chỉ thay đổi phông chữ thành màu trắng nếu nó còn lại với màu mặc định.
Frank Schlegel


@PratikSodha câu hỏi đó liên quan đến các ứng dụng iOS, tôi chỉ đơn giản nói về một email HTML được hiển thị trong ứng dụng Mail của Apple ở chế độ tối.
jessica

@FrankSchlegel màu sắc và màu nền được đặt rõ ràng ở mọi nơi và vẫn đang được thay đổi. Liên kết bạn cung cấp đã có câu trả lời, tôi phải đặt color-scheme: light onlytrên tất cả các yếu tố. Cảm ơn bạn rất nhiều.
jessica

Câu trả lời:


10

Bạn có thể buộc loại bỏ điều này trên các thiết bị của Apple, nhưng bây giờ chúng tôi có Gmail và Outlook trên Mac mà không có cách nào ngăn chặn chúng.

Đơn giản chỉ cần đặt cái này vào <head>:

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

"Chỉ" là viết tắt của "Chỉ ánh sáng" (cũng vẫn hoạt động)

Điều đó sẽ khắc phục cho chế độ tối của iPhone và Apple Mail chứ không phải Outlook trên Mac hoặc Gmail.

Hiện tại bạn có thể ghi đè Outlook trên Mac, nhưng không có bản hack nào được biết đến cho Gmail.

Đây là cách ghi đè cho Outlook trên 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 to Brian Thies trên diễn đàn Litmus cho việc này


Nhưng tốt nhất bạn nên thử và khắc phục sự cố gốc, thay vì xóa chức năng (chế độ tối) mà khách hàng của bạn muốn.

Apple đã cung cấp một cách như vậy, với điều này trong <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>

Ngoài ra, đảm bảo phần tử ngoài cùng của bạn với màu nền có lớp "darkmode", vd

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

Vì vậy, theo mặc định, bạn sẽ có nền trắng, văn bản màu đen; và trên chế độ tối, nó sẽ là một nền tối với văn bản sáng.

(Vui lòng cung cấp mã cho bất kỳ truy vấn nào khác.)


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.