上次更新時間： 2025年6月6日
可搭配下列任何訂閱使用，除非另有註明：
行銷 Hub
Professional
,
Enterprise
|
| 舊版 Marketing Hub Basic |
許多電子郵件用戶端都有暗色模式設定，這可能會導致您的行銷電子郵件在開啟較亮外觀的用戶端中出現不一致的情況。
在電子郵件編輯器中切換暗色模式預覽
若要在設計電子郵件時切換至深色模式預覽，請按以下步驟：
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「電子郵件」。
- 按一下已起草的電子郵件名稱 。
- 在電子郵件編輯器的頂端，按一下顯示選項，然後開啟黑暗模式預覽 開關。
預覽電子郵件在特定用戶端暗色模式下的外觀
若要查看當聯絡人在啟用了暗色模式的瀏覽器或用戶端開啟您的電子郵件時的外觀：
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「電子郵件」。
- 按一下現有已草擬電子郵件的名稱。
- 在電子郵件編輯器的右上方，按一下預覽和測試，然後選擇收件匣預覽。
- 在預覽畫面的上方，按一下用戶端。
- 在黑暗模式下，選取您要預覽的任何客戶端旁邊的核取方塊。
- 在右上方，按一下立即測試我的電子郵件。
為黑暗模式設計電子郵件時的最佳做法
當您使用不同的暗黑模式用戶端預覽您的電子郵件時，請記住每個用戶端可能會以不同的方式呈現您的電子郵件。例如，如果您的聯絡人使用 Apple Mail 開啟您的電子郵件，無論他們是否啟用了暗黑模式，電子郵件的顯示方式都會完全相同。但如果聯絡人在 Windows 上的 Gmail 或 Outlook 等應用程式中啟用了暗色模式，您可能會發現電子郵件的樣式有更大的差異，例如背景顏色倒置。
若要確認您的電子郵件樣式在不同用戶端之間是一致的，請檢閱下列提示。
使用在淺色和深色背景上都能清晰顯示的圖片
在您上傳和新增圖片至電子郵件之前，先將圖片轉換為 PNG 檔案，這有助於確保它們能在電子郵件客戶端中呈現，這些客戶端會在深色模式中自動反轉電子郵件的背景顏色。如果您的圖片中有文字，例如標誌，您也可以在文字周圍加入半透明的輪廓，讓它更突出。
選用網頁可存取的顏色
無論您的收件者使用何種電子郵件用戶端，設計可存取的電子郵件內容都很重要。遵守無障礙標準，例如檢查文字的顏色對比，也有助於您的電子郵件在暗模式下正確呈現。在 HubSpot 網誌上瞭解更多關於網頁無障礙色彩的資訊。
在 iOS 中指定媒體查詢以使用暗模式樣式
包括 Apple Mail 和 Outlook.com 在內的幾個電子郵件用戶端，對於透過媒體查詢來偵測和新增自訂樣式提供了有限的支援。如果您正在使用更新的經典電子郵件編輯器，而且您有開發人員資源可對電子郵件進行 CSS 變更，您可以使用prefers-color-scheme 媒體功能新增媒體查詢，以設定圖片和文字在暗模式和亮模式下的外觀