feat: prefers-color-scheme: dark feature implement. Issue #645

[Baleksas]

#645

If media property matches of prefers-color-scheme: dark is true and CSS variables are set to defaults, dark background colour and white text colour will be applied. If the CSS variables are not default (customized by user), dark background or/and white text will not be applied (relatively to what was customized).

[christianp]

super, I'll look at this after lunch

[christianp]

It looks like this sets some default dark colours for the background and text inside the observable that watches the display options and sets the corresponding CSS properties.

This means that the display options modal can look misleading: with dark mode on, if you select a white background you instead get a dark one. If the student was looking to override their OS's preference, that would be impossible.

It also doesn't deal with prefers-color-scheme changing, which some devices do based on the time of day.

I think that when the display options modal is shown, the defaults should be set based on the current value of prefers-color-scheme. If the user selects the default values, then we are in a "default behaviour" mode and the colours should be handled entirely by CSS. The JS code should only set the CSS properties if the user selected something other than the default.

The default values can be given in CSS by something like this:

:root {
    --background-colour: #ffffff;
    --text-colour: #000000;
}
@media (prefers-color-scheme: dark) {
    --background-color: #000000;
    --text-colour: #ffffff;
}

When the JS code sets properties on the body element, they will take precedence over these.

[Baleksas]

Right, that's what I tried at first. I just tied choosing specific elements and setting their colours manually. I forgot that media queries can overwrite global variables. I overthinked this issue perhaps.

[Baleksas]

It now should change default values which can be seen in a modal and only uses default if default is chosen accordingly.

[christianp]

Thanks, I've tried it and it now seems to work how I intended.

It turns out the defaults are set in bootstrap.css, so I've moved the dark-mode defaults there too. I changed the default dark-mode background to pure black: #515151 is far too light, and will make ensuring AAA constrast difficult.

There are lots of other colours that need to change in dark mode, including but not limited to:

• links
• buttons
• input boxes with feedback styling (e.g. unsubmitted, incorrect, correct)

If you have any more time, please try to fix some of these. Use the accessibility inspector to aim for AAA contrast ratios, and ensure it's at least AA.

[Baleksas]

I am trying to reinstall the editor, it's still doesn't work but I will try as soon as I do