iOS 13 다크 모드가 이메일을 차단하지 못하게하는 방법

구매할 때 주문 세부 정보를 전송하는 전자 상거래 앱이 있으며 해당 이메일 템플릿을 다시 디자인했습니다. 지난 며칠 동안 일부 고객의 이메일에 절반의 텍스트가 누락되었다는보고가 접수되었습니다.

마지막으로 스크린 샷을 얻은 후 어두운 모드를 사용하는 iPhone에서 문제가 발생한다는 것을 알게되었습니다. 지금까지 그들은 Mail 앱이나 Safari에서 Gmail을 사용하는 고객이었습니다 (둘 다 동일한 문제가 있습니다). Gmail 요소가 관련이 있는지 또는 우연의 일치인지 확실하지 않습니다.

이메일은 간단합니다. 흰색 배경, 회색 제목 및 검은 색 본문이 있습니다. 어두운 모드는 흰색 배경과 회색 제목을 그대로 유지하지만 본문 텍스트는 검은 색에서 흰색으로 변경됩니다. 흰색 배경에서 흰색 텍스트는 분명히 보이지 않으며 전자 메일에 많은 양의 내용이없는 것처럼 보입니다.

어두운 모드에서 텍스트를 검은 색에서 흰색으로 변경하지 못하게 할 수있는 방법이 있습니까?

이메일에 QR 코드도 포함되어 있기 때문에 QR 코드를 인식하기가 더 어려워 질 수 있기 때문에 어두운 모드가 전체 이메일을 다시 칠하는 데 도움이되는 솔루션에 대해 걱정하고 있습니다. .

편집 : 이것은 앱 코드와 관련이 없으므로 어두운 모드 용 iOS 개발에 대한 지침은 적용되지 않습니다. 이것은 어두운 모드에서 iOS 13의 Apple Mail 앱이 HTML 이메일을 표시하는 방법에 대한 문제입니다.

— 제시카
소스

의 가능한 중복 UIKit의 텍스트 색상과 iOS13 화이트 색상 문제

— Pratik Sodha

글꼴의 색상을 명시 적으로 설정하면 어떻게됩니까? 기본 모드로 남아 있으면 어두운 모드에서만 글꼴을 흰색으로 변경한다고 가정합니다.

— Frank Schlegel

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

— Frank Schlegel

@PratikSodha 그 질문은 iOS 앱과 관련이 있습니다. 저는 단순히 Apple의 Mail 앱에 어두운 모드로 표시되는 HTML 이메일에 대해 이야기하고 있습니다.

— jessica

@FrankSchlegel 색상과 배경색은 어디에서나 명시 적으로 설정되었으며 여전히 이동 중입니다. 당신이 제공 한 링크가 대답을했습니다. 나는 color-scheme: light only모든 요소 를 설정해야했습니다 . 정말 고맙습니다.

— jessica

답변:

Apple 기기에서는이 기능을 강제로 제거 할 수 있지만 이제는 Mac과 Gmail을 중지 할 수있는 방법이 없습니다.

간단히 이것을 다음에 넣으십시오 <head>.

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

"Only"는 "Light only"의 약자입니다 (여전히 작동합니다).

iPhone 어두운 모드 및 Apple Mail에서는 수정되지만 Mac 또는 Gmail의 Outlook 에서는 수정 되지 않습니다 .

현재 Mac에서는 Outlook을 재정의 할 수 있지만 Gmail에 대한 알려진 핵은 없습니다.

Mac 용 Outlook을 재정의하는 방법은 다음과 같습니다.

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

Litmus 포럼의 HT to Brian Thies

그러나 고객이 원하는 기능 (다크 모드)을 제거하는 것이 아니라 근본적인 문제를 해결하는 것이 가장 좋습니다.

Apple은 다음과 같은 방법으로 제공했습니다 <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>

또한 배경색이있는 가장 바깥 쪽 요소의 클래스가 "darkmode"인지 확인하십시오.

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

따라서 기본적으로 흰색 배경, 검은 색 텍스트가 있습니다. 어두운 모드에서는 밝은 텍스트가있는 어두운 배경이됩니다.

(추가 질문에 대한 코드를 제공하십시오.)

— 나단
소스

@FrankSchlegel에서 제공하는 링크 덕분에

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

color-scheme: light only모든 요소에서 CSS를 사용 하는 것이 답이었습니다. 감사합니다!

— 제시카
소스