klembot / twinejs

Twine, a tool for telling interactive, nonlinear stories
https://twinery.org
GNU General Public License v3.0
2k stars 295 forks source link

Windows app: colours are removed by Electron if Windows is in a High Contrast theme #1211

Open webbedspace opened 2 years ago

webbedspace commented 2 years ago

image image

As you may or may not know, recent versions of Windows Chrome (hence Electron) detect whether Windows is in "High Contrast" mode, and, if so, removes colours from HTML elements (but not SVG images) in the web page. This is something of a problem for Twine, because a lot of colour-related cues (such as passage tags) are now missing. It's not even clear whether any of the passages are selected in the story map.

This can be disabled by simply adding html { forced-color-adjust: none; } to the CSS. Although you should ideally attach forced-color-adjust: none to just the colourful elements of the Twine UI (such as most of the story map elements and the CodeMirror panels), for now it'd be fine to just apply a global fix (so that the UI is actually functional again) before deliberating on the most correct way to do this.

Twine version number

2.4

Does this problem occur with the web version of Twine or the desktop app?

Desktop app

What operating system does this problem occur on?

Windows

If this problem is occurring with the web version of Twine, what browser does it occur on?

No response

Presubmission checklist

klembot commented 2 years ago

I don't think disabling high-contrast mode, even on a temporary basis is a good idea as it's disabling assistive technology. (But I'm not an accessiblity expert, and if the conventional wisdom runs opposite, I'm open to reconsidering.) The concept to me is akin to saying, Twine doesn't support right-to-left locales (which I don't think it does fully) so force users into LTR mode. I think the right move is to properly support high-contrast mode, which is a worthwhile task but definitely a significant amount of work.

greyelf commented 2 years ago

Based on this Chrome Platform Status report there are two new Forced Colours related CSS features: a forced-colors media feature, which can be used to detect if the end-user has enabled a forced colours mode; and the previously mentioned forced-color-adjust property, that can be used to opt-out specific elements.

klembot commented 2 years ago

Had more time to think this through, and I think I was wrong in my initial comment. Having low-contrast but functional UI is better than unusable UI, so the band-aid @webbedspace proposed initially seems like the right move for now. But I think building an actual high-contrast mode is a good idea.