darkmode toggle switch with local storage to remember the last selection

darkmode toggle switch with local storage to remember the last selection Demo

View Demo Full Screen View Demo New Tab

darkmode toggle switch with local storage to remember the last selection Code

HTML

<a href="javascript:void()" class="btn btn-outline-info btn-lg ml-auto font-weight-bold" id="theme-toggler" onclick="toggleTheme()">🌙 Dark</a>

Javascript

// you can use app's unique identifier here
const LOCAL_STORAGE_KEY = "custom-grid-theme";

const LOCAL_META_DATA = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));

// you can change this url as needed
const DARK_THEME_PATH = "https://bootswatch.com/4/cyborg/bootstrap.min.css";
/* const DARK_THEME_PATH = "https://kruxor.com/css/bootstrap.slate.min.css"; */

const DARK_STYLE_LINK = document.getElementById("dark-theme-style");
const THEME_TOGGLER = document.getElementById("theme-toggler");

let isDark = LOCAL_META_DATA && LOCAL_META_DATA.isDark;

// check if user has already selected dark theme earlier
if (isDark) {
	enableDarkTheme();
} else {
	disableDarkTheme();
}


/**
 * Apart from toggling themes, this will also store user's theme preference in local storage.
 * So when user visits next time, we can load the same theme.
 *
 */
function toggleTheme() {
	isDark = !isDark;
	if (isDark) {
		enableDarkTheme();
	} else {
		disableDarkTheme();
	}
	const META = { isDark };
	localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(META));
}

function enableDarkTheme() {
	var body = document.querySelector('body');
	body.classList.add('dark-mode');
	body.classList.remove('light-mode');
	THEME_TOGGLER.innerHTML = "🌙 Dark";
}

function disableDarkTheme() {
	var body = document.querySelector('body');
	body.classList.add('light-mode');
	body.classList.remove('dark-mode');
	THEME_TOGGLER.innerHTML = "🌞 Light";
}