Outlook App vs. Dark Mode on iOS - A disaster
Has anyone played around with the iOS Dark Mode and the Outlook App?
We have realised that the Outlook App completely messes up our email desing. The reason seems that Microsoft does what Apple did in some of the early Betas of iOS 13: they invert the colors in the email if you are using dark mode. The inversion seems to be made by bitwise inversion on the hex code defining the color.
Neither defining the background / text color attributes on the elements nor a outlook app specific css definition can solve the issue.
I have written a simple acid test to showcase the behaviour.
The (send ready) source can be found here:
Acid test html
Here you can find a comparison of the rendering on different phones / apps in differend light/dark mode settings:
Outlook App Version 4.7.0 (the latest one) in iOS behaves the same.
The Outlook App specific elements are shown on the app, thus we know that the method for targeting the Outlook App works (except for colors in dark mode).
Has anyone run into the same issues and found a solution for it?
The app appears to work in the same way as teh webmail. So they replace your colours and inline the styles.
Previously we could override this by adding a class with
!importantto override their override. But since a recent update they are now applying!importantinline so we can no longer override the changes they make.I was digging around a little yesterday and I found when changing a color style in darkmode, Outlook will add
data-ogscto the element. And when changing a background-color style in darkmode, Outlook will adddata-ogsbto the element.So we can target this with something like
[data-ogsc] .foo{}We still have the issue of not being able to change colours but we can make other adjustments to try and fix some of the styling.
Here's some code to try out, for me this works in both webmail and iOS app.
Thanks for that insight. Wasn't aware that the web mail has the same dark mode.
I tried to trick it by adding background/text colour on a nested element. But it seems they modify the colours recursively or constantly scanning it...
Tried this:
<style type="text/css">
[data-ogsb]>* { background-color: yellow; }
[data-ogsc]>* { color: pink; }
</style>
But unfortunately it ditn't work as expected, the colors (pink and yellow) get "dark-moded" too...
Anyone try using this on links? I tried the following with no success:
<style>
[data-ogsc] .darkmode{
color:#B05F20; !important;
}
</style>
Then this bit in the body of the email:
<a href="#" target="_blank" style="color: #B05F20;" class="darkmode">request a password reset</a>
I'll keep monkeying around as I wouldn't be surprised if I hadn't done it correctly.
Hi Hans,
Have you tried using @media prefers-color-scheme: dark
See more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Thanks,
Lee.
Hi,
unfortunately, the media query does not affect the display in the Outlook app (version 4.7.0) on iOS. There is an option in preferences in the app itself to enable "Light" mode again (Settings - Appearance - "Light" instead of "System Default").
In fact, only a few apps do support the media query you mentioned (for example the native mail client of iOS - this works only if there is no accessibility feature like "Smart Invert" or "Classic Invert" enabled - and Edison Mail).
Our testing results showed that only Outlook, Edison Mail, Mail.ru, Yandex.ru and QQ Mail are changing the colors if dark mode is active. In Outlook, Edison Mail and Mail.ru it's possible to change the display mode to "light" in preferences of the apps.
Test device: iPhone 7, iOS 13.1.2
Apps tested: iOS native mail, Gmail, Outlook, Yahoo, AOL, GMX, Web.de, Freenet.de, Blue Mail, myMail, Spark, Edison Mail, Mail.ru, Yandex.ru, Interia.pl, O2.pl, WP.pl, email.cz, QQ Mail
Cheers
Ulrich