.png)
Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Create a Dark/Light Mode Switch using HTML CSS & JavaScript in 10 Minutes!", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Dark/Light Mode</title>
</head>
<body>
<input type="checkbox" id="darkmode-toggle" />
<label for="darkmode-toggle">
<img src="./sun.png" class="sun" alt="" />
<img
src="./moon.png"
class="moon"
alt=""
style="filter: grayscale(100%)"
/>
</label>
<div class="background"></div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
label {
width: 500px;
height: 200px;
position: relative;
display: block;
background: #ebebeb;
border-radius: 200px;
box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
inset 0px -5px 15px rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: 0.3s;
&:after {
content: "";
width: 180px;
height: 180px;
position: absolute;
top: 10px;
left: 10px;
background: linear-gradient(180deg, #ffcc89, #d8860b);
border-radius: 180px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
img {
position: absolute;
width: 120px;
top: 40px;
z-index: 100;
&.sun {
left: 40px;
filter: invert(100%);
transition: 0.3s;
}
&.moon {
left: 340px;
filter: grayscale(100%);
opacity: 0.7;
transition: 0.3s;
}
}
}
input {
width: 0;
height: 0;
visibility: hidden;
&:checked + label {
background: #242424;
&:after {
left: 490px;
transform: translateX(-100%);
background: linear-gradient(180deg, #777, #3a3a3a);
}
+ .background {
background: #242424;
}
}
&:active:after {
width: 260px;
}
}
.background {
width: 100vw;
height: 100vh;
background: #fff;
z-index: -1;
position: absolute;
transition: 0.3s;
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
JAVASCRIPT
const darkModeToggle = document.getElementById("darkmode-toggle");
let background = document.querySelector(".background");
let label = document.querySelector("label");
darkModeToggle.addEventListener("change", (e) => {
if (e.currentTarget.checked) {
localStorage.setItem("theme", "dark");
background.style.background = "#242424";
label.style.background = "#242424";
} else {
localStorage.setItem("theme", "light");
background.style.background = "#fff";
label.style.background = "#fff";
}
});
window.addEventListener("DOMContentLoaded", (_) => {
let theme = localStorage.getItem("theme");
if (theme === "dark") {
darkModeToggle.checked = true;
background.style.background = "#242424";
label.style.background = "#242424";
} else {
darkModeToggle.checked = false;
background.style.background = "#fff";
label.style.background = "#fff";
}
});
.png&description=Create a Dark/Light Mode Switch using HTML CSS & JavaScript in 10 Minutes!){kind=link}
1 Comments
The best online forex brokers provide traders with secure, reliable, and feature-rich platforms to access the global foreign exchange market. They offer competitive spreads, fast trade execution, advanced charting tools, multiple account types, and responsive customer support to meet the needs of both beginners and experienced traders. Many top brokers are regulated by reputable financial authorities, helping to create a transparent and secure trading environment. Choosing the right online forex broker can enhance your trading experience by providing access to powerful tools, educational resources, and a wide range of currency pairs to support informed trading decisions.
ReplyDeleteContact us Address — 1st Floor, The Sotheby Building, Rodney Bay, Gros-Islet, SAINT Lucia P.O Box 838, Castries, Saint Lucia Phone no — +97144471894 Website — https://winprofx.org/
We are happy to hear from you.