Dark Mode: A Stey-By-Step Guide
This is the code I use to impliment dark mode across all my websites. Set up is a cinch. Feel free to hijack for your own projects.
I'd suggest having a separate dark.css stylesheet for all your dark mode styles. Simply copy and paste the HTML, CSS, and JavaScript into your project, and use this selector in your dark.css to target a class for those dark mode styles:
body.dark-mode .targetElement {
background: #000000;
}
HTML
<button class="dark-mode-button top-dark-mode-button"">
<span aria-hidden="true" class="dark-toggle">
<span class="DTspan"></span>
</span>
</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
*/
/* note that Internet Explorer does not support css variables */
:root {
--dark: #000;
--medium: #1b1b1b;
--light: #2e2e2e;
}
.dark-mode-button {
background: transparent;
border: none;
height: 40px;
width: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.top-dark-mode-button {
position: absolute;
top: 60px;
right: 15px;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 1000;
-webkit-transition: .3s ease-in;
-o-transition: .3s ease-in;
transition: .3s ease-in;
}
.top-dark-mode-button .dark-toggle {
background: rgb(230, 230, 230);
border-color: rgb(230, 230, 230);
width: 35px;
}
.top-dark-mode-button:after {
content: 'DARK';
position: absolute;
color: #fff;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 22px;
top: 10px;
-webkit-transition: .1s ease-in;
-o-transition: .1s ease-in;
transition: .1s ease-in;
}
body.dark-mode .top-dark-mode-button:after {
content: 'LIGHT';
color: var(--primary);
top: 12px;
}
.dark-toggle {
margin: 0;
width: 30px;
height: 16px;
z-index: 20;
border-radius: 10px;
background: transparent;
border: 3px solid #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 1000;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
align-items: center;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
body.dark-mode .dark-toggle {
background: rgb(67,183,255);
background: -o-linear-gradient(left, rgba(67,183,255,1) 0%, rgba(0,221,246,1) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(67,183,255,1)), to(rgba(0,221,246,1)));
background: linear-gradient(90deg, rgba(67,183,255,1) 0%, rgba(0,221,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43b7ff",endColorstr="#00ddf6",GradientType=1);
border: none;
}
.dark-toggle span {
height: 20px;
width: 20px;
left: -8px;
border-radius: 50%;
background: #fff;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
body.dark-mode .dark-toggle span {
left: 15px;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.top-dark-mode-button .dark-toggle {
background: rgb(230, 230, 230);
border-color: rgb(230, 230, 230);
width: 35px;
}
/* Begin adding your dark mode styles here, like so: */
body.dark-mode {
background: #000
}
body.dark-mode p {
color: #fff
}
JavaScript
// Add this to your javascript file
/* Body */
const body = document.querySelector('body');
// Dark Mode Action
let darkMode = localStorage.getItem("darkMode");
const darkModeToggle = document.querySelector('.dark-mode-button');
const darkModeToggleFooter = document.querySelector('footer .dark-mode-button');
// Enable Dark Mode
const enableDarkMode = () => {
body.classList.add("dark-mode");
localStorage.setItem("darkMode", "enabled")
}
// Disable Dark Mode
const disableDarkMode = () => {
body.classList.remove("dark-mode");
localStorage.setItem("darkMode", null)
}
if (darkMode == "enabled") {
enableDarkMode();
}
// Desktop Button
darkModeToggle.addEventListener('click', () => {
darkMode = localStorage.getItem("darkMode");
if (darkMode !== "enabled") {
enableDarkMode();
} else {
disableDarkMode();
}
})
// Footer button, optional. This is for if you have a second dark mode toggle button
//in the footer, just make sure the button is inside the footer tag, and it will be
//linked to this function.
darkModeToggleFooter.addEventListener('click', () => {
darkMode = localStorage.getItem("darkMode");
if (darkMode !== "enabled") {
enableDarkMode();
} else {
disableDarkMode();
}
})
Simply place the HTML button wherever needed, incorporate the dark.css across your pages, inject the dark mode JavaScript into your JavaScript file, and in the dark.css file, jot down:
body.dark-mode #updates {
background: #000000;
}What's going on here is that we're defining fresh dark mode aesthetics based on whether the body carries the 'dark mode' class. Essentially, the code operates like this: if the body bears the 'dark-mode' class, it targets a specific element and applies a corresponding style. Conversely, when the class is removed from the body, that particular code ceases to execute because the dark mode class is absent, keeping the background unaffected by the black change. This code exclusively runs when the dark mode class is present on the body. To create each dark mode style, all we need to do is prefix the selector with 'body.dark-mode'—simple as that, and you've introduced a dark mode style! The toggle button in the aforementioned code handles everything, flipping the class on and off the body with each toggle, effectively switching dark mode on and off. That's the whole process—no intricate frameworks, just good ol' vanilla code.
Positioning the button within your navbar or preferred location might take up the bulk of your time. A straightforward fix is to use absolute positioning. Personally, I position my button right at the beginning of the code, ensuring it's the initial focus for screen readers.
How should I add dark mode?
Dark mode has been a necessity since the need for accessibility has become an issue. The good news is, is that it's insanely easy to implement. Accessibility goes far beyond dark mode but it does resolve a large number of issues.
Implementing dark mode on a custom website is, in my view, a contemporary trend in web development worth incorporating across all your sites. It not only enhances website accessibility but also introduces a captivating element. Dark mode has the potential to set your client apart from competitors, showcasing a forward-thinking approach and signaling a company that values every facet of its business, right down to the website.