預覽並最佳化電子郵件設計在深色模式下的顯示方式

許多電子郵件客戶端都有深色模式設定，這可能會導致您的行銷電子郵件在啟用明亮外觀的客戶端中顯示的方式不一致。

預覽電子郵件在特定用戶端深色模式下的外觀

若要查看客服案件在啟用深色模式的瀏覽器或用戶端中開啟電子郵件時的外觀，請按照以下步驟操作：

• 按一下現有草稿電子郵件的名稱。
• 在電郵編輯器的右上角，點擊預覽，然後點擊收件匣預覽。
• 在預覽畫面上方，按一下「客戶」。
• 在深色模式下， 勾選要預覽的任何客戶端旁邊的核取方塊。

• 在右上角，按一下「立即測試我的電子郵件」。

針對深色模式設計電子郵件時的最佳做法

當您與不同的黑暗模式客戶端預覽電子郵件時，請記住，每個客戶端可能會以不同的方式呈現您的電子郵件。 例如，如果您的聯絡人使用Apple Mail開啟電子郵件，無論對方是否啟用深色模式，都會顯示完全相同的內容。 然而，如果客服案件在Gmail或Windows版Outlook等應用程式中啟用深色模式，您可能會注意到電子郵件樣式存在較大差異，例如背景顏色反轉。

若要確認客戶之間的電子郵件樣式是否一致，請參閱以下提示。

使用在淺色和深色背景上都能清晰顯示的圖片

在上傳影像並將影像新增到電子郵件之前，請將影像轉換為PNG檔案，這有助於確保它們會在電子郵件用戶端中呈現，從而在深色模式下自動反轉電子郵件的背景顏色。 如果影像中有文字（例如標誌） ，您還可以在文字周圍添加半透明輪廓，使其脫穎而出。

選擇網頁無障礙顏色

無論收件者使用哪種電子郵件用戶端，設計可存取的電子郵件內容都很重要。 遵守無障礙標準，例如檢查文字的色彩對比度，也有助於電子郵件在深色模式下正確呈現。 在HubSpot博客上了解更多有關網頁無障礙顏色的資訊。

在iOS中指定深色模式樣式的媒體查詢

包括Apple Mail和Outlook.com在內的幾個電子郵件用戶端透過媒體查詢提供有限的偵測與新增自訂樣式支援。 如果您正在使用更新的傳統電子郵件編輯器，並且有開發人員資源可以對電子郵件進行CSS更改，則可以使用prefers-color-scheme媒體功能添加媒體查詢，以配置圖像和文字在深色模式和淺色模式下的外觀