Dark Light Mode (HTML, CSS, JS)
<html lang="en" color-mode="light">
<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>
/* Light Mode */
:root[color-mode="light"] {
--surface1: #e6e6e6;
--surface2: #f2f2f2;
--surface3: #ffffff;
--element1: #111111;
--element2: #222222;
--element3: #333333;
--elementInverse: #eee;
--primary: #01408e;
--secondary: #3c5d5c;
--tertiary: #fff7d6;
}
/* Dark Mode */
:root[color-mode="dark"] {
--surface1: #262626;
--surface2: #333333;
--surface3: #404040;
--element1: #eeeeee;
--element2: #dddddd;
--element3: #cccccc;
--elementInverse: #111;
--primary: #8fceff;
--secondary: #72faca;
--tertiary: #eee8a9;
}
:root[color-mode="dark"] .light--hidden {
display: none;
}
:root[color-mode="light"] .dark--hidden {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: monospace;
background-color: var(--surface3);
}
.nav {
width: 100%;
background-color: var(--surface1);
display: flex;
justify-content: space-between;
}
.nav__left {
display: flex;
flex-direction: row;
}
.nav__right {
display: flex;
flex-direction: row;
}
.nav ul {
list-style-type: none;
}
.nav li a {
padding: 15px;
line-height: 50px;
text-decoration: none;
transition: 0.6s;
color: var(--element1);
}
.nav__left li a:hover {
background-color: var(--primary);
color: var(--surface3);
}
.togglebtn-label {
width: 80px;
height: 30px;
display: block;
line-height: 30px;
margin: 10px;
position: relative;
}
.togglebtn-check {
opacity: 0;
width: 0;
height: 0;
}
.togglebtn-slider {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: 0.4s;
background-color: var(--element1);
border-radius: 15px;
}
.togglebtn-slider:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--elementInverse);
position: absolute;
left: 5px;
top: 5px;
transition: 0.4s;
}
.togglebtn-check:checked+.togglebtn-slider:before {
-webkit-transform: translateX(51px);
-ms-transform: translateX(51px);
transform: translateX(51px);
}
.togglebtn-sublabels {
position: absolute;
left: 32px;
color: var(--surface3);
transition: 0.6s;
}
.togglebtn-check:checked~.togglebtn-sublabels {
-webkit-transform: translateX(-18px);
-ms-transform: translateX(-18px);
transform: translateX(-18px);
}
</style>
</head>
<body>
<div class="container">
<nav class="nav">
<ul class="nav__left">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>
<ul class="nav__right">
<li>
<label class="togglebtn-label" aria-label="Toggle Light Dark Mode">
<input type="checkbox" id="toggleModeBtn" class="togglebtn-check">
<span class="togglebtn-slider"></span>
<span class="togglebtn-sublabels dark--hidden">Dark</span>
<span class="togglebtn-sublabels light--hidden">Light</span>
</label>
</li>
</ul>
</nav>
<main class="main">
</main>
</div>
<script>
let toggleModeBtn = document.querySelector("#toggleModeBtn");
toggleModeBtn.addEventListener('click', (e) => {
let html = document.documentElement;
if (e.target.checked) {
html.setAttribute('color-mode', 'dark');
localStorage.setItem('color-mode', 'dark');
} else {
html.setAttribute('color-mode', 'light');
localStorage.setItem('color-mode', 'light');
}
})
if (localStorage.getItem('color-mode') === 'dark' || (window.matchMedia('(prefer-color-scheme: dark')).matches && !localStorage.getItem('color-mode')) {
document.documentElement.setAttribute('color-mode', "dark");
document.querySelector("#toggleModeBtn").checked = true;
} else {
document.documentElement.setAttribute('color-mode', "light");
localStorage.setItem('color-mode', 'light');
}
</script>
</body>
</html>
See the Pen Toggle Dark Light Mode by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment