MailMode Learn Technical reference

Outlook Dark Mode Behaviour in 2026

A technical reference for how Outlook desktop, web and mobile clients transform HTML email colours in dark mode.

Published: 4^th June 2026 Last updated: 4^th June 2026

engineWord / WebKit / Web

riskHigh variance

ruleTest real clients

Full invert risk

Classic Outlook Windows

Classic Windows builds, including Microsoft 365 classic Outlook, are the highest-risk Word/MSO/VML surfaces.

Partial invert

Outlook.com / Outlook Web

Contrast rewriting with Outlook-specific attributes such as data-ogsc and data-ogsb.

Mixed support

Outlook Mac + Mobile

More standards-friendly in places, but still inconsistent enough to need real-client testing.

This is an independent MailMode guide, not official Microsoft documentation. Outlook dark mode behaviour varies by client, app version, account type and rendering engine, so use this as a technical reference and verify important campaigns in real clients.

Key takeaways

Design defensively

Classic Outlook for Windows, including Microsoft 365 classic Outlook for Windows, is still the hardest Outlook surface to control.
Microsoft documents Outlook dark mode UI controls, but not a renderer-level HTML/CSS dark-mode specification.
Outlook.com and Outlook on the web should be treated as partial-invert-style surfaces where data-ogsc / data-ogsb attributes are commonly observed.
Outlook.com’s webmail behaviour is closer to contrast repair than a simple mathematical invert.
Outlook for Mac is more standards-friendly and can support @media (prefers-color-scheme).
Outlook Mac, Outlook iOS and Outlook Android should be treated as separate test targets with mixed CSS reliability.
Developers should design defensively and test real clients; recipient-side controls can override assumptions.

Client behaviour matrix

Outlook is not one renderer

Outlook behaviour notes are based on public Microsoft documentation, email-client support references and email developer testing sources. Behaviour can vary by app version, account type, rendering engine and Windows/Office configuration.

ClientRendering familyDark mode behaviourCSS supportControlRecommended strategy

Classic Outlook for WindowsWord / MSOFull invert riskMSO conditional, VML, limited CSS; no dependable @media supportLow controlUse defensive colours, MSO-only fallbacks, VML fixes and image-safe branding.

Microsoft 365 classic Outlook for WindowsWord / MSOFull invert riskSame classic Word-rendered family; Office channel and configuration can change detailsLow controlTreat as a classic Windows Outlook target and test the installed channel/version.

New Outlook for WindowsWebView / Outlook web familyMixed supportNo dedicated public dark-mode rendering matrix; web-family assumptions need verificationMedium controlDo not assume exact parity with classic Outlook or Outlook.com; verify on the target build.

Outlook.comWebPartial invertdata-ogsc, data-ogsb, contrast rewriting, OS/browser media-query caveatsMedium controlTarget Outlook attributes for critical fixes and avoid relying on stylesheet overrides alone.

Outlook on the web / Microsoft 365WebPartial invertSimilar webmail behaviour; account, tenant and version dependentMedium controlKeep contrast resilient and avoid fragile background assumptions.

Outlook for MacMac app / native familyMixed support@media can work in some paths; borders and element types can still behave differentlyMedium controlAuthor intentional dark CSS and test current app versions.

Outlook iOSMobile appPartial invertMixed dark CSS reliability; image swaps and data-ogsc need testingMedium controlPreserve image logos, avoid low-contrast pale panels and test iOS separately.

Outlook AndroidMobile appPartial invertMixed dark CSS reliability; data-ogsc duplication is often the safer patternMedium controlUse robust contrast and check transparent image assets.

Colour mechanics

What the client is likely doing

Outlook.com data-ogsc / data-ogsb patterns come from email developer testing of web Outlook behaviour. MSO conditional comments and VML are classic Outlook Windows techniques, not general Outlook fixes.

Outlook web

Contrast repair

Outlook.com/OWA behaviour is better understood as contrast repair than a global invert. Colours may survive if contrast already looks acceptable.

Algorithm clues

4.5:1 and CIELAB

Community-inspected webmail code points to a 4.5:1 contrast threshold and a CIELAB lightness remap before inline colour rewriting.

data-og*

Original values observed

Developer testing has observed web Outlook storing original colour/background values in data-ogsc, data-ogsb, data-ogac and data-ogab.

Classic Windows

Algorithm undocumented

Classic Outlook Windows is the highest-risk full-invert-style surface, but exact output still varies by version, Office channel and user setting.

Visual explainer

Full invert vs partial invert

Light email

Full invert result

Partial invert result

Broken result

CSS support matrix

What usually helps

@media (prefers-color-scheme: dark)Useful in standards-friendly clients.Do not rely on it for classic Windows Outlook.

color-scheme meta tagsSignals supported colour schemes.Helpful baseline, not a force field that opts Outlook out of recolouring.

[data-ogsc] / [data-ogsb]Outlook.com targeting hook.Useful for web Outlook colour corrections.

inline stylesStill the safest baseline.Assume web Outlook may rewrite authored inline colours after dark-mode processing.

!importantUseful, but not magic.Classic Windows support is partial and web Outlook may write its own inline !important.

bgcolorStill useful in table email.May be read and transformed separately from CSS backgrounds.

attribute selectorsKeep them simple.Useful in web/mobile Outlook patterns, not dependable in classic Windows Outlook.

MSO conditional commentsClassic Outlook fallback channel.Use for classic Windows Outlook-specific structure and fixes.

VML buttonsClassic Word Outlook button fallback.Dark mode can desync VML fill and CSS border/fill; this is not a new Outlook/web/mobile technique.

Broken examples

Common failure modes

Transparent logo disappears

What breaks: Dark artwork or transparent PNGs vanish on darkened backgrounds.
Affected clients: Full and partial invert clients.
Why it happens: The image is preserved while the surrounding colour changes.
Safer approach: Use light/dark logo variants or add a controlled backing shape.

VML button mismatch

What breaks: A darker rectangle can appear behind the text, or the VML fill and HTML layer no longer match.
Affected clients: Classic Outlook Windows.
Why it happens: VML fill, HTML background and text colour can be transformed through different paths.
Safer approach: Keep the inner Outlook-only link background transparent and test the exact Windows Outlook target.

White card turns black

What breaks: A white content card can become a dark panel with odd borders.
Affected clients: Aggressive forced-dark clients, especially classic Outlook Windows risk cases.
Why it happens: The client may rewrite the card surface for contrast.
Safer approach: Plan card hierarchy for both light and dark contexts.

CSS border does not match fill

What breaks: Button or card fill changes, but the border remains too bright or too dark.
Affected clients: Outlook web, mobile and classic variants.
Why it happens: Border and background colours are evaluated independently.
Safer approach: Use stronger contrast and test borders as separate assets.

Dark mode CSS remains active

What breaks: Outlook.com can keep dark CSS active after “Turn on the lights”.
Affected clients: Outlook.com / Outlook web.
Why it happens: Client-side attributes and media query handling can persist.
Safer approach: Avoid over-specific dark-only overrides that damage light mode.

Sliced corners tear apart

What breaks: Rounded image corners stay light while the surrounding CSS background darkens.
Affected clients: Outlook.com / Outlook web.
Why it happens: CSS colours are rewritten, but image slices are preserved.
Safer approach: Prefer real CSS radius, a single background colour or transparent artwork.

Divider lines stay too bright

What breaks: Thin rules and separators look harsh in an otherwise darkened section.
Affected clients: Outlook.com / Outlook web.
Why it happens: Border colours may not be changed with the surrounding background.
Safer approach: Use semi-transparent borders or softer divider treatments.

Code recipes

Small patterns worth testing

Base dark mode meta tags

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Standard dark mode CSS

<style>
@media (prefers-color-scheme: dark) {
  .email-body { background: #111827 !important; color: #f8fafc !important; }
  .card { background: #1f2937 !important; }
}
</style>

Outlook.com targeting

<style>
[data-ogsc] .email-body { background: #111827 !important; }
[data-ogsc] .card { background: #1f2937 !important; }
[data-ogsb] .button { border-color: #8b5cf6 !important; }
</style>

Exclude Outlook web from blunt media CSS

<style>
@media (prefers-color-scheme: dark) {
  .hero:not([class^="x_"]) {
    background: #111111 !important;
    color: #ffffff !important;
  }
}

[data-ogsb] .hero,
[data-ogsc] .hero {
  background: #111111 !important;
  color: #ffffff !important;
}
</style>

MSO-only fallback for buttons

<!--[if mso]>
<style>
  .btn-link { background: transparent !important; }
</style>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  href="https://example.com" arcsize="12%" fillcolor="#6d5dfc"
  strokecolor="#6d5dfc" style="height:48px;v-text-anchor:middle;width:180px;">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Book now</center>
</v:roundrect>
<![endif]-->

Limitations

What this guide cannot promise

You cannot force light mode everywhere

Outlook.com can write inline dark-mode styles, and classic Windows Outlook can perform forced transformations ordinary CSS cannot reliably block.

`data-og*` is undocumented

It is useful because Outlook webmail stores original values for its own behaviour, not because Microsoft exposes it as a stable developer API.

New Outlook is still a moving target

Microsoft separates new Outlook from classic Outlook, but public email-rendering matrices do not yet describe every New Outlook dark-mode build.

Recipient controls matter

Turn on the lights, light reading panes and “never change background” options are controlled by recipients, not your HTML.

MailMode simulation

How MailMode frames Outlook-style checks

MailMode previews are designed around the main dark mode rendering behaviours email developers need to reason about: no colour change, partial invert and full invert.

These are approximations. Treat Full Invert as a classic Outlook Windows risk check, Partial Invert as a web/mobile Outlook-style check, and Authored CSS as a standards-friendly check for clients that honour sender CSS. Final QA should still include live client testing.

No colour change Partial invert Full invert

References

Sources & Further Reading

Last Updated: 4^th June 2026Sources Reviewed: 4^th June 2026