Outlook.com inlines text and background color in dark mode

[theotherstevenc]

In most scenarios, outlook.com inlines CSS background:color as rgba, while leaving the original declaration in the head.

EXAMPLE 1

original html/css markup

.foo {
  height: 50px;
  background: red;
  font-size: 50px;
  color: white;
}

<div class="foo"></div>

rendered as:

.rps_ca92 .x_foo {
  height: 50px;
  background: red;
  font-size: 50px;
  color: white;
}

<div class="x_foo" data-ogsb="" style="background-color: rgb(238, 0, 0);"></div>

EXAMPLE 2

original html/css markup

.foo {
  height: 50px;
  background: red;
  font-size: 50px;
  color: white;
}
.bar {
  background: green;
}

<div class="foo bar"></div>

rendered as:

.rps_ca92 .x_bar {
  background: green;
}
.rps_ca92 .x_foo {
  height: 50px;
  background: red;
  font-size: 50px;
  color: white;
}

<div class="x_foo x_bar"></div>

EXAMPLE 3

original html/css markup

.foo {
  height: 50px;
  background: red;
  font-size: 50px;
  color: white;
}
.foo {
  background: red;
}

<div class="foo"></div>

rendered as:

.rps_ca92 .x_foo {
    background: red;
}

.rps_ca92 .x_foo {
  height: 50px;
  background: red;
  font-size: 50px;
  color: white;
}

<div class="x_foo" data-ogsb="" style="background-color: rgb(238, 0, 0);"></div>

[revelt]

Just to add 2p., it's always best practice to use 6-character hex color codes and nothing else. rgba, 3-letter short version hex and others are naughty and will cause only trouble.

[theotherstevenc]

Good call @revelt. I've run another check, and this issue may be specific to color selection.

#9f1a2c is untouched, while #ff0000 is still inlined as rgba

.rps_ca92 .x_foo {
    height: 50px;
    background: #9f1a2c;
    font-size: 50px;
    color: white;
}
.rps_ca92 .x_bar {
    height: 50px;
    background: #ff0000;
    font-size: 50px;
    color: white;
}

<div class="x_foo"></div>
<div class="x_bar" data-ogsb="" style="background-color: rgb(238, 0, 0);"></div>

[hteumeuleu]

The data-ogsb attributes are added by Outlook.com's dark mode. I think that if you don't have dark mode enabled, this behavior is not happening.

[hteumeuleu]

@revelt Do you have any example of three letters hex causing problems in CSS? Hex colors must be 6 characters in HTML attributes (like <font color="#000000">), but that's per HTML specification and it's not email specific. But I see people keep repeating that rule even for CSS and I've never been able to find an example of 3 hex colors failing in CSS.

[theotherstevenc]

@hteumeuleu you are correct about the the dark mode! Probably not worth testing further to determine which colors are affected. Best to simply remain aware that dark mode can have unwanted effects.

[revelt]

@hteumeuleu — no, I haven't researched where exactly 3-digit hexes break, but it seems I've seen issues. Let me have a look.

[hteumeuleu]

A solution recently suggested onthe #emailgeeks Slack (sorry I can't remember by whom) for text colors is to wrap your text in a <span> and add a color to that span only in dark mode. For example:

<style>
@media (prefers-color-scheme: dark) {
	.dark-span {
		color: green;
	}
}
</style>
<h1 style="color:red"><span class="dark-span">Hello world</span></h1>