From 2a1d6346378e866d5f7a6105b6d01e2ea77ed734 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Wed, 4 Aug 2021 09:01:27 -0400 Subject: [PATCH] Check if localStorage is available before accessing --- index.js | 31 +++++++++++++++---------------- package.json | 4 +++- yarn.lock | 5 +++++ 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/index.js b/index.js index 0004928..53b7726 100644 --- a/index.js +++ b/index.js @@ -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 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 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 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); } }); } diff --git a/package.json b/package.json index fe0ffd2..18cdb14 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 485fec9..66b754e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"