I want to have the dark mode functionality in CSS. At first, I defined my variables inside the asterisk selector. But when I press the dark mode button (which adds the “dark-mode” class to the “main” element), the “input” element which is the child of “main”, won’t inherit the newly changed variable values.
My HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<input type="button" class="theme-switcher" value="Switch Theme">
<header class="header">
<h1>Nice Website</h1>
</header>
<footer>
©All rights reserved.
</footer>
</main>
<script src="./script.js"></script>
</body>
</html>
My CSS file:
* {
padding: 0;
margin: 0;
--main-background-color: cyan;
--font-color: black;
--btn-border: hsl(0, 0%, 0%);
--btn-color: white;
}
main {
position: relative;
height: 100vh;
width: 100vw;
background-color: var(--main-background-color);
color: var(--font-color);
transition: background-color ease 0.5s, color ease 0.5s;
}
.dark-mode {
--main-background-color: black;
--font-color: rgb(255, 255, 255);
--btn-border: white;
--btn-color: rgb(0, 0, 0);
transition: background-color ease 0.5s, color ease 0.5s;
}
header {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
}
footer {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
.theme-switcher {
position: relative;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: var(--btn-color);
color: var(--font-color);
border: 1px solid var(--btn-border);
width: 300px;
height: 40px;
cursor: pointer;
}
My JavaScript file:
const theme_changer_button = document.querySelector(".theme-switcher")
const main_element = document.querySelector("main")
theme_changer_button.addEventListener("click", () => {
if (main_element.classList.contains("dark-mode")) {
main_element.classList.remove("dark-mode");
} else {
main_element.classList.add("dark-mode")
}
})
If I declare my varaibles in :root pseudo element at first, then the problem gets solved. I can’t understand why it does not work with the asterisk selector.