How to add dark mode to a custom website in html and css
Ryan PostellDecember 15, 2020
Adding dark mode to your website in less than 5 minutes
In this post I will show you how to easily add a functioning dark mode to your webiste in less than 5 minutes without frameworks, and I provide all the code for you - including the toggle button.
To get right to it, here's the code for adding dark mode to your website. I recommend having a separate dark.css stylsheet for all your dark mode styles. All you have to do is copy and paste the html, css, and js into your project and use this selector in your dark.css to target a class to add the dark mode styles to:
What is happening is we we're setting new dark mode styles based on if the body has the dark mode class on it. The code is basically saying that when the body has the "dark-mode" class on it, select this element and add this style to it. When the body has the class removed, that code doesn't run becuase there is no dark mode class on body, so the background never gets changed to black. This code only be ran when the dark mode class is on the body. So all we have to do for each dark mode style is to preface the selector with "body.dark-mode" and that's it - you added a dark mode style! The toggle button I provided in the code above does all the work, so everytime it is toggled, the class gets toggled on and off the body, and dark mode is switched on and off. That's all you have to do. No crazy frameworks. Just good old fashioned vanilla code.
You’ll probably spend the most time positioning the button into your navbar or wherever you want it. Easiest solution is to absolutely position it. I place my button at the very top of my code so it’s the first thing a screen reader will focus on.
Why should I add dark mode to my website?
Adding dark mode to a website has been increasing in popularity after the Dominoes Pizza lawsuit opened the floodgates for more accessible websites. Before the lawsuit, web accessibility was just a nice feature to have if you had the money, but now it has become more of a necessity. Dark mode can help check off alot of the web accessibility issues with a website by removing contrast issues and accomadating those who wish to view everything with less brightness and harsh white light.
If you have never heard of web accessibility, welcome to the new world from under your rock. Web accessibility has to do with how people with visual, motor/mobility, auditory, seizure risks, and cognitive/intellectual disabilities use the web. What dark mode does is it enables developers to fix text with low contrast ratios to their background, and people with light sensitivities won't have as much trouble reading your website.
For example, when you’re working with a company’s brand, you often can’t just change their brand color to make it more accessible, so rather than changing the brand color on the text, we change the background that the text is on to straight black. But dark mode is not just about changing the background to black, it’s about transforming the website and its contents into a usable, beautiful layout.
Imagine the website elements as being stacked on top of each other. The bottom most layer (the body) will be the darkest, then if there is a card element on top of the body, that card's background will be a lighter shade, and if there's another dark element inside that card, it will be lighter than the card. That's a good rule to follow when making your dark theme. It looks a ton better when you use a visual hierarchy to show depth. Darkest elements go on the bottom, and they get lighter and lighter in color as elements keep stacking on top of each other.
Adding dark mode to a custom website is, in my opinion, one of those new trends in web development that you should try to add to all of your websites. It not only helps your website accessibility, but it also adds a "wow" factor to it. Dark mode will definitely distinguish your client from the rest of the competition and show a more forward thinking company that takes every aspect of their business seriously, including the website.