Theme Switcher
Build a persistent dark/light theme toggle that saves preference to localStorage.
jQuery
Beginner
3 min read
Theme Switcher Widget
Example
$(function() {
const saved = localStorage.getItem("theme") || "light";
applyTheme(saved);
function applyTheme(theme) {
$("html").attr("data-theme", theme);
$("#theme-icon").toggleClass("bi-sun bi-moon", theme === "dark");
localStorage.setItem("theme", theme);
$("[aria-label*=theme]").text(theme === "dark" ? "Switch to light" : "Switch to dark");
}
$("#toggle-theme").on("click", function() {
applyTheme($("html").attr("data-theme") === "dark" ? "light" : "dark");
});
}); Pro Tip
Update the button aria-label dynamically so screen readers say "Switch to dark" or "Switch to light" based on current state.