Having Dark Mode Functionality Can be a Game Changer

I was always in favor of having dark mode functionality, but I never wanted to have it here(!) because I thought it requires massive coding adjustments. My position has changed after reading the article at dev.to about dark mode functionality, and I have it here already.

Huge thanks to Ananya Neogi for authoring the awesome article, it could take much longer to have it here without her contribution. The article covers everything you need to enable dark mode functionality in a simple site. You’ll find it easy if you are a medium-level web developer!

Here’s the dark mode functionality by Ananya CodePen demo:

See the Pen
Create A Dark/Light Mode Switch with CSS Variables
by Ananya Neogi (@ananyaneogi)
on CodePen.

You must refactor CSS styles mentioned in this demo to make all the styling work because it’s not written in pure CSS format, adjust the nested CSS styles to solve this.

It’s also necessary to use CSS variables for the dark theme styling. You should learn CSS variables if you still don’t to avoid unnecessary CSS rules for the dark theme design.

You may notice the slow loading of dark theme preference. To set up user’s theme settings early, add the following JavaScript code to your website’s header:

const savedTheme = localStorage.getItem( 'theme' );
if (savedTheme) {
    document.documentElement.setAttribute( 'data-theme', savedTheme );
};

That’s all before publishing the simplest way to enable dark mode functionality! Stay updated for the upcoming article. Join in comments for more thoughts.

Direct Link to dev.to

Leave a Reply

Email address will not be published. Remember to keep comments follow our guidelines.