What is a dark theme?
A dark theme displays dark color in the maximum of the UI, reducing strain in our eyes. Recently, a dark theme is a common trend, that can be seen on most websites and apps.
Here in this blog, I am going to share one of the easy ways to add a dark theme when we click a button.
Turn Your webpage from here:
To here:
Our main concern is to change the theme, so we are not focusing on beauty and other functionality.
HTML
We are just creating a button, so we need just a single button
tag in the HTML file.
<button id="myBtn">Push Me</button>
CSS
The below code is used to create the basic light theme on the page.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: #ededed;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
button {
color: #000;
background: #fff;
border: solid .12rem #121212;
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
width: 4rem;
border-radius: 7%;
}
The below code is concerned about the UI(User Interface) of the dark-theme.
.dark-mode {
background: #121212;
}
.dark-mode > button {
background: #000;
color: #fff;
border-color: #ededed;
}
JavaScript
This is the main script involved in giving the dark-theme to our website when the push me
key is pressed.
document.getElementById("myBtn").addEventListener("click", function() {
var element = document.body;
element.classList.toggle("dark-mode");
});
Walla! Our fully functioning toggle dark theme is completed. Isn't it short and simple?
There is a small limitation, link to your JavaScript file in the
body
tag, and not in thehead
tag of your HTML code.
You can check the full functioning button by pressing here.