Improve theme color schemes

[ZhangYiJiang]

The current set of color themes are actually from syntax highlighting colors. This means that they were not properly tuned, unlike say visualization color schemes such as those from Colorbrewer (http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3), or Material's color system (https://material.io/guidelines/style/color.html).

To update the themes, update https://github.com/nusmodifications/nusmods/blob/master/www/src/styles/constants.scss#L44. Updating the code is not particularly hard, but making it look both aesthetically pleasing and usable is.

[jiholim]

For references / inspiration

1. https://flatuicolors.com/
2. https://brandcolors.net/

Useful tools:

http://www.colorbox.io/

[liaujianjie]

Maybe we can take a look at WCAG 2.0 for folks with vision impairments.

Inspiration & resources:

• https://webaim.org/resources/contrastchecker/
• http://clrs.cc/a11y/
• http://a11yrocks.com/colorPalette/
• https://randoma11y.com/

[ZhangYiJiang]

That's a great idea! We should also review our other use of color to ensure accessibility

[LeowWB]

Can I take this one? I'd also like to change the shade based on whether it's in Night mode, if you guys are fine with it.

[ZhangYiJiang]

Sure. You'll need to take care to write a migration so existing themes are not broken. Feel free to ask us if you need help on that