darkmode toggle switch with local storage to remember the last selection

Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements!

It saves to local storage the last selection so if you come back to the site later it will remember your previous selection. 

I modified this from another version of the code i found, but not sure where i originally found it, so if its yours let me know and ill link you as the source!

the demo button below does not work exactly as it has the same id as the one at the top of the site, but it still runs the dark mode and light mode function. 

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

Other Items in javascript

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 324 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
time you enjoyed wasting is not wasted time
Unknown