電子郵件內容的深色模式 dark-mode
深色模式可讓支援的電子郵件使用者端或應用程式針對文字、按鈕和其他視覺元素，顯示背景較暗且顏色較淺的電子郵件。 這種顯示器可減輕眼睛疲勞、節省電池壽命，並改善低光環境的可讀性，提供更舒適的觀賞體驗。 隨著主要作業系統和應用程式呈上升趨勢，這是現代電子郵件設計的重要考量，能確保內容清晰易懂，而且視覺上吸引所有使用者。
當您在視覺化設計空間中建立您的電子郵件內容Journey Optimizer B2B Edition時，您可以切換至 深色模式 檢視。 在此檢視中，您也可以定義特定的自訂設定，以便在啟用電子郵件使用者端的深色模式時支援這些使用者端。
電子郵件使用者端注意事項
不同的電子郵件使用者端和應用程式套用深色模式的方式存在重大差異。 因此，您應謹慎考量對於深色模式演算的期望。 在電子郵件設計空間中使用深色模式之前，請考慮以下電子郵件使用者端使用案例：
有些電子郵件使用者端完全不支援此功能，例如：
- Yahoo! Mail
- AOL
如果您在電子郵件設計中定義深色模式自訂設定，這些電子郵件使用者端無法顯示任何深色模式呈現。
有些電子郵件使用者端會系統地將其本身的預設深色模式套用至所有收到的電子郵件。 它們會根據其深色模式設定和無法使用的外部設定，自動調整顏色、背景、影像和其他元素。 這些使用者端包括：
- Gmail (案頭網頁郵件、iOS、Android™、行動網頁郵件)
- Outlook Windows
- Outlook Windows Mail
在此情況下，使用者端深色模式設定會覆寫您在Journey Optimizer B2B Edition中定義的自訂深色模式設定
許多最熱門的電子郵件使用者端都提供使用@media (prefers-color-scheme: dark)查詢來呈現自訂深色模式的選項，這是Journey Optimizer B2B Edition電子郵件樣式所使用的方法。 此使用者端清單包括：
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
在此情況下，將會轉譯您在Journey Optimizer B2B Edition中定義的特定設定。 不過，某些限制可能會根據每個電子郵件使用者端而適用。 例如，如果電子郵件內容中出現影像，部分使用者端(例如Apple Mail 16 (macOS 13))就不會產生深色模式。
為了獲得最佳結果，請使用您定位的電子郵件使用者端測試您的內容。 若要檢視儘可能接近每個使用者端最終結果的模擬，請在電子郵件設計空間中使用Litmus電子郵件測試轉譯整合。
深色模式設計
當您在Journey Optimizer B2B Edition中設定深色模式的電子郵件內容樣式時，視覺化設計空間提供兩種工具：
預覽預設深色模式 preview-dark-mode
-
在電子郵件設計空間中開啟電子郵件內容。
在畫布的右上方，有一個淺色與深色選取器，可切換淺色（預設）與深色模式之間的內容顯示。
-
將選取器變更為深色模式 （
畫布使用預設深色模式preview.x來顯示內容
根據預設，深色模式預覽會將
full color invert色彩配置套用至影像和圖示以外的所有元素。 此色彩配置會偵測包含明暗元素的區域，並加以反轉。 淺色背景變成深色，深色文字變成淺色，或深色背景變成淺色，淺色文字變成深色。
定義自訂深色模式設定 custom-dark-mode
切換至深色模式後，您可以選擇編輯內容的特定樣式元素，這些元素僅在收件者的電子郵件使用者端中啟用深色模式（前提是它支援該功能）時才會顯示。
電子郵件設計空間中的自訂深色模式樣式使用 @media (prefers-color-scheme: dark) CSS查詢，它會偵測電子郵件使用者端是否已設為深色模式，並套用您電子郵件中定義的深色主題設計。
若要定義自訂深色模式設定(T):
-
如有需要，請將選取器移至設計畫布右上角的深色模式 （
-
編輯任何樣式色彩屬性，例如文字、背景或按鈕。
-
針對影像和圖示，僅針對深色模式定義特定資產。
您無法變更影像和圖示的顏色，但可以定義用於深色模式的替代資產。 您可以嘗試圖示的不同顏色組合，或調整像片影像的顏色和飽和度。
選取任何影像，並使用 設定 窗格中的專用切換切換功能切換至深色模式。 然後，選取其他影像資產。
如需選取影像資產的詳細資訊，請參閱新增影像資產。
-
在您的設計變更期間，隨時選取切換到即時檢視，以檢查您的內容在各種裝置大小上的呈現方式。
從這個檢視，將選擇器變更為深色模式 （
note caution CAUTION 即時檢視是通用的預覽，用來比較各種裝置大小下的轉譯效果。 最終呈現內容可能會因收件者的電子郵件使用者端而異。 -
當您的深色模式變更完成時，請按一下模擬內容。
![電子郵件設計畫布上反白顯示[模擬內容]按鈕以測試深色模式](./media_1bc7292ef4cecfcdcc38b5342bb3db92c96a5373c.png?width=750&format=png&optimize=medium)
使用預覽和校訂工具來測試您的電子郵件設計。 如需詳細資訊，請參閱預覽和測試您的電子郵件內容。
-
如果您有Litmus Enterprise帳戶，請選取轉譯電子郵件，以檢視Litmus中各種電子郵件使用者端的最終深色模式轉譯。
如需詳細資訊，請參閱使用Litmus測試電子郵件呈現。
note caution CAUTION 雖然模擬非常接近電子郵件在深色模式中的顯示方式，但由於電子郵件服務提供者或裝置層級設定的差異，實際呈現可能會有所不同。
最佳做法 best-practices
隨著主要電子郵件使用者端採用深色模式的人數增加，您必須考量您的電子郵件在明暗環境中呈現的方式，不論您是否使用自訂深色模式。
深色模式可以改變顏色、背景和影像 — 有時會覆寫設計選擇。 為確保視覺一致性、協助工具及品牌完整性，請遵循下列最佳實務：
檢查清單：
- 將圖志和圖示儲存為具有透明背景的PNG檔案，以避免在深色模式中看到白色方塊。
- 避免使用硬式編碼白色或淺色背景的影像。
- 如果無法使用透明度，請在設計中將影像置於純色背景上，以防止發生尷尬的顏色倒轉。
檢查清單：
- 確保文字和背景顏色之間有足夠的對比，以便在淺色和深色模式中都能閱讀。
- 避免僅依賴背景顏色處理重要內容。 有些使用者端會以深色模式覆寫背景顏色，因此請確定關鍵資訊仍然可見。
檢查清單：
- 使用顏色組合，可輕鬆區別色盲人士。
- 使用中間調調色盤，確保與淺色和深色背景的對比。
- 使用具有高對比度的無障礙色彩組合，以改善可讀性並符合Web Content Accessibility Guidelines (WCAG)標準。 使用WebAIM Contrast Checker之類的工具來驗證色彩對比。
- 避免使用精簡字型，因為這會影響可讀性。 如果您的品牌需要細字型，請在深色模式中將其粗體。
- 略過純黑色的純白色，這可能會導致眼睛疲勞，而且在某些電子郵件使用者端中可能會自動反轉。
- 如果深色模式不受支援，請提供可存取的遞補樣式。