Support Windows High Contrast mode

[llemeurfr]

The High Contrast Mode is a system mode, where users can choose background and foreground color, buttons and links, selected text.

Support on this mode has to go through an evolution of Readium CSS.
Seems related to readium/readium-css#6 (themes) and somewhat related to readium/readium-css#65 (issue about highlight).

[JayPanoz]

Related ReadiumCSS module: ReadiumCSS-os_a11y.css (it’s more of a placeholder/WIP currently, because media queries are moving at a very quick pace)

Question though: does Electron have any ability to detect high-contrast-mode in Windows? (in order to pass a flag to ReadiumCSS)

Because currently, there’s -ms-high-contrast but it only works in Microsoft’s IE/Edge:

• MDN
• how-to

And the contrast/forced colors/transparency queries are currently being standardised in Level 5…

[JayPanoz]

Note you have to use an extension in Chrome for high-contrast: chromium low-vision page

[JayPanoz]

And related Electron issue: electron/electron#13178

[danielweck]

Related issue: #83

[danielweck]

See note about SVG icons:
#410 (comment)

[Scarsniik]

In the version of electron we are using, there isn't the event I need to use to detect that the high contrast mode is enable. When do you think you will migrate to electron 6 @danielweck ?

[danielweck]

ASAP. I don't want to leave this for later. Let's tackle the migration early on, so we can run lots of tests.

[danielweck]

Navigator first:
https://github.com/readium/r2-navigator-js/compare/feature/electron5?expand=1

[danielweck]

Testapp second:
https://github.com/readium/r2-testapp-js/compare/feature/electron5?expand=1

[danielweck]

Then when the NPM packages are published, we can migrate readium-desktop (but for LCP I will have to recompile the native libs for Windows, Linux, MacOS, 32/64 bits...)

[Scarsniik]

Ok, cool
Then I'll do it without the event and put it in WIP until we use the good version

[danielweck]

Also note that Electron6 has a known bug with Windows dark mode in developer mode (developer tools not compatible), so as developers, we must switch to light mode when using the dev tools.

[panaC]

https://electronjs.org/docs/api/system-preferences#event-high-contrast-color-scheme-changed-windows

[panaC]

https://www.electronjs.org/docs/tutorial/mojave-dark-mode-guide

[panaC]

what is the progress status of this issue ?

it's narrow linked with the css. It may rather be a dedicated task for the css master.

[danielweck]

Merged issue: #1726

Description

Under Windows, if a high-contrast theme is used, some of the elements in the UI of Thorium Reader are not visible. Examples of such elements are the buttons in the top toolbar and the button with actions for a book. See attached screenshots for examples.

Steps to reproduce

1. Enable high-contrast mode in Windows 11, by doing the following:
   1.1. Open Windows Settings (Windows+I).
   1.2. Go to Accessibility ➡ Contrast themes.
   1.3. From the "Contrast themes" combo-box, select any dark theme (e.g. "Night Sky").
   1.4. Activate the "Apply" button.
2. Launch Thorium Reader.
3. If you don't have any books added, add at least one.
4. Observe how the button with the 3 vertical dots (the one that opens the menu for a book) is not visible.
5. Open for reading one of the added books.
6. Observe how the buttons in the toolbar on the top are not visible.

Test environment

• Operating system: Windows 11 Pro version 21H2 (build 22000.795), 64-bit, in Bulgarian with all locale settings set to "Bulgarian".
• Thorium Reader version: v2.0.0, installed from the Microsoft Store.

[danielweck]

forced colours media query: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

prefers contrast: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

system-color: https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

https://www.tpgi.com/windows-high-contrast-mode-the-limited-utility-of-ms-high-contrast/

[danielweck]

Besides pure-CSS techniques, let's not forget Electron's own system preferences API: https://www.electronjs.org/docs/latest/api/system-preferences#systempreferencesgetcolorcolor-windows-macos
(we can also listen to colour theme change events)

[danielweck]

I don't think we will have time to implement this for Thorium 3.0 but definitely something to explore in 3.1 as a logical follow-up to the introduction of system dark/light modes and additional colour themes