alan-turing-institute / AutSPACEs

Code respository for AutSPACEs: the Autistica/Turing citizen science platform
MIT License
34 stars 18 forks source link

[Ready for Review] Implement dark theme option #649

Closed helendduncan closed 4 months ago

helendduncan commented 5 months ago

Expected behaviour

On first load of the page detects users' system theme, and sets the theme to the corresponding option (light/dark)

Button added in Nav bar to toggle between light and dark modes. If selected, the selected theme is stored in Local Storage.

Some re-defining classes in the css file to match the bootstrap defaults for more consistent switching from light to dark mode, and added a "grey" copy of the flowchart on the help page.

Things that perhaps need review/thought.

Closes #604

github-actions[bot] commented 5 months ago

Coverage report

This PR does not seem to contain any modification to coverable code.

helendduncan commented 5 months ago
Screenshot 2024-02-04 at 00 50 51

This is a page on dark mode

Screenshot 2024-02-04 at 00 51 02

This is also a page on dark mode

Query @gedankenstuecke - which is the preferred behaviour? Dark text in the colour header or for it to stay as white when you switch to dark mode? My initial intuition is that the text should be dark on dark mode?

gedankenstuecke commented 5 months ago

Thanks for all the work on this @helendduncan!

I think typically dark mode is similar to "inverting" the colours, with mostly dark-ish backgrounds and light grey/off-white text on top of it. In that sense the second one is probably closer to that.

The top one might have the problem of being too low-contrast depending on accessiblity needs?

tl;dr: if non-dark mode is already "white text on darker background" we might want to keep it that way in dark mode too :)

gedankenstuecke commented 4 months ago

Also re-worded the navbar item a bit, happy to have it merged now!