I created a code with a toggle button that effortlessly switches between a vibrant yellow light bulb mode and a sleek black mode. With just one click, you can change your interface’s look to suit your mood or environment.
<!DOCTYPE html>
<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<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></title>
<link rel="stylesheet" href="style.css" />
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt:dt="string">Riddhi Phatnani</mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<mso:Order msdt:dt="string">16128100.0000000</mso:Order>
<mso:SharedWithUsers msdt:dt="string"></mso:SharedWithUsers>
<mso:_ExtendedDescription msdt:dt="string"></mso:_ExtendedDescription>
<mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt:dt="string">Riddhi Phatnani</mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
<mso:ComplianceAssetId msdt:dt="string"></mso:ComplianceAssetId>
<mso:TriggerFlowInfo msdt:dt="string"></mso:TriggerFlowInfo>
<mso:ContentTypeId msdt:dt="string">0x0101002433A22E08CBFB49B0E65B7E0B5148FD</mso:ContentTypeId>
<mso:_SourceUrl msdt:dt="string"></mso:_SourceUrl>
<mso:_SharedFileIndex msdt:dt="string"></mso:_SharedFileIndex>
<mso:MediaLengthInSeconds msdt:dt="string"></mso:MediaLengthInSeconds>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<input type="checkbox" id="dark-mode" class="input" />
<label for="dark-mode" class="label">
<div class="circle"></div>
</label>
<script src="index.js"></script>
</body>
</html>
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
transition: .4s;
}
.input {
visibility: hidden;
}
.label {
position: absolute;
width: 80px;
height: 40px;
background-color: black;
border-radius: 20px;
cursor: pointer;
}
.circle {
width: 34px;
background-color: #FEDD00;
height: 34px;
border-radius: 50%;
top: 3px;
position: absolute;
left: 3px;
animation: toggleOff 0.4s linear forwards;
}
.input:checked+.label {
background-color: #FEDD00;
}
.input:checked+.label .circle {
animation: toggleOn 0.4s linear forwards;
background-color: black;
}
@keyframes toggleOn {
0% {
transform: translateX(0);
}
100% {
transform: translateX(40px);
}
}
@keyframes toggleOff {
0% {
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}const inputEl = document.querySelector(".input");
const bodyEl = document.querySelector("body");
inputEl.checked = JSON.parse(localStorage.getItem("mode"));
updateBody();
function updateBody() {
if (inputEl.checked) {
bodyEl.style.background = "black";
} else {
bodyEl.style.background = "#FEDD00";
}
}
inputEl.addEventListener("input", () => {
updateBody();
updateLocalStorage();
});
function updateLocalStorage() {
localStorage.setItem("mode", JSON.stringify(inputEl.checked));
}
Code Credit : Dr. Sahand Ghavidel
