The only line of code you need for dark mode.
If you are a web developer and always wonder about easiest way to apply dark mode to your website this is the right place you came to.
From last few years users are shifting towards using dark mode over light mode on there phones, websites ,etc.
As a developer your job is to make your apps as good as you can for the end user, so having a dark mode to your websites is a really good practice.
In this blog we are gonna use CSS filters to apply dark mode to your websites. And remember it is only gonna be one line of code I promise. By the way have you seen this 👇 meme???
It’s kind of true right??😂. Well now let’s get back to work.
So the only line of CSS code you need it this👇
filter: invert(1) hue-rotate(180deg);
You need to apply this line of code to html and image tag on body in your website to get the dark mode.
What does this line do?
Well the invert function inverts the color samples in the input image and the hue rotate function rotates the hue of an element and its contents.
Conclusion:
apply filter: invert(1) hue-rotate(180deg); to your image and html tags to get the dark mode.
please checkout one of my projects for example: Text to binary converter (string-to-binary-converter.netlify.app)
