logoalt Hacker News

mlysk • yesterday at 3:29 PM • 2 replies • view on HN

My goal is that it renders on GitHub as well as on my blog. GitHub doesn’t support css based dark mode afaik

Replies

tasuki • yesterday at 7:42 PM

Ah, you have a button for the toggle! Did you know that you can conform to the user's light/dark preference with CSS? Like this:

    :root { --varname: #FFE; }
    
    @media (prefers-color-scheme: dark) {
        :root { --varname: #022; }
    }
Edit: To expand on this, I dislike light/dark toggles. If I have dark mode on, seeing a bright screen and having to search for a toggle is jarring. Just show me the colours according to my preference!
➕ show 1 reply
pinjasaur • yesterday at 10:06 PM

Last I checked on this the workaround is embedding CSS inside an SVG, here's a demo: https://github.com/sindresorhus/css-in-readme-like-wat

I used this on a personal project to add a README logo that is dark mode friendly: https://paul.af/github-readme-dark-mode