Site dark mode suggestion

[DavidWhitlock]

From a student in Winter 2022:

I'm just gonna casually spam your email inbox here, but in the name of accessibility I wanted to make a suggestion of adding a dark-mode toggle/automatic detection for your site. Dark themes are useful for eye strain anyways, but CSS now includes a way of working with system preferences automatically to choose a theme -- in cases where users have their device set to system-wide dark mode, it can be a bit jarring to have pages load with solid white backgrounds when everything else is automatically darkened. This page has a few more details on it: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

But the short ezpz option is just throwing in a media query in the CSS: @media (prefers-color-scheme: dark) { ... } and setting the background-color to something dark, and the color property to something light in a body tag.

Apologies if this is totally annoying, after taking the full-stack web dev course here I've spent more time thinking about web accessibility and user comfort and I figured you'd appreciate a low-overhead option for making your site more comfortable to read. Let me know what you think.

Thanks!

[not-eric]

I did a little bit of experimentation in Chrome and wrote the following code to play around with the background and text colors, as well as the link colors (as the default dark blue/violet colors weren't a great fit):

@media (prefers-color-scheme: dark) {
    body {
        background: #121212;
        color: #eee;
    }
    a {
        color: #980F5A;
    }
    a:visited {
        color: #570530;
    }
}

Which yielded the following:

It's definitely a fine-tuning process of picking color palettes, I think the dark rose I used for visited links is probably a smidge too dark, but that's more or less the implementation I was seeing in my mind's eye. A slightly lighter gray, like Google, or a more blue-dark-gray like Github uses could be better candidates.

[DavidWhitlock]

Awesome. Feel free to put up a Pull Request if you find a color scheme that you like. I appreciate your extra effort to make the website more accessible.