jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-28 03:20:29 -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 */ /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
import storageAvailable from "storage-available";
export default function (options) { export default function (options) {
// { toggle, classes: { light, dark }, default, storageKey } // { toggle, classes: { light, dark }, default, storageKey }
options = options || {}; options = options || {};
console.log(options);
// use a specified element(s) to trigger swap when clicked // use a specified element(s) to trigger swap when clicked
const toggle = options.toggle || null; const toggle = options.toggle || null;
console.log(toggle);
// check for preset `dark_mode_pref` preference in local storage // check for preset `dark_mode_pref` preference in local storage
const storageKey = options.storageKey || "dark_mode_pref"; 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: // change CSS via these <body> classes:
let dark = "dark"; const dark = options.classes ? options.classes.dark : "dark";
let light = "light"; const light = options.classes ? options.classes.light : "light";
if (options.classes) {
dark = options.classes.dark;
light = options.classes.light;
}
// which class is <body> set to initially? // which class is <body> set to initially?
const defaultTheme = options.default || "light"; const defaultTheme = options.default || "light";
@ -30,10 +27,14 @@ export default function (options) {
let active = defaultTheme === dark; let active = defaultTheme === dark;
// receives a class name and switches <body> to it // 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.remove(dark, light);
document.body.classList.add(theme); document.body.classList.add(theme);
active = theme === dark; 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 // 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 () { toggle.addEventListener("click", function () {
// switch to the opposite theme & save preference in local storage // switch to the opposite theme & save preference in local storage
if (active) { if (active) {
activateTheme(light); activateTheme(light, true);
localStorage.setItem(storageKey, light);
} else { } else {
activateTheme(dark); activateTheme(dark, true);
localStorage.setItem(storageKey, dark);
} }
}); });
} }

4
package.json
View File

@ -19,7 +19,9 @@
"scripts": { "scripts": {
"lint": "eslint **/*.js" "lint": "eslint **/*.js"
}, },
"dependencies": {}, "dependencies": {
"storage-available": "^1.1.0"
},
"devDependencies": { "devDependencies": {
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.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" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= 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: string-width@^4.2.0:
version "4.2.2" version "4.2.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"