In this blog post, you will learn to add Dark Mode to your website with the help of HTML. We will use CSS & Javascript with HTML. Dark Mode or Night Mode is the same with changes the website theme into the dark with just one click. Its increases the user experience of your site. So let’s start the process:-
Steps to create Dark Mode on the website:-
- Create an HTML document with all the Basic tags typed on it.
- Now write some content in the body section using <h1> to <h6> and <p> tags.
- Add a button to the website with its onclick property value DarkMode().
- Now it’s time to style the sheet. So we will add a body tag with its background color white and color black.
- Now add a .Dark-mode class to the style with its background color black and color white.
- Now it’s time for Javascript. Open the script tag above the closed body tag in the HTML sheet.
- In the script tag, we will define the function DarkMode() in a way that whenever someone clicks on the button .Dark-mode class gets active.
- Your Full code is ready & it will look like this:-
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode</title>
<style>
body {
background-color: white;
color: black;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>Code Blockx</h1>
<h2>Solution for your coding problems</h2>
<h3> Dark Mode With HTML, CSS, JavaScript </h3>
<h3>Click on the button to turn on/off the Dark Mode</h3>
<button onclick=”darkMode()”>Darkmode</button>
<script>
function darkMode() {
var element = document.body;
element.classList.toggle(“dark-mode”);
}
</script>
</body>
</html>
OUTPUT
Output window without clicking on button
Output window after clicking on button
Hope this blog was helpful to you and you got the answer to your question. Thank you for Visiting our Blog. If you have any doubts related to any coding questions then let us know in the comments section. We will answer it as soon as possible. Till then check out our posts.