High contrast mode on Windows overrides CSS of a compiled app

[kr4ft3r]

Hello,

TLDR: System colors on Windows 10 are overriding CSS colors for background and text. Only visually, as the inspector is showing the correct colors that are ignored during rendering. I think this has to do with high-contrast, can such behavior be disabled?

My Windows 10 is a bit "rinced", in that it is using high-contrast mode with black background, and the system font color is replaced in the registry (the only way to do it). Some browsers use this black background as default when CSS is missing a background property, but if CSS is present the system settings should not interfere.

However, with both development and release Tauri apps, all the backgrounds that do not have background images are replaced with black, and the text is always of color defined in the registry. In other words, the system colors override the background and font colors set with CSS. I have tried with both inline and CSS file styles, including adding the "!important" attribute.

The inspector in dev mode shows that correct CSS color should be used, but this is ignored on render. I did not yet see any browser behave in such a way. Is there some obscure Tauri setting that should fix this?

[FabianLars]

I did not yet see any browser behave in such a way

Did you also check Edge? It's the closest browser to the webview we use. Generally we have no influence on CSS behavior, that's all webview internal so i can't think of a setting that would help here 🤔

But i guess there's something because the issues here https://github.com/MicrosoftEdge/WebView2Feedback/issues?q=is%3Aissue+contrast almost sound like the opposite behavior.

[kr4ft3r]

Thank you for looking into it, I posted the solution. This was nasty one because I am making a game that should look the same anywhere without Microsoft messing it up, almost gave up on Tauri.

[kr4ft3r]

Luckily, I found a solution. This behavior is explained here https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

All I had to do was:

body {
    forced-color-adjust: none;
}

You may also target specific affected elements if you wish to allow users to have their preferred experience but prevent overwrites of specific background colors (I recommend that for apps, but I am making a game so can't allow any of that nonsense):

@media (forced-colors: active) {
    .some_element {
        forced-color-adjust: none;
    }
}