switchable-txtAny div or section that should switch background gets the class:switchable-bgYou can use this principle to toggle any CSS color property, not just text or background. Alternatively, you could use JavaScript to swap between completely separate sets of CSS rules.A demo by @markbowley
How it works
The toggle switch adds or removes a .dark-mode class on <body>.CSS rules update all .switchable-txt and .switchable-bg elements automatically.The page background itself also switches with .dark-mode.The selected mode is saved in localStorage so it persists across page reloads.Setup
Apply switchable-txt to all text blocks that should change color.Apply switchable-bg to all divs or sections that should change background.Use the HTML toggle snippet below to control dark/light mode.Everything else (CSS + JS) handles the switching automatically.
Want to try it?
Here's a set of code snippets you can use:
<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><div class="switchable-bg" style="padding:20px; margin:1rem 0; border-radius:8px;">
<h2 class="switchable-txt">Example Heading</h2>
<p class="switchable-txt">This text and box will switch colors in dark mode.</p>
</div><p class="switchable-txt">This paragraph text also switches automatically.</p>
<style>
:root {
--bg-light: #ffffff;
--bg-dark: #000000;
--text-light: #000000;
--text-dark: #ffffff;
--card-light: #f0f0f0;
--card-dark: #222222;
}/* Body /
body {
background-color: var(--bg-light);
color: var(--text-light);
transition: background-color 0.3s, color 0.3s;
font-family: 'Inter', sans-serif;
}/ Switchable elements /
.switchable-bg {
background-color: var(--card-light);
padding: 5px 20px;
margin-bottom: 1rem;
border-radius: 8px;
transition: background-color 0.3s;
}.switchable-txt {
transition: color 0.3s;
}/ Dark mode /
body.dark-mode {
background-color: var(--bg-dark);
color: var(--text-dark);
}body.dark-mode .switchable-bg {
background-color: var(--card-dark);
}body.dark-mode .switchable-txt {
color: var(--text-dark);
}/ Toggle row /
.toggle-row {
display: flex;
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 track /
.slider {
position: absolute;
inset: 0;
background-color: #ccc;
border-radius: 999px;
transition: 0.4s;
cursor: pointer;
box-sizing: border-box;
padding: 4px; / space around knob /
}/ Slider knob /
.slider::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
height: calc(100% - 8px); / track height minus padding /
width: calc(50% - 8px); / half track minus padding /
background-color: #fff;
border-radius: 50%;
transition: 0.4s;
}/ Checked state moves knob exactly to right edge /
input:checked + .slider::before {
transform: translateX(calc(100% + 8px));
background-color: #000;
}input:checked + .slider {
background-color: #444;
}/ Responsive */
@media (max-width: 600px) {
.toggle-row { font-size: 1.2rem; }
}
</style>
<script>
const darkModeSwitch = document.getElementById("darkModeSwitch");// Restore previous mode from localStorage
if (localStorage.getItem("darkMode") === "dark") {
document.body.classList.add("dark-mode");
darkModeSwitch.checked = true;
}// Toggle dark mode on switch
darkModeSwitch.addEventListener("change", () => {
const isDark = darkModeSwitch.checked;
document.body.classList.toggle("dark-mode", isDark);
localStorage.setItem("darkMode", isDark ? "dark" : "light");
});
</script>