Outlook App vs. Dark Mode on iOS - A disaster

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 !important to override their override. But since a recent update they are now applying !important inline 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-ogsc to the element. And when changing a background-color style in darkmode, Outlook will add data-ogsb to 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.

<style>
  [data-ogsc] .darkmode{
    display:block !important;
  }
  [data-ogsc] .lightmode{
    display:none;
  }
</style>
<div style="color:#000">
  <div class="darkmode" style="display:none;">this is dark</div>
  <div class="lightmode">this is light</div>
</div>