이메일의 다크 모드가 채택되고 있습니다... 지원 방법은 다음과 같습니다.
다크 모드는 화면 에너지 사용량을 줄이고 집중력을 높입니다. 일부 사용자는 눈의 피로가 감소한다고 말하지만 이는 질문을 받았다.
다크 모드 채택이 계속 증가하고 있습니다. 이제 다크 모드는 macOS, iOS, Android 및 Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail, Reddit을 포함한 다양한 앱에서 사용할 수 있습니다. 그러나 각각에 대해 항상 완전한 지원이 있는 것은 아닙니다. 이메일 기술이 발전하는 경우가 흔하지 않기 때문에 이메일에서도 다크 모드 지원이 채택되는 것을 보는 것은 좋은 일입니다.
28년 2021월에는 사용자 중 2022%가 다크 모드를 시청했습니다. 34년 XNUMX월에는 그 숫자가 거의 XNUMX%로 증가했습니다.
리트머스
모범 사례, 구현할 코드, 클라이언트 지원을 이해하는 것은 다크 모드 구현에 성공하는 데 매우 중요합니다. 이러한 이유로 Uplers 팀은 다크 모드에 대한 이 가이드를 게시했습니다. 이메일 지원.
최근 DK New Media 다크 모드를 통합한 클라이언트용 Salesforce Marketing Cloud 템플릿을 개발하여 이메일 클라이언트에서 볼 때 이메일 섹션을 극적으로 대조했습니다. 이는 구독자의 참여도와 클릭률을 높일 수 있는 노력입니다.
다크 모드 이메일 코드
1 단계 : 이메일 클라이언트에서 다크 모드를 활성화하기위한 메타 데이터 포함 – 첫 번째 단계는 다크 모드 설정이 켜져 있는 구독자의 이메일에서 다크 모드를 활성화하는 것입니다. 이 메타데이터를 꼬리표.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
2 단계 : @media에 대한 다크 모드 스타일 포함 (컬러 스키마 선호 : 다크) –이 미디어 쿼리를 삽입 된 tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019(macOS) 및 Outlook 앱(iOS). 이메일에 윤곽선이 있는 로고를 원하지 않는 경우 다음을 사용할 수 있습니다. .dark-img
과 .light-img
아래와 같이 수업을 진행합니다.
@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
3 단계 : [data-ogsc] 접두사를 사용하여 다크 모드 스타일 복제 – Android 용 Outlook 앱의 다크 모드와 호환되도록 이메일에 다음 코드를 포함합니다.
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
3 단계 : 본문 HTML에 다크 모드 전용 스타일 포함 – HTML 태그에는 올바른 다크 모드 클래스가 있어야합니다.
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->
다크 모드 팁 및 추가 리소스 이메일
나는 일하고있다 Martech Zone 다크 모드를 지원하는 일일 및 주간 뉴스레터… 여기에서 구독하십시오. 대부분의 이메일 코딩과 마찬가지로 다양한 이메일 클라이언트와 고유한 코딩 방법으로 인해 간단하지 않습니다. 내가 겪은 한 가지 문제는 예외였습니다. 예를 들어 어두운 모드에 관계없이 버튼에 흰색 텍스트가 필요했습니다. 코드의 양이 좀 터무니없네요... 다음과 같은 예외가 있었습니다.
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
몇 가지 추가 리소스 :
어두운 모드 지원을 위해 이메일 템플릿을 변환하려면 주저하지 말고 다음 연락처로 문의하세요. DK New Media.