While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides and articles on the matter, none of the suggested solutions proved effective.
I attempted to resolve the issue by adding the following meta tags:
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
While Outlook on iOS responded correctly to these tags, Gmail on iOS did not.
Further efforts to address the problem included trying to override the display using the following media tag:
@media (prefers-color-scheme: dark ) {
#header {
background-color: black!important;
height: 60px;
padding-left: 15px;
padding-right: 15px;
/* padding: 17px; */
}
#headerLink{
color: white!important;
}
}