How to add dark mode to your website? Here is the code you need!
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:
body.dark-mode .targetElement {
background: #000000;
}
HTML
<button id="dark-mode-toggle">
<!--Moon is an inline SVG so you can edit the color if needed-->
<svg class="cs-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg>
<img class="cs-sun" aria-hidden="true" src="https://csimg.nyc3.digitaloceanspaces.com/Contact-Page/sun.svg" decoding="async" alt="sun" width="15" height="15">
</button>
CSS
/*CSS for Dark Mode Toggle
Copy and paste this code into it's own dark.css file. Keep all you dark mode
styles there, and make sure when you link to this sheet in your html head,
make it the bottom css link tag so it overrides all other styles.
At the bottom, that's where you start to add your dark mode styles by
starting starting with "body.dark-mode" and add your class you want to
target at the end. For example,
body.dark-mode .heading-one {}
then add your css properties like normal. That's it!
Scroll to the bottom to start adding your dark mode styles
/* Add this as it's own dark.css file and linked on all pages */
/*-- -------------------------- -->
<--- Core Dark Styles -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
:root {
--dark: #121212;
--medium: #282828;
--accent: #404040;
--bodyTextColorWhite: #fafbfc;
}
body.dark-mode {
background-color: var(--dark);
}
body.dark-mode p,
body.dark-mode li,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .cs-title,
body.dark-mode .cs-text,
body.dark-mode .cs-li {
color: var(--bodyTextColorWhite);
}
body.dark-mode .light {
display: none;
}
body.dark-mode .dark {
display: block !important;
}
.dark {
/* class used to hide elements that only need to be seen when dark mode is enabled */
display: none;
}
}
/*-- -------------------------- -->
<--- Dark Mode Toggle -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
body.dark-mode #dark-mode-toggle .cs-sun {
transform: translate(-50%, -50%);
opacity: 1;
}
body.dark-mode #dark-mode-toggle .cs-moon {
transform: translate(-50%, -150%);
opacity: 0;
}
#dark-mode-toggle {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 3.75rem;
width: 3rem;
height: 3rem;
background: transparent;
border: none;
overflow: hidden;
padding: 0;
}
#dark-mode-toggle img,
#dark-mode-toggle svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1.5625rem;
height: 1.5625rem;
pointer-events: none;
}
#dark-mode-toggle .cs-moon {
z-index: 2;
transition: transform 0.3s,
opacity 0.3s,
fill 0.3s;
fill: #000;
}
#dark-mode-toggle .cs-sun {
z-index: 1;
transform: translate(-50%, 100%);
opacity: 0;
transition: transform 0.3s,
opacity 0.3s;
}
}
/* Desktop */
@media only screen and (min-width: 64rem) {
#dark-mode-toggle {
position: relative;
top: auto;
right: auto;
transform: none;
margin-left: 1.875rem;
margin-bottom: 0rem;
}
#dark-mode-toggle .cs-moon {
/* change to whatever you need it to be */
/* fill: #fff; */
}
}
JavaScript
// Add this to your javascript file
//
// The Dark Mode System
//
// helper functions to toggle dark mode
function enableDarkMode() {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
}
function disableDarkMode() {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
}
// determines a new users dark mode preferences
function detectColorScheme() {
// default to the light theme
let theme = 'light';
// check localStorage for a saved 'theme' variable. if it's there, the user has visited before, so apply the necessary theme choices
if (localStorage.getItem('theme')) {
theme = localStorage.getItem('theme');
}
// if it's not there, check to see if the user has applied dark mode preferences themselves in the browser
else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
}
// if there is no preference set, the default of light will be used. apply accordingly
theme === 'dark' ? enableDarkMode() : disableDarkMode();
}
// run on page load
detectColorScheme();
// add event listener to the dark mode button toggle
document.getElementById('dark-mode-toggle').addEventListener('click', () => {
// on click, check localStorage for the dark mode value, use to apply the opposite of what's saved
localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
});
All you have to do is add the html button wherever you want it and adjust the css as needed to position it, add the dark.css to all your pages, copy and paste the dark mode javascript into your javascript file, and on the dark.css file, just write:
body.dark-mode #updates {
background: #000000;
}
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.
If you use LESS or SCSS then this gets alot easier because we can utilize the nesting CSS properties, like so:
body.dark-mode {
#sbs-1984 {
background-color: rgba(0, 0, 0, 0.2);
.cs-title,
.cs-text,
.cs-li {
color: var(--bodyTextColorWhite);
}
.cs-text,
.cs-li {
opacity: 0.8;
}
}
}
This way, you only need to write the body.dark-mode class once and nest all the dark mode styles for that section inside of it.
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.
