How to Make Dark Mode website using HTML CSS and Javascript
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">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<title>About Us</title>
</head>
<body id="body_element">
<div class="darkmode">
<button id="dark" class="dark_btn" onclick="dark()"> Dark <span class="material-symbols-outlined">clear_night </span> </button>
<button id="light" class="dark_btn" onclick="light()"> Light <span class="material-symbols-outlined">light_mode</span></button>
</div>
<div class="main-box">
<div class="img-box">
<img src="img.jpeg">
<br>
<center>
<p style="padding-top: 55px">
<h1>Hello, I'm Anna</h1>
<p style="text-align: center;padding: 2px 10px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p>
</p>
<br>
<br>
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-linkedin"></i>
</center>
</div>
<div class="txt-box">
<h1 style="font-size: 4rem">About us</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<br>
<button id="btn">Contact Us</button>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/*height: 100vh;*/
}
.main-box{
width: 90%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
column-gap: 100px;
border-left: 5px solid crimson;
border-right: 5px solid crimson;
border-radius: 25px;
box-shadow: 5px 5px 5px grey;
padding: 5px 15px;
}
.img-box{
width: 320px;
height: 500px;
background-color: rgb(0,202,202);
position: relative;
margin-top: 45px;
}
.img-box img{
width: 178px;
border-radius: 50%;
position: absolute;
height: 196px;
left: 70px;
top: -91px;
}
i {
font-size: 30px;
padding: 4px;
}
i:hover{
transition: 350ms ease-in-out;
transform: rotate(347deg);
box-shadow: 0 0 8px green;
font-size: 41px;
color:crimson;
cursor: pointer;
/*padding: 6px;*/
}
.txt-box{
width: 600px;
}
#btn{
border:none;
background-color: transparent;
font-size: 1.2rem;
padding: 5px 10px;
border-left: 2px solid crimson;
border-right: 2px solid crimson;
border-radius: 20px;
}
#btn:hover{
cursor: pointer;
border-left: 2px solid aqua;
border-right: 2px solid aqua;
transition: 200ms ease-in-out;
box-shadow: 5px 5px 5px grey;
transform: scale(1.1);
}
.darkmode{
width: 100%;
}
.dark_btn{
background-color: transparent;
font-size: 1.1rem;
padding: 10px 17px;
border-radius: 26px;
float: right;
margin-right: 50px;
margin-bottom: 20px;
}
.dark_btn span{
font-size: 1.3rem;
padding-left: 10px;
padding-top: 3px;
}
.dark_btn:hover{
cursor: pointer;
}
#dark{
background-color: black;
color: white;
}
#light{
background-color: white;
color: black;
display: none;
}
JAVASCRIPT
var body_elements = document.getElementById("body_element");
var dark_btn = document.getElementById("dark");
var light_btn = document.getElementById("light");
var btn = document.getElementById("btn");
function dark(){
body_elements.style.background="black";
body_elements.style.color="white";
btn.style.color="white";
dark_btn.style.display="none";
light_btn.style.display="block";
}
function light(){
body_elements.style.background="white";
body_elements.style.color="black";
btn.style.color="black";
dark_btn.style.display="block";
light_btn.style.display="none";
}
