I am attempting to make a dark / light mode on my website, which I am struggling with, but some of the text isn’t changing colors, specifically only the ones where there is a css property in the head’s style.
You can see the issue on this w3schools page.
Edit, code below, thought it showed on the w3schools page, I apologize.
function myFunction() {
var element = document.body;
element.classList.toggle("light-mode");
}h1 {
font-family: 'Roboto', sans-serif;
}
h3 {
font-family: 'Roboto', sans-serif;
}
h2 {
font-family: 'Roboto', sans-serif;
font-size: 22px;
}
h5 {
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 12px;
}
body {
background-color: #424447;
margin: 0;
}
.light-mode {
background-color: rgb(220, 220, 220);
color: black;
}
.navbar {
background-color: #2e3033;
height: 25px;
width: 100%;
border-bottom: solid #65676b;
font-family: "Segoe UI";
text-align: center
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
width: 50%;
float: left;
}
.navbar li {
float: center;
}
.navbar a {
font-family: 'Roboto', sans-serif;
display: block;
width: 100%;
font-size: 20px;
color: white
}
.navbar a:link,
.navbar a:visited {
color: white;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}
.navbar a:hover,
.navbar a:active {
background-color: #373b44;
}
.homepage {
margin-top: 10px;
margin-left: 15px;
color: white;
font-family: "Segoe UI";
}
.motivepage {
height: 100%;
width: 45%;
margin-top: 10px;
margin-left: 7.5px;
margin-right: 7.5px;
border: 4px solid #65676b;
border-radius: 5px;
color: white;
background-color: #56585b;
font-family: "Segoe UI";
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="navbar">
<ul>
<li><a href="google.com">Home</a></li>
<li><a href="google.com">Motives</a></li>
</ul>
</div>
<div class="homepage" id="homepage">
<button onclick="myFunction()" style="float: right; height: 20px; width: 19%; margin: 5px; background-color: whitesmokel; border: 0px solid white; border-radius: 8px;">
Toggle Light Mode
</button>
<h1>Home</h1>
<h3>
We look to bring you powerful, empowering, and inspirational motives that will help push you further through life.
</h3>
</div>
<div class="motivepage" style="float: left;">
<h2 style="margin-left: 8px; margin-bottom: 0px;">
xxx
</h2>
<h4 style="margin-left: 8px; margin-top: 2px; margin-bottom: 0px;">
xxx
</h4>
<h5 style="margin-left: 8px;">
xxx
</h5>
</div>
<div class="motivepage" style="float: right">
<h2 style="margin-left: 8px; margin-bottom: 0px;">
xxx
</h2>
<h4 style="margin-left: 8px; margin-top: 2px; margin-bottom: 0px;">
xxx
</h4>
<h5 style="margin-left: 8px;">
xxx
</h5>
</div>I am not sure as of where to go to try and fix this really, although I did attempt to find out how to change the text color but to be honest, I really just don’t know how to do that, I am a beginner.
I want to accomplish where you can click the button, the background turns a light shade of grey, the text turns black, and the other mini boxes below become a white.
Almost as shown on the w3schools demo.
2
Answers
Your
.light-modetext color is being overridden by the.homepagecolor, which has higher specificity here. You can fix this by adding more specificity with the * selector (or another selector of your choice):After the light-mode selector, add:
There are a couple ways to target the other elements. And the end of your CSS, I would simply use .light-mode element{}.
This will give you more control on an element by element basis in case you actually want to do more.