Allow for user to change to dark mode layout

[Sebastiaan127001]

Open issues:

• Listen for changes to preferred mode (https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript)
• Date picker dark mode => won't do for now.

[Sebastiaan127001]

This is more convenient for the eyes and could save energy on some displays :)

[Sebastiaan127001]

maybe a toggle like this in the top right of the black header bar
https://dev.to/joyshaheb/light-dark-mode-toggle-button-using-1-variable-2021-css-js-13l

[Sebastiaan127001]

see also this link for more info https://ryanfeigenbaum.com/dark-mode/

[fniessink]

I have looked into this a bit, but unfortunately Semantic UI React doesn't support this out of the box so it's not trivial to implement.

Most if not all Semantic UI React components have aninverted property that we can use. Dark/light mode can be a React context. We should look at the user preference specified in the OS settings if no dark or light mode is explicitly selected.

[Sebastiaan127001]

I have reviewed v3.34.0-rc.2.
This is already a very complete layout. Maybe some minor enhancement suggestions.
If I read through this page as a guideline and walk through each advice, I see the following.

• The white parts are too white to my opinion. According to the above article these should be off-white, like #121212 .

• The text in the middle of the pie charts at the top are not so readable.
  

• Furthermore, the red alerts when a source is not working could be more readable.
  

• Did it pass the AXE core contrast ratio test?

[fniessink]

The white parts are too white to my opinion.

Do you mean the white parts of the donut charts or the white texts?