Liked
Implementing dark mode in a handful of lines of CSS with CSS filters
Post details
I finally got round to implementing dark mode for this site (the cobbler’s children have no shoes and all that…) Here’s all the CSS I had to add: @media (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ body { filter: invert(100%) hue-rotate(180deg); } /* Workarounds and optical adjustments. */ /* Firefox workaround: Set the background colour for the html element separately because, unlike other browsers, Firefox doesn’t apply the filter to the root element’s background.
This post was filed under likes.
Interactions with this post
Interactions with this post
Below you can find the interactions that this page has had using WebMention.
Have you written a response to this post? Let me know the URL:
Do you not have a website set up with WebMention capabilities? You can use Comment Parade.