What is dark mode and how to implement it?

At least for me, dark mode it not just making the background shade of black and the text white.

It’s more than that, and being in the latest trend, most of the websites are implementing it for better usability in night.

But why add a dark mode feature? Because

Saves battery Doesn’t strain the eyes of the user at night Doesn’t destroys the sleep of the user It looks good too if implemented properly.

Dark mode is for images too

You can totally skip this part if your website doesn’t have any images but, for those who have, what are you going to do for bright images that burn the eyes when peacefully scrolling through your website?

img { opacity: .75 }

You can try the same for videos too, but they might be a little risky to do as it might mess with the actual colors, the user might be trying to spread.

And you can do the same for a whole div with text and background images.

The best color scheme ever for dark mode and which I also use is this

If you have a div that’s a background, make the background totally black and the div above it a little light, like #212121 and if something above it to be #484848.

Basically, anything which you want the user to concentrate to, just make it light in dark mode as we do for text.

If you are simply adding a background which is dark blue or black and white text with a single class on the HTML tag, then sorry this is not dark mode, this is just a color scheme.

If you really are serious for dark mode then you should accommodate dominant and recessive colors accordingly.

Never make the text pure black, never nor the background

It increases the strain of eyes of a user, for text and background use light colors like dark gray (#444444)

For backgrounds, you may invert the colors.

For quick color references, I recommend FlatUI Color Palletes