Dark theme support
wei opened this issue · comments
Thanks for the awesome theme!
Is there anyway we could add dark mode support now that Primer css supports both light and dark themes?
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
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