<system-colors>
Hey everyone, my site I'm working on has a light/dark mode theme and I just finished implementing (making minor tweaks) for users of Windows Low/High Contrast Theme accessibility feature
3 Replies
that's what it looks like using one of the themes
In my site, as I mentioned, I have a light/dark mode toggle button at the top left
while in High Contrast mode, if I toggle the light/dark mode button, this is what happens
In Windows High Contrast mode, all color styles/box shadow and some other things are turned off, and the users High Contrast Color palette is respected
I am not trying to not respect the users high contrast theme, what I want to do is still provide the high contrast theme user the ability to change to light/dark mode
I realize that my light/dark theme button changes to a low/high contrast theme button when a user visits using a low/high theme contrast, which I find interesting
Instead of completely removing the option to change to low/high contrast theme for a contrast theme user by removing the low/high (light/dark) mode toggle button
I want to fix the issue I am running into which, is that for readability reasons, in contrast mode (forced-colors: active) browsers do this:
In addition to these adjustments, browsers will help ensure text legibility by drawing "backplates" behind text. This is particularly important for preserving contrast when text is placed on top of images.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
using the background-color property doesn't get rid of the backplates color on text
Only CSS based solution I can think of to use forced-colors-adjust:none for the titles/paragraphs when the bacground color is white
but this would exclude firefox users as forced-colors-adjust: none isn't supported by firefox browser
I think I found a solution, will close this until I need help again