Support prefers-color-scheme / dark mode

[LukeMoll]

The prefers-color-scheme CSS media query can be used to optionally apply CSS rules when the users browser/OS requests a dark theme. Given the light background of the HackSoc website, and the nocturnal nature of many students, especially computer scientists, this is a good opportunity to spare some retinas. Supporting a dark theme is also considered a good feature for accessibility.

A suggested approach for anyone who might work on this:

• Many of the colours on the website are defined using CSS variables in hacksoc-colors.css. First, ensure that all colours on the website are using variables in this file (define new ones if required).
  • The calendar uses a separate stylesheet as it is only present on the front page. However, the same approach will apply to the calendar as well. Many of its colours are defined in variables, again check that there are none defined explicitly.
• Add a second set of colour definitions inside an @media query, so that when it matches, the different set of colours are applied.
• Rules for the dark-mode colours could include (in additional to aesthetic taste)
  • Minimum contrast ratio between foreground text and background colour
  • Maximum luminance ('L' value in HSL) for background colours (eg page, info-boxes, calendar cells)
  • (These values can often be seen easily in browser developer tools)