Kkk
Steps to create Dark-Mode websites using HTML, CSS, and JavaScript:
Create a HTML document.
Add CSS properties to the body and add dark-mode class properties in CSS.
Add buttons to switch between Dark and Light Mode.
Add functionality to buttons to switch between dark-mode and light-mode using JavaScript.
Example 1: The following example demonstrates switching between light and dark-mode using HTML, CSS, and JavaScript code. It uses 2 functions namely: darkMode() and lightMode() to switch between the two modes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
.light-mode {
background-color: white;
color: black;
}
</style>
</head>
<body>
<h1>Naira app developer<h2>
<p>
This is a sample from Naira app developer
Dark Mode Websites using Html CSS &
Javascript
</p>
<img src=
""/>
<h3 id="DarkModetext">Dark Mode is OFF</h3>
<button onclick="darkMode()">Darkmode</button>
<button onclick="lightMode()">LightMode</button>
<script>
function darkMode() {
var element = document.body;
var content = document.getElementById("DarkModetext");
element.className = "dark-mode";
content.innerText = "Dark Mode is ON";
}
function lightMode() {
var element = document.body;
var content = document.getElementById("DarkModetext");
element.className = "light-mode";
content.innerText = "Dark Mode is OFF";
}
</script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Dark Mode tutorial using HTML, CSS and JS</h2>
<p>GeeksForGeeks Sample Text</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"/>
<div>
<button onclick="darkMode()">Darkmode</button>
</div>
<script>
function darkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
