dark-mode-switcheroo - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

dist/dark-mode.cjs.js

@@ -1,2 +0,2 @@
-/*! Dark Mode Switcheroo v0.8.1 | MIT License | jrvs.io/darkmode */
+/*! Dark Mode Switcheroo v0.9.0 | MIT License | jrvs.io/darkmode */
 'use strict';
@@ -22,2 +22,7 @@
   const activateTheme = function (theme, remember) {
+    // optional onChange callback function passed as option
+    if (typeof options.onChange === "function") {
+      options.onChange(theme, toggle || null);
+    }
+
     document.body.classList.remove(dark, light);
@@ -29,9 +34,9 @@ document.body.classList.add(theme);
       localStorage.setItem(storageKey, theme);
-    } // optional onChange callback function passed as option
+    }
+  }; // optional onInit callback function passed as option
 
 
-    if (typeof options.onChange === "function") {
-      options.onChange(theme, toggle);
-    }
-  }; // user has never clicked the button, so go by their OS preference until/if they do so
+  if (typeof options.onInit === "function") {
+    options.onInit(toggle || null);
+  } // user has never clicked the button, so go by their OS preference until/if they do so
 
@@ -79,3 +84,8 @@
     toggle.addEventListener("click", function () {
-      // switch to the opposite theme & save preference in local storage
+      // optional onUserToggle callback function passed as option
+      if (typeof options.onUserToggle === "function") {
+        options.onUserToggle(toggle);
+      } // switch to the opposite theme & save preference in local storage
+
+
       if (active) {
@@ -87,7 +97,2 @@ activateTheme(light, true);
     });
-  } // optional onInit callback function passed as option
-
-
-  if (typeof options.onInit === "function") {
-    options.onInit(toggle);
   }
@@ -94,0 +99,0 @@ };

dist/dark-mode.d.ts

@@ -7,3 +7,4 @@ export function init(options?: {
   onInit?: (toggle?: Element | null) => unknown;
-  onChange?: (theme?: string, toggle?: Element | null) => unknown;
+  onUserToggle?: (toggle?: Element | null) => unknown;
+  onChange?: (theme: string, toggle?: Element | null) => unknown;
 }): void;

dist/dark-mode.esm.js

@@ -1,2 +0,2 @@
-/*! Dark Mode Switcheroo v0.8.1 | MIT License | jrvs.io/darkmode */
+/*! Dark Mode Switcheroo v0.9.0 | MIT License | jrvs.io/darkmode */
 const init = function (options) {
@@ -18,2 +18,7 @@ options = options || {}; // use a specified element(s) to trigger swap when clicked
   const activateTheme = function (theme, remember) {
+    // optional onChange callback function passed as option
+    if (typeof options.onChange === "function") {
+      options.onChange(theme, toggle || null);
+    }
+
     document.body.classList.remove(dark, light);
@@ -25,9 +30,9 @@ document.body.classList.add(theme);
       localStorage.setItem(storageKey, theme);
-    } // optional onChange callback function passed as option
+    }
+  }; // optional onInit callback function passed as option
 
 
-    if (typeof options.onChange === "function") {
-      options.onChange(theme, toggle);
-    }
-  }; // user has never clicked the button, so go by their OS preference until/if they do so
+  if (typeof options.onInit === "function") {
+    options.onInit(toggle || null);
+  } // user has never clicked the button, so go by their OS preference until/if they do so
 
@@ -75,3 +80,8 @@
     toggle.addEventListener("click", function () {
-      // switch to the opposite theme & save preference in local storage
+      // optional onUserToggle callback function passed as option
+      if (typeof options.onUserToggle === "function") {
+        options.onUserToggle(toggle);
+      } // switch to the opposite theme & save preference in local storage
+
+
       if (active) {
@@ -83,7 +93,2 @@ activateTheme(light, true);
     });
-  } // optional onInit callback function passed as option
-
-
-  if (typeof options.onInit === "function") {
-    options.onInit(toggle);
   }
@@ -90,0 +95,0 @@ };

dist/dark-mode.js

@@ -1,2 +0,2 @@
-/*! Dark Mode Switcheroo v0.8.1 | MIT License | jrvs.io/darkmode */
+/*! Dark Mode Switcheroo v0.9.0 | MIT License | jrvs.io/darkmode */
 (function (global, factory) {
@@ -6,3 +6,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.darkMode = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
@@ -25,2 +25,7 @@ var init = function init(options) {
     var activateTheme = function activateTheme(theme, remember) {
+      // optional onChange callback function passed as option
+      if (typeof options.onChange === "function") {
+        options.onChange(theme, toggle || null);
+      }
+
       document.body.classList.remove(dark, light);
@@ -32,9 +37,9 @@ document.body.classList.add(theme);
         localStorage.setItem(storageKey, theme);
-      } // optional onChange callback function passed as option
+      }
+    }; // optional onInit callback function passed as option
 
 
-      if (typeof options.onChange === "function") {
-        options.onChange(theme, toggle);
-      }
-    }; // user has never clicked the button, so go by their OS preference until/if they do so
+    if (typeof options.onInit === "function") {
+      options.onInit(toggle || null);
+    } // user has never clicked the button, so go by their OS preference until/if they do so
 
@@ -82,3 +87,8 @@
       toggle.addEventListener("click", function () {
-        // switch to the opposite theme & save preference in local storage
+        // optional onUserToggle callback function passed as option
+        if (typeof options.onUserToggle === "function") {
+          options.onUserToggle(toggle);
+        } // switch to the opposite theme & save preference in local storage
+
+
         if (active) {
@@ -90,7 +100,2 @@ activateTheme(light, true);
       });
-    } // optional onInit callback function passed as option
-
-
-    if (typeof options.onInit === "function") {
-      options.onInit(toggle);
     }
@@ -101,2 +106,2 @@ };
 
-})));
+}));

dist/dark-mode.min.js

@@ -1,2 +0,2 @@
-/*! Dark Mode Switcheroo v0.8.1 | MIT License | jrvs.io/darkmode */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).darkMode={})}(this,(function(e){"use strict";e.init=function(e){var t=(e=e||{}).toggle||null,n=e.storageKey||"dark_mode_pref",o=localStorage.getItem(n),a=e.classes?e.classes.dark:"dark",i=e.classes?e.classes.light:"light",c=e.default||"light",s=c===a,d=function(o,c){document.body.classList.remove(a,i),document.body.classList.add(o),s=o===a,c&&localStorage.setItem(n,o),"function"==typeof e.onChange&&e.onChange(o,t)};if(o)d(o===a||o===i?o:c);else{var l=function(e){return"(prefers-color-scheme: ".concat(e,")")};window.matchMedia(l("dark")).matches?d(a):window.matchMedia(l("light")).matches?d(i):d(c),window.matchMedia(l("dark")).addEventListener("change",(function(e){e.matches&&d(a)})),window.matchMedia(l("light")).addEventListener("change",(function(e){e.matches&&d(i)}))}null!==t&&t.addEventListener("click",(function(){d(s?i:a,!0)})),"function"==typeof e.onInit&&e.onInit(t)}}));
+/*! Dark Mode Switcheroo v0.9.0 | MIT License | jrvs.io/darkmode */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).darkMode={})}(this,(function(e){"use strict";e.init=function(e){var t=(e=e||{}).toggle||null,n=e.storageKey||"dark_mode_pref",o=localStorage.getItem(n),i=e.classes?e.classes.dark:"dark",a=e.classes?e.classes.light:"light",s=e.default||"light",c=s===i,d=function(o,s){"function"==typeof e.onChange&&e.onChange(o,t||null),document.body.classList.remove(i,a),document.body.classList.add(o),c=o===i,s&&localStorage.setItem(n,o)};if("function"==typeof e.onInit&&e.onInit(t||null),o)d(o===i||o===a?o:s);else{var l=function(e){return"(prefers-color-scheme: ".concat(e,")")};window.matchMedia(l("dark")).matches?d(i):window.matchMedia(l("light")).matches?d(a):d(s),window.matchMedia(l("dark")).addEventListener("change",(function(e){e.matches&&d(i)})),window.matchMedia(l("light")).addEventListener("change",(function(e){e.matches&&d(a)}))}null!==t&&t.addEventListener("click",(function(){"function"==typeof e.onUserToggle&&e.onUserToggle(t),d(c?a:i,!0)}))}}));

package.json

 {
   "name": "dark-mode-switcheroo",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection",
@@ -41,7 +41,7 @@ "license": "MIT",
     "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-node-resolve": "^13.0.5",
     "eslint": "^7.32.0",
     "eslint-plugin-compat": "^3.13.0",
     "eslint-plugin-import": "^2.24.2",
-    "rollup": "^2.56.3",
+    "rollup": "^2.58.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -48,0 +48,0 @@ "rollup-plugin-delete": "^2.0.0",

README.md

@@ -24,2 +24,3 @@ # 🌓 Dark Mode Switcheroo™
 - **`onInit([toggle])`**: Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: `null`)
+- **`onUserToggle([toggle])`**: Callback function executed when a user manually interacts with the toggle button. The toggle above (if set) is passed in. (optional, default: `null`)
 - **`onChange([theme, toggle])`**: Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: `null`)
@@ -26,0 +27,0 @@

No alert changes

Improved metrics

Total package byte prevSize

17446

5.17%

Lines of code

239

5.75%

Number of lines in readme file

89

1.14%

No dependency changes