<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode & Light Mode Using Css And JS</title>
<style>
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--bg: #ececec;
--text: black;
--primaryBg: #c0c0c0;
--primaryText: #1b1b1b;
--btnHover: #5d5d5d33;
}
body[data-theme="dark"] {
--bg: #121212;
--text: #ffffff;
--primaryBg: #222;
--primaryText: white;
--btnHover: #ffffff33;
}
body {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--bg);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
transition: 500ms ease;
}
body h1 {
font-size: clamp(2rem, 2.5vw, 3rem);
text-align:center;
}
body button.themeToggler {
padding: 12px 15px;
border-radius: 8px;
border: none;
background-color: var(--primaryBg);
color: var(--primaryText);
font-size: clamp(1.2rem, 1.3vw, 1.5rem);
font-weight: bold;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.188);
transition: 300ms ease;
cursor: pointer;
}
body button.themeToggler:hover {
background-color: var(--btnHover);
transform: scale(1.05);
}
</style>
</head>
<body data-theme="light">
<h1>Dark Mode & Light Mode Using Css And JS</h1>
<button class="themeToggler">🌙 Toggle Dark Mode</button>
<script>
const themeToggler = document.querySelector('.themeToggler');
const body = document.body;
themeToggler.addEventListener('click', () => {
let currentTheme = body.getAttribute('data-theme');
let nextTheme = currentTheme == "light" ? "dark" : "light";
localStorage.setItem('theme',nextTheme);
body.setAttribute('data-theme',nextTheme);
updateButtonText(currentTheme == "light");
});
function updateButtonText(flg){
themeToggler.innerText = flg ? "☀️ Toggle Light Mode" :"🌙 Toggle Dark Mode";
}
function initTheme(){
body.setAttribute('data-theme',localStorage.getItem('theme'));
}
initTheme();
</script>
</body>
</html>