haskellfoundation.github.io icon indicating copy to clipboard operation
haskellfoundation.github.io copied to clipboard

◐ adds dark mode theme

Open jzwood opened this issue 2 years ago • 2 comments

new Dark / Light themes

This PR introduces 2 color theme: light and dark. The light theme should be very similar to the previous website while the dark theme is completely new. Users can toggle between color modes from the main menu and side menu.

Motivation

In a recent talk, David Thrane Christiansen mentioned that he would like the Haskell Foundation Website to have a dark mode.

Notes

Most changes exclusively involve the new color palettes but out of necessity some files were cleaned including fixing indentation and invalid html.

Screenshot 2023-02-20 at 4 48 18 PM

jzwood avatar Feb 20 '23 21:02 jzwood

Thanks!

I fear I may have miscommunicated - I was looking for a dark mode for errors.haskell.org, which is hosted here: https://github.com/haskellfoundation/error-message-index/

That said, this seems to be overall useful :-)

I'll take a look at this soon, though it may take me a couple of days. A few concerns right of the bat based on screen shots and a quick skim:

  1. The change of the logo color to yellow definitely makes it easier to see on the very dark background, but I think we should keep our logo color consistent. The yellow especially communicates that we're identical to the donate link, which I don't think we are (we like donations, for sure, but we do much more than accept them).
  2. I think an explicit "theme" toggle seems out of place - I know CSS can talk about dark/light mode now, and then the user's browser will pick the one that it wants (e.g. I have a toggle dark/light menu item that does this for the browser and OS theme, and it's scheduled to follow sundown/sunup times). I would think that we should just respect that.
  3. I notice that the logo SVG was modified, changing some colors. I don't think we should change our logo right now.
  4. I'm afraid it will take a very long time to review this, because of all the scattered changes. Do you have a version of the history where all the reformatting was done in one commit, and where the other changes were done in a separate commit? If you have that on disk somewhere, that would make it much faster to read through.

Thanks again!

david-christiansen avatar Feb 21 '23 12:02 david-christiansen

Hi @david-christiansen, oops, sorry for the miscommunication. It was fun to do regardless. re your points:

  1. revert yellow Haskell logo to original purple one for light and dark mode

as you wish!

  1. make toggle theme tied to operating system preferences instead of manual

no problem!

  1. revert changes to icon

I can do that. I am most familiar with the 3 tone Haskell logo and the site currently has a 2 toned, stylistic, variation, but there's nothing wrong with that.

Screenshot 2023-02-21 at 8 39 42 AM
  1. Do you have a saner changelog?

I do not but I can easily make a new PR that breaks up all the changes between pure refactor (indenting, fixing invalid html, etc) and theme change.

Before I do any of the above I wanna work on the error-message-index dark/light mode before someone beats me to it.

Thanks for being open to un-asked-for changes!

jzwood avatar Feb 21 '23 13:02 jzwood