Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
forced-colors support in Firefox
Firefox 89 now supports the forced-colors media query (by default): support for detecting and adjusting pages when the OS theme is set to e.g. Windows High Contrast themes (a bit of a misnamed setting, it is any “forced colours” theming). MDN doc is here. Microsoft Edge already fully supported it for a few versions. Theoretically, Chrome should support it as well as all the code is in Chromium, but I am not sure if it is enabled by default.
This is also good news for people developing on macOS, as they can now do some basic testing from macOS using Firefox. Emphasis is on basic, as macOS does not really support the forced-colours theme concept in the spec sense of the word (Windows way of theming).
Open Firefox -> Preferences, scroll down to the “Language and Appearance” subgroup, then click the “Colours” button. From the drop down below ‘Override the colours specified by the page […]’ choose “Always”.
Have fun testing…
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: forced-colors support in Firefox
Yep, Philippe.
It’s much better now. And the support for forced-colors is supported:
@media screen and (-ms-high-contrast: active),(forced-colors: active){
}Patrick.
Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.
Offline
Re: forced-colors support in Firefox
Firefox still doesn’t support force-color-adjust though; that is a bit annoying as in some cases, being able to use the site colours is helpful – think the error/warning/success message boxes in Textpattern admin.
–^–
In related news, Safari 14.1 release now supports the prefers-contrast: more media query (reflects the user setting in the System preferences / accessibility.
–^–
Patrick, yes that combined media query should be supported.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: forced-colors support in Firefox
oh Firefox 91. such a naughtyness…
turn ON the “Increase contrast” macOS system preferences.
Launch Firefox 91.
….. (silence)
Be shocked to see most (web) pages display in a high contrast theme (black on white).
Firefox now supports the prefers-contrast: more MQ but decided rather aggressively this would equate to the “Only with High Contrast themes” browser preferences (Under “colours”). The ugly thing is: that is the default Firefox setting… not really nice to the user who prefers some more contrast at the OS level1.
Solution: toggle that dropdown to “Never” and pages return to the more expected display.
–^–^–
On the plus side, Firefox 91 support the prefers-contrast: more media-query, and when used by a stylesheet renders accordingly (as long as the “never” option is selected above).
1 it seems Firefox support people rather poorly advice people to toggle the OS setting instead. <sigh />
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: forced-colors support in Firefox
phiw13 wrote #331430:
it seems Firefox support people rather poorly advice people to toggle the OS setting instead.
<sigh />
From what I can see, the Firefox support people are now suggesting both options as a possible solution: either change the OS preference or change the Firefox preference, as outline above.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: forced-colors support in Firefox
I missed this but since earlier this year, Chromium browsers have a toggle in the developper tools to emulate the forced-colors MQ. Melanie Richards has nice intro write-up. That emulation is available on all platforms. Not perfect but very very useful.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: forced-colors support in Firefox
A useful intro on this at Smashing Magazine: www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline