Question 394542 in Html Question posted in
Some basic documentation can be found here.

Html – How to override Microsoft Edge's (on iOS) CSS Dark Mode override?

Microsoft Edge for iOS has a browser "Dark mode" theme selector (Light, Dark, System default).

Under "Light" mode or "System default"** (**where iOS’s appearance is set to "Light"), everything happens as you might expect. Yay.

But, things get weird when the browser is under "Dark" mode (or "System default" mode="Dark"). Edge for iOS seems to be hellbent on super-overriding the web themes to be in "Dark mode" no matter what.

For example: Try visiting Stack Overflow with the Stack Overflow theme set to "dark", as well as your Edge for iOS browser theme set to "dark". The appearance is super weird, because Edge doesn’t respect Stack Overflow’s opinion of a "dark theme".

Another example, I have a simple theme selector for the user to choose (Auto, Light, Dark). "Auto" behaves by respecting the browser/OS preferences. It’s fine. "Dark" also works fine. But when I try to use the "Light" theme, the Edge for iOS browser super-overrides it to what it believes a dark theme ought to be. To put it simply: Edge in dark mode will override the user’s choice to use a light theme override. Bad Edge! Bad!

I think this is incorrect behaviour, and ought to be reported and fixed by Microsoft, but we are developers… so we don’t want to sit and wait around for that to happen.

Has anybody found a way to override Edge’s dark theme super-override?

Tags:

2

Answers


  1. 0

    Based on your description, I’d like to know what you mean by "super-overrides" that the Edge browser’s dark mode is automatically applied to all web pages, even if these pages have set light mode or something else. Please check whether there is a setting of "Dark theme for all web pages" when the dark theme is selected in the Edge appearance settings under the iOS system. If so, please turn it off and try to see if it returns to normal.

    Login or Signup to reply.
  2. 0

    I’ve also been trying to work this out and have found the following.

    If you go to the Edge browser on iOS and navigate to edge://flags, you can search for New Dark Mode. This states:

    "If enabled, force dark mode can be applied to all web pages when possible. – iOS"

    The default option is enabled, which means Edge is forcing dark mode (or attempting to) if system default is dark, or you select dark within the app, regardless of what you have set within your CSS.

    When you disable this setting you can override dark mode.

    So it looks like with this setting Edge isn’t honouring what you put in the CSS.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search