It seems like Microsoft Edge's "Dark Mode" on iOS has a mind of its own. While it works as expected on Chrome, Safari, Firefox (iOS), and Chrome, Safari, Firefox, and Edge (OSX/Windows), I'm encountering some issues specifically with Edge on iOS.
Ideally, I would prefer for Edge not to use dark mode at all. If that's not possible, my next best option would be to target Edge's Dark Mode on iOS specifically and apply some CSS overrides. However, I've been struggling with this as Edge on iOS doesn't seem to pay attention to the "prefers-color-scheme: dark" property either.
To address this, I first added the following meta tag:
<meta name="color-scheme" content="only light">Prior to that, I had used:
<meta name="color-scheme" content="light">Additionally, I included the following CSS based on the Chromium spec from here:
:root {
color-scheme: only light;
}
This solution worked perfectly in other environments, but unfortunately did not work on Edge iOS.
In an attempt to override this behavior, I utilized JavaScript to add a CSS target:
$(document).ready(function(){
if (
window.matchMedia &&&
window.matchMedia('(prefers-color-scheme: dark)').matches &&
/EdgiOS/.test(navigator.userAgent)
) {
document.body.classList.add('ios-edge-dark');
}
});
Along with CSS styling like this:
.ios-edge-dark {
.hero-type-2 {
.feature-icon {
filter: $main-filter-neg;
}
}
}
Despite properly targeting Edge iOS and having functional code, there is a issue when the user is in InCognito-mode where the condition for Light Mode is mistakenly triggered.
To further investigate, I tested if Edge iOS would respond to a media query in CSS:
@media (prefers-color-scheme: dark) {
.ios-edge-dark {
.hero-type-2 {
.feature-icon {
filter: $main-filter-neg;
}
}
}
}
However, Edge (iOS, InCognito) still behaves inconsistently. At this point, I am running out of ideas and beginning to feel reminiscent of dealing with IE issues.
I came across a post discussing similar problems but without a clear resolution: here
If anyone has a solution to this problem, I would greatly appreciate it! I am willing to try any workaround, even if it involves a messy JS-based approach like the one I attempted earlier. Thank you in advance!
P.S.: I have detailed the issue extensively in hopes of assisting others facing the same challenge. If you are experiencing similar difficulties, please share your attempts at finding a fix. I am open to adding those suggestions as well.