What is this? This is a demo and experiment in switching HTML page colors using Javascript and CSS.
Not only does it toggle text, it also toggles div background colors.
It uses CSS classes to toggle text color and div background values. So you could use the same principle to toggle any CSS color value. You could also just use Javascript to switch between two completely separate sets of CSS.
A demo by @markbowley
Want to try it?
Below is the toggle HTML code, as well as the full CSS and Javascript code. You will need to apply the class "switchable-txt" to text, and "switchable-bg" to divs.
<div class="toggle-row">
<span class="switchable-txt">Light</span>
<label class="toggle-container">
<input type="checkbox" id="darkModeSwitch">
<span class="slider"></span>
</label>
<span class="switchable-txt">Dark</span>
</div>
<style>
body {
background-color: #FFFFFF;
color: #000000;
transition: background-color 0.3s, color 0.3s;
font-family: 'Inter', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}a {
text-decoration: none;
color: inherit;
}.wrapper {
max-width: 400px;
margin: 3rem auto;
}/* Switchable text /
.switchable-txt {
line-height: 1.3;
}/ Switchable div background /
.switchable-bg {
padding: 5px 20px;
margin-bottom: 1rem;
border-radius: 8px;
background-color: #F0F0F0;
transition: background-color 0.3s;
}.toggle-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 2rem auto;
gap: 1rem;
}.toggle-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 300px;
aspect-ratio: 2 / 1;
}/ Hide default checkbox /
.toggle-container input {
opacity: 0;
width: 0;
height: 0;
}.slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 999px;
padding: 5%;
box-sizing: border-box;
}.slider:before {
content: "";
position: absolute;
height: 90%;
width: 45%;
left: 3%;
bottom: 5%;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}/ Dark mode */
input:checked + .slider {
background-color: #444;
}
input:checked + .slider:before {
background-color: #000;
transform: translateX(110%);
}@media (max-width: 600px) {
.toggle-row {
font-size: 1.2rem;
}
.wrapper {
font-size: 1rem;
max-width: 100%;
padding: 0 1rem;
}
}</style>
<script>
// Restore saved mode
const darkModeSwitch = document.getElementById("darkModeSwitch");
const savedMode = localStorage.getItem("darkMode");if (savedMode === "dark") {
setDarkMode(true);
darkModeSwitch.checked = true;
} else {
setDarkMode(false);
}darkModeSwitch.addEventListener("change", () => {
setDarkMode(darkModeSwitch.checked);
});function setDarkMode(isDark) {
if (isDark) {
// Page + text
document.body.style.backgroundColor = "#000000";
document.querySelectorAll(".switchable-txt").forEach(el => {
el.style.color = "#FFFFFF";
});
// Divs
document.querySelectorAll(".switchable-bg").forEach(el => {
el.style.backgroundColor = "#222222";
});
localStorage.setItem("darkMode", "dark");
} else {
// Page + text
document.body.style.backgroundColor = "#FFFFFF";
document.querySelectorAll(".switchable-txt").forEach(el => {
el.style.color = "#000000";
});
// Divs
document.querySelectorAll(".switchable-bg").forEach(el => {
el.style.backgroundColor = "#F0F0F0";
});
localStorage.setItem("darkMode", "light");
}
}
</script>