HTML 전자 메일의 어두운 모드: 당신이 알아야 할 모든 것.

새로운 iOS 13 업데이트에 따라 Apple Mail은 검은색 테마를 획득하여 첫 번째 CSS 미디어 조회를 지원하는 주요 전자 우편 클라이언트가 되었다. 이것은 현재 검은색과 연한 테마를 위한 전자 우편을 전문적으로 설계할 수 있다는 것을 의미한다.
나는 열광적인 어둠의 모드광이고 눈부신 전자메일은 나의 사적이다. 그래서 iOS 13에서 어둠의 모드를 알게 되었을 때 나는 유일하게 뻔한 일을 했고 새로운 아이폰을 주문하여 테스트를 진행했다.
그 동안 나는 거의 모든 전자 우편 클라이언트 (trouble maker Outlook 포함) 의 어두운 모드 작업 원리를 테스트했다. 다음은 나의 발견이다.
어떤 것이 우선 배색 방안입니까?prefers-color-scheme CSS 미디어 쿼리는 사용자가 옅은 색이나 짙은 색 테마를 좋아하는지 검사하는 데 사용되며, 이 두 가지 테마를 위해 전자메일을 설계할 수 있다.iOS 13이 업데이트됨에 따라 가장 인기 있는 전자 우편 클라이언트의 지지율은 2.3%에서 38.4%로 껑충 뛰었다!애플 메일의 유행 덕분에 큰 발전이었다.놀랍게도 Outlook은 Apple Mail 이전에 유일하게 이 기능을 지원한 전자 우편 클라이언트입니다.

다크 모드가 유행하는 전자 우편 클라이언트에서의 작업 원리

전자 메일 자체를 어둡게 하기 위해 전자 메일 클라이언트는 백그라운드에서 전자 메일 색을 자동으로 반전합니다.일반 사용자와 사용자의 전자메일에 대해 이것은 모든 전자메일 클라이언트에서 잘 작동하고 일치하게 작동할 수 있다.
그러나 사용자 정의 HTML 전자메일은 그리 간단하지 않다. 대부분의 우편함이 채워져 있다.내가 말한 것은 거래와 판촉이다.
다음은 전자 메일 클라이언트가 암흑 모드 전자 메일 렌더링을 처리할 때 발견한 차이점입니다.
e-메일 클라이언트
인기
어두운 사용자 인터페이스
전자 메일 색상 자동 반전
@ 미디어 지원(기본 색상 지정 체계)
Apple Mail iPhone+iPad
36.1%
✔네, 그렇습니다.
✔네, 그렇습니다.
✔네, 그렇습니다.
Gmail Android 10
27.8% *
✔ 맞다
✔ 맞다
✖ 아니오
Gmail iOS 13
27.8% *
✖ 아니오
✖ 아니오
✖ 아니오
Gmail 웹 메일
27.8% *
✔ 맞다
✖ 아니오
✖ 아니오
Outlook iOS 13
9.1% *
✔ 맞다
✔ 맞다
✖ 아니오
Outlook Android 10
9.1% *
✔ 맞다
✔ 맞다
✖ 아니오
Outlook Windows 10
9.1% *
✔ 맞다
✔ 맞다
✖ 아니오
Outlook macOS
9.1% *
✔ 맞다
✔ 맞다
✔ 맞다
Apple Mail macOS
7.5%
✔ 맞다
✔ 맞다
✖ 아니오
야후!네트워크 메일
6.3% *
✔ 맞다
✖ 아니오
✖ 아니오
AOL 웹 메일
6.3% *
✖ 아니오
✖ 아니오
✖ 아니오
견해com 웹 메일
2.3%
✔ 맞다
✔ 맞다
✔ 맞다
Windows 10 메일 Windows 10
0.5%
✔ 맞다
✔ 맞다
✖ 아니오
Zoho Mail 웹 메일
0.5% 미만
✔ 맞다
✔ 맞다
✖ 아니오
테스트 중인 모든 데이터 visit the original post 를 여기에 놓고 전자 우편 클라이언트의 캡처를 포함한 나머지 데이터를 쉽게 볼 수 없습니다.
* 동일한 전자 메일 클라이언트의 인기도는 모든 플랫폼에서 공유됩니다. 신뢰할 수 있는 구분이 불가능하기 때문입니다.인기 출처: Litmus, the 2019 email client market share.

HTML 전자 메일의 암흑 모드를 우호적으로 만드는 방법

나는 이미 이 데이터를 사용했고 나중에 Outlook과 관련된 도전에 부딪혔다. 나는 우리의 전자메일을 어두운 패턴에 우호적으로 만들었다.다음은 이 작업을 수행하는 방법입니다.
데이터 설명:
55% 이상의 전자 메일은 암흑 모드가 활성화된 상태에서 열 수 있습니다.Gmail이 어두운 면에 가입하면 어두운 모드에서 열 수 있는 전자메일이 83%까지 치솟을 수 있습니다!

1) 색상 조정

배경색이 투명하거나 지정되지 않은 경우에만 색상을 반전할 수 있으므로 Apple Mail을 주의하십시오. 흰색 배경은 안 됩니다.전자메일이 아무도 실명하지 않도록 하는 가장 간단한 방법은 배경색을 지정했는지 확인하는 것이다.설계를 더욱 잘 통제하기 위해 이곳이 prefers-color-scheme의 용무지이다.
구문(@media 기본 색상 지정 체계):

<style>
    /* Your light mode (default) styles: */
    body {
        background: white;
        color: #393939;
    }

    @media (prefers-color-scheme: dark) {
        /* Your dark mode styles: */

        body {
            background: black;
            color: #ccc;
        }
    }
</style>

디자인 팁: 텍스트 색상으로 흰색prefers-color-scheme을 사용하지 마십시오.나는 대비도가 11.5 정도인 것을 발견했다. 본문에 있어서 매우 좋은 절충이다. 그다지 밝지도 어둡지도 않다.여기서 명암비를 확인합니다: https://contrast-ratio.com 또는 Chrome 개발 도구를 사용합니다.

2) 명암표 사이를 전환

짙은 색 배경에 있는 짙은 색 텍스트는 거의 보이지 않습니다. 이것은 바로 짙은 색 모드를 사용하는 전자 우편 클라이언트에서 로고를 볼 때 발생합니다.
오늘날, 전형적인 표지판은 보통 투명한 배경, 색깔의 아이콘과 검은색의 복사본을 가지고 있다.질문 보셨어요?전자 우편 클라이언트는 이미지 색을 반전시키지 않기 때문에 스스로 처리해야 합니다.
이 문제를 해결하려면 다음과 같이 하십시오.

이 문제를 해결하는 가장 간단한 방법은 투명한 배경이 아닌 흰색 배경으로 로고를 저장하는 것이다. 그러나 나는 이런 방법을 추천하지 않는다. - 짙은 색 모드 사용자는 좋아하지 않는다

어두운 배경에 옅은 색 로고를 배치하고 전자메일의 나머지 부분은 흰색 배경see how Litmus does it

암흑 모드 전자 메일을 기본 설정으로 설정하면 Spotify는 응용 프로그램에서 암흑 테마만 제공하기 때문에 좋은 선택입니다.

로고의 옅은 색과 짙은 색 버전을 포함하고 #fff 미디어 조회

를 사용하여 둘 사이를 전환합니다.
제가 가장 좋아하는 것은 마지막 방법입니다. 다음은 당신의 조작 방법입니다.
Simple prefers-color-scheme on the dark 로고는 모든 현대 전자 우편 클라이언트에게 적용되지만, 놀랍게도 Outlook과 Windows 10 Mail에는 적용되지 않습니다.
CSS 스타일에서:

<style>
    @media (prefers-color-scheme: dark) {
        .darkLogo {
            display: none !important;
        }

        .lightLogoWrapper,
        .lightLogo {
            display: block !important;
        }
    }
</style>

... 및 HTML 구조:

<image src="dark-logo.png" class="darkLogo" />

<!--
    To hide the light logo perfectly in Outlook and Windows 10 Mail, 
    you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
    <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

이런 방법은 매우 잘 일하지만, 여전히 전면적으로 정확하게 일할 수 없다.짙은 색 배경의 짙은 색 텍스트 문제는 짙은 색 모드를 지원하지만 지원되지 않는 전자 메일 클라이언트에서 발생합니다.바로 Outlook, Windows 10 Mail, Zoho 및 Gmail입니다.

따라서 전자메일의 로고를 완전히 방탄하기 위해 위의 방법 1)과 4)를 결합하겠습니다.메서드 1)에는 암흑 모드를 지원하는 모든 전자 메일 클라이언트가 포함되지만 포함되지 않습니다"display: none".메서드 4) Apple Mail, Outlook on macOS 및 Outlook을 포함합니다.com, 둘 다 지원합니다.
또한 로고를 흰색 배경에 저장하지 않고 3픽셀 너비의 배경 일치 테두리를 추가하고 평소처럼 투명한 배경에 저장합니다.
복잡하게 보이기 시작하기 때문에 HTML 태그를 먼저 살펴보겠습니다.

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
    <image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- Dark theme (so light logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
    <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

... 및 CSS 스타일:

<style>
    @media (prefers-color-scheme: light) {
        .darkLogoDefault,
        .lightLogo {
            display: none !important;
        }

        .darkLogoWrapper,
        .darkLogo {
            display: block !important;
        }
    }

    @media (prefers-color-scheme: dark) {
        .darkLogoDefault,
        .darkLogo {
            display: none !important;
        }

        .lightLogoWrapper,
        .lightLogo {
            display: block !important;
        }
    }
</style>

Gmail의 어두운 모드가 다가옵니다.

신형 안드로이드 10은 어둠 모드로 들어가고 Gmail도 결국 완전히 어두워진다.안드로이드 10과 최신 Gmail (최소 2019.09.01.268168002 버전) 만 있으면 됩니다.그러나 구글은 서버 사이드를 통해 점차적으로 사용자에게 새로운 기능을 활성화하는 경향이 있다. (이 예에서는 검은색 주제이다.) 나는 아직 이런 운이 없다.
Gmail이 @media prefers 배색 방안을 지원하는지 알고 싶습니다.내가 읽은 것을 보면, 이것은 그다지 불가능한 것 같다.나는 우리가 기다려서 보아야 한다고 생각한다.Gmail에서 어두운 테마를 사용하면 이 글을 업데이트합니다.

끝내다

HTML 이메일이 곧 어둠 모드로 들어갑니다. 좋아합니다!그러나 이것은 또 다른 걱정거리이다. 예를 들어 HTML 테이블을 사용하여 레이아웃하는 것은 부족하다.
Stay up-to-date about the dark mode in email by joining our mailing list . 우리는 또한 우리의 SaaS 제품Sidemail을 구축하고 발전시킬 때 직면한 견해와 도전을 공유했다.
읽어주셔서 감사합니다!