Inconsistent Dark Mode Behavior in Edge on iOS

Ulaganathan, Shalini 20 Reputation points
2024-04-05T08:54:09.13+00:00

I've developed a web application that behaves differently in Edge on iOS compared to other browsers and platforms. Specifically, when the iOS system dark mode is enabled, Edge automatically applies dark mode to the web app, disregarding the prefers-color-scheme settings. This issue does not occur in Chrome or Safari on iOS, or in any browser on Android and Windows.

Issue Details:

Expected: The app should adhere to the specified prefers-color-scheme CSS media query settings, allowing for light or dark mode based on the app's design.

Actual: With the iOS system dark mode enabled, Edge forces the app into dark mode, ignoring the app's CSS preferences. This is isolated to Edge on iOS devices.

Seeking Solutions:

  1. Is there an Edge-specific meta tag or CSS rule that ensures respect for prefers-color-scheme settings?
  2. How can we prevent Edge on iOS from overriding the app's dark mode settings without affecting other platforms or browsers?

I'm looking for any advice or solutions to ensure consistent user experience across all platforms and browsers, particularly for iOS users on Edge.

Microsoft Edge
Microsoft Edge
A Microsoft cross-platform web browser that provides privacy, learning, and accessibility tools.
2,138 questions
0 comments
Accepted answer
  1. Markus Görlich 80 Reputation points
    2024-04-07T21:25:52.02+00:00

    The annoying default setting is to force a custom dark mode if the user uses dark mode in iPhone/iPad. You can disable the setting here:

    Hamburger menu ☰ (iOS) or Ellipsis … (iPadOS) > Settings > Appearance > Dark theme for all web pages

    This setting should be off (unchecked) by default as otherwise the styling is wrong. I didn’t find a way to prevent this behavior and override this flag.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. ShiJieLi-MSFT 7,471 Reputation points Microsoft Vendor
    2024-04-08T05:59:13.36+00:00

    Hi @Ulaganathan, Shalini,

    Please check if you have enabled the New Dark Mode flag on Microsoft Edge iOS. You can go to edge://flags and search for the flag. If you have enabled it, you can try disabling the flag and see if the problem can be fixed.

    What's more, please note Microsoft Edge iOS has a separate setting of Light/Dark Mode, which means you can specify Microsoft Edge Light/Dark Mode without following the system settings. Another option "Dark theme for all web pages" is also provided if you manually choose "Dark Mode". This might also be the cause to your problem. Try turning off this option and see the result.

    If you have concerns on this different behavior of Microsoft Edge iOS, you can send feedback from Microsoft Edge to the Dev Team to let them know.

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,

    Shijie Li