Dark themes are one of the most popular concepts in modern design. They are used in many modern Android applications, Desktop applications, and Web applications. You can find several graphics-oriented and photography websites using the dark theme concept in their design. Dark themes give our eyes a little bit of relaxation, and it’s also easy to read the text. While dark themes are great, many peoples do not like the dark concept and prefer the light theme design.
To deal with such a situation, several websites give a button or switch that can be used to toggle between the dark and the light theme. There are also front-end libraries such as Halfmoon that make our task easy to create a dark mode website, but we will don’t use any libraries in this article and do it using pure HTML, CSS, and Javascript.
Adding a dark mode toggle on your website
In this tutorial, we will learn how to build a togglable dark and light web design. This article assumes that you have some knowledge of HTML, CSS, and Javascript. Programmatically, we will use CSS placeholders to store the color values and JavaScript to manipulate those colors. At the end of this tutorial, you will know how to provide both dark and light color support to a website.
CSS Placeholders
We will use the CSS placeholders in this article. CSS placeholders are like variables that can store CSS values and use them later in the CSS properties. For example, see the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Placeholders</title>
<style>
:root{
--text-color: #def;
--bg-color: #121417;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
</head>
<body>
<div>
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
</body>
</html>
You can check the code by running it using the run button present in the top of the code block.
In the above code, we can see that we have declared two parameters in the root and use them later in the code using the var() function. These parameters are called placeholders and are very similar to the variable in programming languages. These placeholders are very useful if we want to use the same property value in different places, and if we need to do any modification, we can do it in one place, which makes it easy to change the style of a website. In this tutorial, CSS placeholders play an important role while creating the toggleable dark-light theme.
The main Code
We have learned how to use CSS placeholders. Now let us look at the code where we were building a simple toggleable dark-light mode webpage. You can also see a demo of the code by running the code by clicking the run button present at the top of the following code block.
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Dark Mode</title>
<style>
:root[color-mode = "dark"]{
--text-color: #def;
--bg-color: #121417;
}
:root[color-mode = "light"]{
--text-color: #333;
--bg-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button class="toggle" onclick="toggle()">Click for Dark Mode</button>
<div>
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
<script>
const btn = document.querySelector(".toggle");
function toggle(){
if (document.documentElement.getAttribute('color-mode') == 'light'){
document.documentElement.setAttribute('color-mode', 'dark');
btn.innerHTML = "Click for Light Mode"
} else {
document.documentElement.setAttribute('color-mode', 'light');
btn.innerHTML = "Click for Dark Mode"
}
}
</script>
</body>
</html>
In the above code, We had used the CSS placeholders with Javascript. First, we created root objects in CSS, given them a parameter color-mode, and given the color-mode two arguments. The first argument is dark, and it contains the dark mode color and background values.
The second argument is light for the light mode. It contains color and background values for the light theme. For the root element of the HTML document that is <html> tag, we have given the parameter color-mode=”light“, due to which the light color theme of CSS is used.
Then we use javascript with a button so that if the button is clicked, then the Javascript code will change the color-mode from light to dark or dark to light of the HTML root tag <html>. So if a user clicks the button, then the color mode will toggle.
A smart way to do this is by saving the user preferences using the local storage API. We can use the local storage API of the browser using javascript, which lets us store data in the color-mode in the user browser. The following HTML shows a simple demonstration of the method.
<!DOCTYPE html>
<html lang="en" color-mode="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Dark Mode</title>
<style>
:root[color-mode = "dark"]{
--text-color: #def;
--bg-color: #121417;
}
:root[color-mode = "light"]{
--text-color: #333;
--bg-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button class="toggle" onclick="toggle()">Click to change Mode</button>
<div>
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
<script>
const color_mode = localStorage.getItem('color-mode');
if (color_mode != null){
document.documentElement.setAttribute('color-mode', color_mode);
}
function toggle(){
if (document.documentElement.getAttribute('color-mode') == 'light'){
document.documentElement.setAttribute('color-mode', 'dark');
localStorage.setItem("color-mode", 'dark')
} else {
document.documentElement.setAttribute('color-mode', 'light');
localStorage.setItem("color-mode", 'light')
}
}
</script>
</body>
</html>
In the above code, we used the localStorage API of the browser using javascript. This API gives us functions such as getItem(), setItem() that can be used to get an element and set an element in the local storage of the user browser. Using the local storage, we first check if there are any save modes in the user browser and if there is any mode, then continue with that mode else set it to default light mode.
And if a user changes the mode, it will be saved in the user’s browser as their default theme for repeated visits. This is very useful because a user does not want to change his color mode every time he visits and wants a default color mode.
Conclusion
In this tutorial, we learned how to create a toggleable dark-light mode theme. This concept is trendy in building dark themes and is used by many modern websites. Anyone can use this concept to give their websites a dark look very easily. You may also want to see our tutorial on how to get user location using javascript.
