Lower contrast CSS option

[acrymble]

I had a request today at a workshop for an alternate lower contrast css file for people who find white and black too hard on their eyes. If this is relatively easy it would be a good accessibility option.

[acrymble]

it looks like this tutorial walks through the process. It uses javascript

https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

[walshbr]

I am not sure exactly how to implement this, but it does seem like a good idea.

[mdlincoln]

It is a good idea, however I don't really have the CSS chops to implement this either. Can poll the rest of @programminghistorian/technical-team at our upcoming call to see if there's capaicty to take this on.

[mdlincoln]

I'm closing this out for now and adding it to our long-term feature request backlog, as we do not have the current skillset to implement this on top of our other high-complexity priorities. Will re-assess in 6 months.

https://github.com/programminghistorian/jekyll/wiki/Technical-Team#new-feature-backlog

[walshbr]

@ZoeLeBlanc I took an initial pass at this issue and pushed it to the contrast-mode branch. If you could pull it down and take a look I would appreciate it. Right now it's a button that sits in the nav bar (which is already too crowded to have something like this fit there, I think…

Some things I think I need thoughts on -

• Where should the button sit?
• Is it doing everything we want?
• How does the code need to be refactored?
• Is it an issue that this version of it accesses the user's browser state to remember their previous selection?

[acrymble]

@walshbr does the last item mean a cookie or similar? If so we have to add it to our privacy policy.

[walshbr]

I don't actually know the distinction to be able to say @acrymble. @ZoeLeBlanc would probably know? We can also disable that.

[ZoeLeBlanc]

Just pushed up a few tweaks to your branch. I tried to get night mode working with url parameters but it causes too many issues with in-lesson links (we would have to reload constantly). So instead I implemented this with sessionStorage, which does persist within a tab, but not between tabs or browser sessions (which localStorage does). If we decide to go forward with this, we'll definitely need to update the privacy policy.

For updating the nav bar, I think we could experiment with adding a smaller button (maybe with the crescent moon icon) in the nav so that it doesn't take up so much room. I wonder if we also want to try out making the nav bar sticky or adding a scroll to top button? Right now it's kind of a pain on the lesson pages to get back up to the top. Another option to try is having the night mode button float on the side. Final question is if we want to infer users location to activate night mode automatically?

In working on this, I realized we could get rid of URI.min.js and just use built-in URL functionality so I might once this is done redo some of the lessonfilter.js.

Thanks for all your hard work on this @walshbr 👏 🎉

[walshbr]

I can look at the nav bar design. @acrymble and @ZoeLeBlanc can you confirm that the way we're doing this is allowed by our privacy policy first? Or that we could at least update our privacy to allow it.

Inferring night mode seems a little unnecessarily slick, personally. I dig the idea, but I'm not sure we need to worry about it.