jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-25 17:35:21 -04:00
Code Issues Releases Activity

Check if localStorage is available before accessing

Browse Source
This commit is contained in:
Jake Jarvis 2021-08-04 09:01:27 -04:00
parent c9c20979fa
commit 2a1d634637
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.js
View File

@ -1,27 +1,24 @@
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
import storageAvailable from "storage-available";
export default function (options) {
// { toggle, classes: { light, dark }, default, storageKey }
options = options || {};
console.log(options);
// use a specified element(s) to trigger swap when clicked
const toggle = options.toggle || null;
console.log(toggle);
// check for preset `dark_mode_pref` preference in local storage
const storageKey = options.storageKey || "dark_mode_pref";
const pref = localStorage.getItem(storageKey);
const storageEnabled = storageAvailable("localStorage");
const pref = storageEnabled
? localStorage.getItem(storageKey)
: null;
// change CSS via these <body> classes:
let dark = "dark";
let light = "light";
if (options.classes) {
dark = options.classes.dark;
light = options.classes.light;
}
const dark = options.classes ? options.classes.dark : "dark";
const light = options.classes ? options.classes.light : "light";
// which class is <body> set to initially?
const defaultTheme = options.default || "light";
@ -30,10 +27,14 @@ export default function (options) {
let active = defaultTheme === dark;
// receives a class name and switches <body> to it
const activateTheme = function (theme) {
const activateTheme = function (theme, save = false) {
document.body.classList.remove(dark, light);
document.body.classList.add(theme);
active = theme === dark;
if (storageEnabled && save) {
localStorage.setItem(storageKey, theme);
}
};
// user has never clicked the button, so go by their OS preference until/if they do so
@ -86,11 +87,9 @@ export default function (options) {
toggle.addEventListener("click", function () {
// switch to the opposite theme & save preference in local storage
if (active) {
activateTheme(light);
localStorage.setItem(storageKey, light);
activateTheme(light, true);
} else {
activateTheme(dark);
localStorage.setItem(storageKey, dark);
activateTheme(dark, true);
}
});
}

4
package.json
View File

@ -19,7 +19,9 @@
"scripts": {
"lint": "eslint **/*.js"
},
"dependencies": {},
"dependencies": {
"storage-available": "^1.1.0"
},
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",

5
yarn.lock
View File

@ -796,6 +796,11 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
storage-available@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/storage-available/-/storage-available-1.1.0.tgz#0988c893d3a35ff637b986045688a3f334371ba8"
integrity sha512-uFHjhmUxyxjEhoEl2sB+ogNWpPoFihk59cfSzPs0wXcCVRtpRti7u3G0O3VEyUuJJIg0oj0g7VGldsNSuhOoqQ==
string-width@^4.2.0:
version "4.2.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"