防止iOS Dark mode破壞信件版型

自從iOS有了Dark mode之後,因為系統會自動複寫背景、文字顏色等等,造成要寄給客戶的信件,整個變得亂七八糟。越單純的版型越不會受影響,但假設有設字體顏色等等,就很容易變得不協調,或是深色字直接看不到。如果版型複雜一點,要針對Dark mode去做兩種顏色的適配真的非常麻煩。

能不能不讓Dark mode影響版型呢?
一開始只是試著去對每個背景色或是文字顏色加上!important,但似乎還是會被複寫。那如果背景是一張圖呢?Bingo! 幫背景加上一張底圖後,容器內的樣式就不會被強制複寫了!因此,只要在最外層加上背景圖就沒問題了。

於是最終的方式,只要在樣式表中加上:

body {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=');
}

base64中encode的是一個1px寬高的白色背景圖。也可以依照需求用這個網站做出不同顏色的背景圖。調整好顏色後,把Base64 Encoded Pixel下的亂碼複製起來,換掉下面誇胡的部分即可。

body {
background-image: url('data:image/png;base64,[換掉這裡]');
}