Skip to content

Outlook.com dark mode adds white background behind images on hover #162

Description

@HowToDisappear-Dev

Email Client

  • Outlook.com webmail (dark mode only)

Operating System

  • Webmail
  • Operating systems: Windows, macOS

Expected Result
Images should not have any background color applied on hover, maintaining their transparent or original state.

Actual Result
Outlook.com's preprocessing automatically adds the class WjXVs to all <img> tags. This class is then targeted with the following CSS:

.WjXVs:hover {
  background-color: var(--neutralDark);
  transition: background-color 1s;
}

The --neutralDark variable resolves to white #FFFFFF, creating a visible white background behind images on hover in dark mode.

This affects:

  • Images inside links (<a><img></a>)
  • Standalone images (not wrapped in links)

Steps to reproduce

  1. Create an HTML email with one or more <img> tags (with or without wrapping <a> tags)
  2. Send the email to an Outlook.com email address
  3. Enable dark mode in Outlook.com webmail settings
  4. Open the email in the webmail interface
  5. Hover over any image
  6. Observe a white background appearing behind the image with a 1-second transition

Additional context
Probable reasoning behind this behavior:
This appears to be an accessibility measure by Outlook.com to ensure that PNG images with dark tones remain visible in dark mode (when the background switches from white to dark). However, this implementation has several accessibility issues:

  1. It uses :hover instead of :focus, which doesn't help keyboard navigation users
  2. It creates the opposite problem: images with light/white tones on transparent backgrounds (e.g., white logos) become invisible on hover

Solution:
Add the following CSS rule in the <style> tag of the email to override Outlook.com's default hover behavior:

[data-ogsc] img:hover {
  background-color: transparent !important;
}

This targets Outlook.com specifically (via the data-ogsc attribute) and forces images to maintain a transparent background on hover, preventing the unwanted white background from appearing in dark mode.

Metadata

Metadata

Assignees

No one assigned

    Labels

    OutlookWindows, macOS, iOS, Android and Outlook.com

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions