HTML email 背景顏色在 Gmail/mobile/iOS/dark 模式下不顯示

Question

介紹信息

我為 email 編寫了 MJML 代碼，然后將其轉換為 HTML。 結果，一切正常，但如果滿足以下條件，則不顯示背景顏色：

• email 客戶端為 Gmail
• 使用手機版
• 深色主題處於活動狀態
• 操作系統是 iOS

例子

為mj-wrapper標簽和mj-section標簽設置了背景顏色：

• <mj-wrapper background-color="#27273F" background-url="https://drive.google.com/uc?export=view&id=1Xn1xfvaC97HohG_eE-IktLq8fkAGghV8" background-size="cover">
• <mj-section padding-left="32px" padding-right="32px" background-color="#27273F" />

這是它在桌面上的樣子（正確）：在此處輸入圖像描述

Here's what it looks like in the mobile version of Gmail on android (the same for the gmail mobile iOS version using light theme) (correctly): enter image description here

如果您使用深色主題（不顯示 bg-color (#27273F)），這就是 iOS 上 Gmail 的移動版本中的樣子：在此處輸入圖像描述

問題

您能幫我找出導致問題的原因以及如何解決嗎？

附加信息

GitHub 鏈接- 在這里您可以看到 HTML 和 MJML 代碼

謝謝

Answer 1

Gmail iOS 暗模式無需考慮即可對您的顏色進行完全反轉。 因此，即使是深色 email 也會在“深色模式”下變為淺色，正如您所經歷的那樣

此外，Gmail iOS 不提供諸如@media（首選顏色方案）之類的控件。

我注意到圖像沒有倒置。 也許將橫幅作為圖像看起來不錯，在底部淡入透明（保存為 png24）。 然后在淺色模式下，它會淡入深色，但在深色模式下，它會淡入淺色。

可能會或可能不會工作的更多技術選項可能是（未經測試）具有您想要的顏色的 1x1 像素背景圖像，然后使用此 hack 使文本保持白色： https://www.hteumeuleu.com/2021/修復-gmail-dark-mode-css-blend-modes/ 。