search

UWCS / uwcs-dextre

The University of Warwick Computing Society website for the 2020-21 academic year.
https://uwcs.co.uk
MIT License
1 stars 2 forks source link

Improvements to night mode #48

Closed Levelent closed 2 years ago

Levelent commented 2 years ago
joshdavies14 commented 2 years ago

Hesitant to switch blue and yellow back to standard UWCS versions in dark mode - they were originally changed for accessibility reasons. If you want to change them back then we will need to rethink the greys/blacks across the site as in a lot of places the contrast ration will be too little, hence the change in the first place. I've put the UWCS Blue in contrast checkers alongside the two main greys we use on the website in dark mode and without making the blue lighter like we have already or switching it out to something like white, we do not meet the contrast requirements set out in the WCAG guidelines, even with darker/lighter greys. (see https://webaim.org/resources/contrastchecker/?fcolor=3D5AFE&bcolor=2C3134 and https://webaim.org/resources/contrastchecker/?fcolor=3D5AFE&bcolor=2D3338)

This also affects the use of the primary colour across the front page, as you would be need to be using the slightly lighter hue as it stands for accessibility reasons, so it depends how you feel about this. If you have design ideas for where you want colours on the home page in night mode then let me known and I can play around/feedback to you.

Screen dividers and code blocks are easy fixes. Dividers between events slightly less so. This is because they aren't "dividers" in a normal sense, but the border of a card in Bulma (the CSS framework we use), and in dark mode, Bulma seems to lowers the weight of the card borders in dark mode. We can probably override this if you want but it could negatively affect the design, I haven't tried it to see yet.

joshdavies14 commented 2 years ago

Taking a closer look, we override the card border already in dark mode, not Bulma. I'll have a play around and report back

Nope, we use tiles which are different to cards. No sign of scss variables in the docs but I'll have a play at some point

joshdavies14 commented 2 years ago

I've fixed the background for code blocks, borders around events and section dividers/hr elements so far :+1: