HTML 이메일에서 다크 모드를 활성화하는 방법 – 알아야 할 모든 것

새로운 iOS 13 업데이트로 Apple Mail은 어두운 테마를 갖게 됩니다. 즉, prefers-color-scheme를 지원하는 최초의 주요 이메일 클라이언트입니다. CSS 미디어 쿼리. 이제 어두운 테마와 밝은 테마 모두에 맞게 이메일을 디자인할 수 있습니다.

나는 엄청난 다크 모드 팬이고 눈부시게 밝은 이메일은 나의 천적입니다. 그래서 iOS 13의 다크 모드에 대해 알게 되었을 때, 나는 유일한 명백한 일을 했고 모든 것을 테스트하기 위해 새로운 iPhone을 주문했습니다.

그 동안 문제를 일으키는 Outlook을 포함하여 거의 모든 이메일 클라이언트에서 다크 모드가 작동하는 방식도 테스트했습니다. 여기 내가 찾은 것이 있습니다.

하지만 먼저,선호하는 색 구성표는 무엇입니까?
prefers-color-scheme CSS 미디어 쿼리는 사용자가 밝은 테마를 선호하는지 어두운 테마를 선호하는지 감지하는 데 사용되므로 둘 모두에 대해 특별히 이메일을 디자인할 수 있습니다.

iOS 13 업데이트로 가장 인기 있는 이메일 클라이언트의 지원이 2.3%에서 38.4%로 증가 ! Apple Mail의 인기 덕분에 큰 발걸음을 내디뎠습니다. 놀랍게도 Outlook은 Apple Mail 이전에 이를 지원하는 유일한 이메일 클라이언트였습니다.

인기 있는 이메일 클라이언트에서 다크 모드가 작동하는 방식

이메일 메시지 자체를 어둡게 만들기 위해 이메일 클라이언트는 자동으로 뒤에서 이메일의 색상을 반전시킵니다. 일반 사용자 간 이메일의 경우 모든 이메일 클라이언트에서 일관되게 잘 작동합니다.

그러나 대부분의 받은 편지함을 채우는 맞춤 HTML 이메일의 경우에는 그렇게 간단하지 않습니다. 거래 및 판촉을 말하는 것입니다.

이메일 클라이언트가 다크 모드 이메일 렌더링을 처리하는 방식에서 발견한 차이점은 다음과 같습니다.

* 인기도는 확실하게 구별할 수 없기 때문에 동일한 이메일 클라이언트에 대해 모든 플랫폼에서 공유됩니다. 인기 출처: 2019년 이메일 클라이언트 시장 점유율, Litmus .

(원본 게시물을 방문하여 테스트에서 얻은 메모를 확인하고 점차 더 많은 이메일 클라이언트를 테스트하고 먼저 기사를 업데이트하면서 최신 테스트를 확인하세요.)

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>

디자인 팁: 순수한 흰색 #fff을 피하세요. 텍스트 색상으로. 본문의 명암비는 약 11.5로 너무 밝지도 너무 어둡지도 않은 좋은 절충안이라는 것을 알았습니다. https://contrast-ratio.com에서 명암비를 확인하거나 Chrome 개발 도구를 사용하세요.

2) 밝은 로고와 어두운 로고 간 전환

어두운 배경의 어두운 텍스트는 거의 눈에 띄지 않으며, 이것이 바로 로고가 어두운 모드가 활성화된 이메일 클라이언트에서 볼 때 발생하는 현상입니다.

오늘날 일반적인 로고는 일반적으로 투명한 배경, 다채로운 아이콘 및 어두운 사본이 있습니다. 문제가 보이시나요? 이메일 클라이언트는 이미지 색상을 반전하지 않으므로 직접 처리해야 합니다.

이 문제를 해결하기 위해 다음 중 하나를 수행할 수 있습니다.

1. 투명한 배경 대신 흰색 배경으로 로고를 저장합니다(이를 수정하는 가장 쉬운 방법). 하지만 이 접근 방식은 권장하지 않습니다. 다크 모드 사용자는 만족하지 않을 것입니다.
2. 어두운 배경에 밝은 로고를 넣고 이메일의 나머지 부분은 흰색 배경에 유지합니다(Litmus의 방식 참조).
3. 다크 모드 이메일을 기본 이메일로 설정합니다. Spotify는 앱에서 어두운 테마만 제공하므로 이에 대한 좋은 후보가 될 것입니다.
4. 로고의 밝은 버전과 어두운 버전을 모두 포함하고 prefers-color-scheme로 전환 미디어 쿼리

내가 가장 좋아하는 방법은 마지막 방법이므로 다음과 같이 하십시오.

간단한 "display: none" 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>

이 접근 방식은 꽤 잘 작동하지만 여전히 전반적으로 올바르게 작동하지 않습니다. 어두운 배경의 어두운 텍스트 문제는 어두운 모드를 지원하지만 prefers-color-scheme을 지원하지 않는 이메일 클라이언트에서 발생합니다. . Outlook, Windows 10 Mail, Zoho 및 잠재적으로 Gmail입니다.

따라서 이메일의 로고를 완전히 방탄으로 만들기 위해 위의 방법 1과 4를 결합합니다. 방법 1은 다크 모드를 지원하지만 prefers-color-scheme는 지원하지 않는 모든 이메일 클라이언트에 적용됩니다. . 그리고 방법 4는 Apple Mail, MacOS용 Outlook 및 두 가지를 모두 지원하는 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의 다크 모드가 온다

새로운 Android 10에서 다크 모드가 Android에 제공되며 Gmail도 마침내 완전히 어두워집니다. Android 10과 최신 Gmail(최소 버전 2019.09.01.268168002)만 있으면 됩니다. 그러나 Google은 서버 측 푸시를 통해 점진적으로 사용자를 위한 새로운 기능(이 경우 어두운 테마)을 활성화하는 경향이 있으며 현재로서는 운이 좋지 않습니다.

@media prefers-color-scheme 지원 여부가 궁금합니다. Gmail에 옵니다. 내가 읽은 바에 따르면, 그것은 유망하지 않은 것 같습니다. 나는 우리가 알아낼 때까지 기다려야 한다고 생각합니다. Gmail에서 어두운 테마를 활성화하면 기사를 업데이트하겠습니다.

마무리

HTML 이메일에 다크 모드가 적용됩니다. 정말 마음에 듭니다! 하지만 레이아웃에 HTML 테이블을 사용하는 것만으로는 충분하지 않은 것처럼 걱정해야 할 또 다른 문제입니다.

메일링 리스트에 가입하여 이메일의 다크 모드에 대한 최신 정보를 얻으십시오. 또한 SaaS 제품인 Sidemail을 구축하고 성장시키는 동안 직면한 통찰력과 과제를 공유합니다.

읽어주셔서 감사합니다!