adds OS controlled dark mode

[jzwood]

Changes

• removes all theme-dependent colors from default css
• adds theme.css with a dark and light color palette that respects the OS theme settings

How to Test

• run site locally
  • stack run -- site watch
  • navigate to site: http://localhost:8000/
• Chrome/Safari (macOs)
  • go to settings > appearance
    • toggle between Light and Dark mode and see that the page changes color modes
• Firefox (macOs)
  • open developer tools and toggle between sun and moon icon (see ss)

Related Issue

• Support for dark mode #353

Screen Shot

[david-christiansen]

I'll give it a proper test soon!

As far as screenshot-based feedback goes, I have a couple questions:

• The contrast between the light text and dark background is very high, but the same is not true for things like module names in the code sample (it also looks like the code sample's syntax highlighting is thoroughly off in both sides, but I suspect that this is unrelated to the PR). Looking at e.g. GitHub's dark theme, the contrast between the very dark background and ordinary text seems to be a bit less. How should we think about selecting the right contrast and thus text color?
• Headers like "Examples" and "Error messages" are very low-contrast, making me think that they are not important.
• The pink links seem to jump out quite a bit compared to the other theme
• Is there a distinction between visited and unvisited links? The current light theme has one, and it would be interesting to know the reasoning.

I'm not at all an expert in design, please answer my questions in ELI5 mode if possible :-) I'll also test it with the GNOME dark mode setting and Firefox - I don't have a Mac handy to test with, but that's what you're using, so this gets us a bit more coverage at least.

Thank you!

[jzwood]

Hi @david-christiansen, thanks for preliminary feedback. You brought up some great points.

I agree that the dark mode headers are too dark and the text is too bright. I made the headers brighter (by eye) and the text a bit darker (to match Github) so that feels a little better. In terms of finding a balance, it's a tad tricky b/c accessibility guidelines recommend high contrast over low but dark users tend to abhor high-contrast UI 😅.

I quite like the pink links but I'm not married to any of these colors so we can tweak as needed. That shade of pink was lifted from how hackage styles links.

Re visited vs unvisited links -- my understanding is that the different link states exist for 2 interconnected reasons.

• These distinct states are how links have worked since the beginning of the web so maintaining that behavior will make using the site more intuitive/familiar
• There are accessibility reasons for having link states be visually distinct although I admit it's unclear to me how that's applicable for specifically visited links.

Final thoughts: note that I've adding instructions for testing the theme with Firefox and I wanted to clarify that I have not tampered with the light theme at all. It looks like the syntax highlighting is coming from highlight.js so picking out a different theme would be a separate work issue if you wanted something prettier? 😃

[david-christiansen]

I've adding instructions for testing the theme with Firefox

That part I could have figured out, but thanks!

I wanted to clarify that I have not tampered with the light theme at all

Right - thanks! It is in-scope if necessary though, the visual design of the site is mostly a placeholder for something beautiful. It does the job, but it's clearly the result of some quick patches on my initial highly-minimalist CSS that I threw together in very little time.

The Highlight.js issue seems to be a configuration one - I hadn't notice the issue before looking at screenshots here. I agree that it's a separate issue.

[david-christiansen]

Ah, I just saw that Hackage has dark mode - perhaps the best thing to do is to just take their design and colors and run with it.

[david-christiansen]

Thanks for your patience!

I'm far from an expert in CSS, so please take any suggestions with a grain of salt. Generally speaking, I really like the use of variables to structure things and make it easier to maintain over time. Variables have only been supported since 2017 in Edge, but Firefox has supported them since 2014 and most other browsers since 2016. I suppose six years is long enough to wait, Haskellers are demographically likely to have updated browsers, and the HTML is semantic enough that the whole thing should be reasonably readable with defaults.

Generally speaking, the whole CSS code became easier to read with these changes.

I left some detailed comments in the code. Thanks again!

[jzwood]

Thanks for the thoughtful questions, comments, and suggestions! I think I captured the relevant feedback. Commit 1 addresses those callouts and the next one updates the header and anchor colors to match Hackage's light theme, re your suggestion. 😃

[david-christiansen]

Will merge as soon as CI is green. Thank you very much!

[jzwood]

🥳