Dark theme support

[wei]

Thanks for the awesome theme!

Is there anyway we could add dark mode support now that Primer css supports both light and dark themes?

[markavitale]

I really like this theme too! I haven't found anything else that completely gets out of the way of the content like primer does.

I'd also love built in dark mode support, especially if it uses the prefers-color-scheme media selector to automatically swap between themes based on the user's system preferences.

On my site I've been using a hack I found on https://news.ycombinator.com/item?id=26472246 to just invert colors when in dark mode that works fairly well. The tradeoff is that I haven't figured out how to use images without some color distortion (even when trying to de-invert images specifically) so I've just given up on having images.

Just put this css into your default template:

/* set the background color to black when client requests dark mode and invert the colors
   from post by user lewisl9029: https://news.ycombinator.com/item?id=26472246
 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        filter: hue-rotate(180deg) invert(90%);
    }
}

https://github.com/markavitale/markavitale.github.io/blob/main/assets/css/dark-mode-override.css

[wanghenshui]

I really like this theme too! I haven't found anything else that completely gets out of the way of the content like primer does.

I'd also love built in dark mode support, especially if it uses the prefers-color-scheme media selector to automatically swap between themes based on the user's system preferences.

On my site I've been using a hack I found on https://news.ycombinator.com/item?id=26472246 to just invert colors when in dark mode that works fairly well. The tradeoff is that I haven't figured out how to use images without some color distortion (even when trying to de-invert images specifically) so I've just given up on having images.

Just put this css into your default template:

/* set the background color to black when client requests dark mode and invert the colors
   from post by user lewisl9029: https://news.ycombinator.com/item?id=26472246
 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        filter: hue-rotate(180deg) invert(90%);
    }
}

https://github.com/markavitale/markavitale.github.io/blob/main/assets/css/dark-mode-override.css

works with images color inverted, thank you