Building out a #darkmode for your website is actually a whole lot of fun.
Along the way you often have to really think about how people use your website and solve lots of little design challenges to make things work in a lightweight way that doesn't involve having to essentially rebuild particular elements of your website from scratch.
For people interested in a really detailed look into this - check out Stack Overflow's recent blog post where they talk about how they overcame some of the challenges they faced updating such a massive and customisable website such as SO.
Currently I am building out the dark mode for my main business site - specifically the blog and resources areas, such as the SEO Glossary and all sub-pages. I figure these are the areas most likely to be viewed by technical people for longer periods, and means I don't have to completely overhaul the services landing pages initially - which will be a lot of work.
The footer area of the site has a small image that shows off our Offset Earth profile.
We need to invert this image to be white, rather than black - see the screenshots in my tweet below.
One trick to keep total page size down: rather than having multiple different images for each version of the page - use CSS to invert the colour of solid black/white images. In our footer we have the @OffsetEarth which can be easily changed to white with: filter: invert(1); pic.twitter.com/pjBEYmem2N
— colinmcdermott (@colinmcdermott) April 5, 2020
The simple solution? With just one snippet of CSS we can invert the colours of the image: filter: invert(1);
Here is a codepen I created to demonstrate:
So for example, using the dark mode media query, you might end up with something like this:
@media (prefers-color-scheme: dark) { img#SpecificFooterImage {filter: invert(1);} }
Or all images in the footer (class):
@media (prefers-color-scheme: dark) { .footer img {filter: invert(1);} }
Check out some extra stuff @ https://web.dev/prefers-color-scheme/#invert-vector-graphics-and-icons
Top comments (0)