darkmode toggle switch with local storage to remember the last selection

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";
}