3 ms·
@media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}} One-liner inverts the brightness and preserves the orange.
by xingyzt 6y ago
@media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}}
One-liner inverts the brightness and preserves the orange.
- saagarjha 6y agoUnfortunately the colors are a bit too bright for the dark page.
- xingyzt 6y agoappend brightness(.9) to the end of the filter
- californical 6y agoThis is the hacker-est option, I love it. So simple
- dastx 6y agoThis surprisingly works well. One thing, the background of body is still white for me on desktop this is what I have (combine with someone else who commented about the brightness): @media (prefers-color-scheme: dark) { body { background: #222222; filter:invert(1) hue-rotate(180deg) brightness(0.9) } } Edit, also works on hn.algolia.com
- Liskni_si 6y ago> the background of body is still white for me Had the same problem, changed "body" to "html", added background: #fff, now it works. I turned it into a bookmarklet to make it easy to use on any website: javascript:styles='html {filter: invert(1) hue-rotate(180deg) brightness(.9); background-color: #fff; }'; newSS = document.createElement('style'); newSS.type = 'text/css'; newSS.innerHTML = styles; document.documentElement.getElementsByTagName('head')[0].appendChild(newSS);void(0);
- dastx 6y agoUse stylus to automatically inject it.