@carry0987/darkmode - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/darkMode.d.ts

@@ -35,8 +35,8 @@ type DarkModeCallback = () => void;
     private getModeFromCSSMediaQuery;
-    private detectSystemDarkMode;
     private resetRootDarkModeAttribute;
     private applyCustomDarkModeSettings;
     private toggleCustomDarkMode;
+    private listenToSystemDarkModeChange;
 }
 
 export { DarkMode as default };

dist/darkMode.esm.js

@@ -73,3 +73,3 @@ function reportError(...error) {
     static instance = null;
-    static version = '1.0.3';
+    static version = '1.0.4';
     darkModeToggleButton;
@@ -134,6 +134,8 @@ options;
     setupDarkMode() {
-        const systemSetting = this.detectSystemDarkMode();
-        const currentSetting = this.applyCustomDarkModeSettings(systemSetting);
-        this.bindEvents();
-        if (currentSetting && currentSetting === 'dark') {
+        let currentSetting = getLocalValue(this.options.darkModeStorageKey);
+        if (currentSetting === null) {
+            currentSetting = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        this.applyCustomDarkModeSettings(currentSetting);
+        if (currentSetting === 'dark') {
             this._onDark();
@@ -144,2 +146,6 @@ }
         }
+        // Bind events
+        this.bindEvents();
+        // Listen to system dark mode change
+        this.listenToSystemDarkModeChange();
     }
@@ -168,10 +174,2 @@ bindEvents() {
     }
-    detectSystemDarkMode() {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark';
-        }
-        else {
-            return 'light';
-        }
-    }
     resetRootDarkModeAttribute() {
@@ -182,7 +180,4 @@ this.options.rootElement.removeAttribute(this.options.rootElementDarkModeAttributeName);
     applyCustomDarkModeSettings(mode) {
-        const currentSetting = mode || getLocalValue(this.options.darkModeStorageKey);
-        if (currentSetting === this.getModeFromCSSMediaQuery()) {
-            this.resetRootDarkModeAttribute();
-        }
-        else if (this.validColorModeKeys[currentSetting]) {
+        const currentSetting = mode || getLocalValue(this.options.darkModeStorageKey) || this.getModeFromCSSMediaQuery();
+        if (this.validColorModeKeys[currentSetting]) {
             this.options.rootElement.setAttribute(this.options.rootElementDarkModeAttributeName, currentSetting);
@@ -210,7 +205,24 @@ }
         }
+        // Save updated value to localStorage
         setLocalValue(this.options.darkModeStorageKey, currentSetting);
         return currentSetting;
     }
+    listenToSystemDarkModeChange() {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            const hasCustomSetting = getLocalValue(this.options.darkModeStorageKey);
+            if (hasCustomSetting === null) {
+                const newSetting = e.matches ? 'dark' : 'light';
+                this.applyCustomDarkModeSettings(newSetting);
+                this._onChange(newSetting);
+                if (newSetting === 'dark') {
+                    this._onDark();
+                }
+                else {
+                    this._onLight();
+                }
+            }
+        });
+    }
 }
 
 export { DarkMode as default };

dist/darkMode.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).DarkMode=e()}(this,(function(){"use strict";function t(e,...o){if(!o.length)return e;const r=o.shift();if(r)for(const o in r)if(Object.prototype.hasOwnProperty.call(r,o)){const n=r[o],s=o;"object"!=typeof(i=n)||null===i||Array.isArray(i)?e[s]=n:(e[s]&&"object"==typeof e[s]||(e[s]={}),t(e[s],n))}var i;return t(e,...o)}function e(t,e=!0){let o=window.localStorage.getItem(t);if(e)try{o=JSON.parse(o)}catch(t){!function(...t){console.error(...t)}("Error while parsing stored json value: ",t)}return o}class o{static instance=null;static version="1.0.3";darkModeToggleButton;options;defaults={onChange:t=>{},onDark:()=>{},onLight:()=>{},rootElement:document.documentElement,darkModeStorageKey:"user-color-scheme",darkModeMediaQueryKey:"--color-mode",rootElementDarkModeAttributeName:"data-user-color-scheme"};_onChange=t=>{};_onDark=()=>{};_onLight=()=>{};validColorModeKeys={dark:!0,light:!0};invertDarkModeObj={dark:"light",light:"dark"};constructor(t,e={}){if(o.instance)return o.instance;const r=function(t,e,o){if("string"!=typeof t)return t;let r=document;return null===e&&o?r=o:e&&e instanceof Node&&"querySelector"in e?r=e:o&&o instanceof Node&&"querySelector"in o&&(r=o),"all"===e?r.querySelectorAll(t):r.querySelector(t)}(t);if(!r)throw new Error("ToggleButton could not be found with the selector provided.");this.init(r,e),o.instance=this,Object.seal(this)}set onChange(t){this._onChange=t}set onDark(t){this._onDark=t}set onLight(t){this._onLight=t}init(e,r){const i=t(this.defaults,r);this.options=i,this.darkModeToggleButton=e,this._onChange=this.options.onChange||this._onChange,this._onDark=this.options.onDark||this._onDark,this._onLight=this.options.onLight||this._onLight,this.setupDarkMode(),console.log(`DarkMode is loaded, version: ${o.version}`)}setupDarkMode(){const t=this.detectSystemDarkMode(),e=this.applyCustomDarkModeSettings(t);this.bindEvents(),e&&"dark"===e?this._onDark():this._onLight()}bindEvents(){this.darkModeToggleButton.addEventListener("click",(()=>{const t=this.toggleCustomDarkMode();this.applyCustomDarkModeSettings(t),t&&(this._onChange(t),"dark"===t?this._onDark():"light"===t&&this._onLight())}))}getModeFromCSSMediaQuery(){const t=getComputedStyle(this.options.rootElement).getPropertyValue(this.options.darkModeMediaQueryKey);return t.length?t.replace(/\"/g,"").trim():"dark"===t?"dark":"light"}detectSystemDarkMode(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}resetRootDarkModeAttribute(){var t;this.options.rootElement.removeAttribute(this.options.rootElementDarkModeAttributeName),t=this.options.darkModeStorageKey,window.localStorage.removeItem(t)}applyCustomDarkModeSettings(t){const o=t||e(this.options.darkModeStorageKey);return o===this.getModeFromCSSMediaQuery()?this.resetRootDarkModeAttribute():this.validColorModeKeys[o]?this.options.rootElement.setAttribute(this.options.rootElementDarkModeAttributeName,o):this.resetRootDarkModeAttribute(),this.darkModeToggleButton&&this.darkModeToggleButton instanceof Element&&(this.darkModeToggleButton.classList.remove("dm-"+this.invertDarkModeObj[o]),this.darkModeToggleButton.classList.add("dm-"+o)),o}toggleCustomDarkMode(){let t=e(this.options.darkModeStorageKey);if(this.validColorModeKeys[t])t=this.invertDarkModeObj[t];else{if(null!==t)return;t=this.invertDarkModeObj[this.getModeFromCSSMediaQuery()]}return function(t,e,o=!0){o&&(e=JSON.stringify(e)),window.localStorage.setItem(t,e)}(this.options.darkModeStorageKey,t),t}}return o}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).DarkMode=e()}(this,(function(){"use strict";function t(e,...o){if(!o.length)return e;const i=o.shift();if(i)for(const o in i)if(Object.prototype.hasOwnProperty.call(i,o)){const n=i[o],s=o;"object"!=typeof(r=n)||null===r||Array.isArray(r)?e[s]=n:(e[s]&&"object"==typeof e[s]||(e[s]={}),t(e[s],n))}var r;return t(e,...o)}function e(t,e=!0){let o=window.localStorage.getItem(t);if(e)try{o=JSON.parse(o)}catch(t){!function(...t){console.error(...t)}("Error while parsing stored json value: ",t)}return o}class o{static instance=null;static version="1.0.4";darkModeToggleButton;options;defaults={onChange:t=>{},onDark:()=>{},onLight:()=>{},rootElement:document.documentElement,darkModeStorageKey:"user-color-scheme",darkModeMediaQueryKey:"--color-mode",rootElementDarkModeAttributeName:"data-user-color-scheme"};_onChange=t=>{};_onDark=()=>{};_onLight=()=>{};validColorModeKeys={dark:!0,light:!0};invertDarkModeObj={dark:"light",light:"dark"};constructor(t,e={}){if(o.instance)return o.instance;const i=function(t,e,o){if("string"!=typeof t)return t;let i=document;return null===e&&o?i=o:e&&e instanceof Node&&"querySelector"in e?i=e:o&&o instanceof Node&&"querySelector"in o&&(i=o),"all"===e?i.querySelectorAll(t):i.querySelector(t)}(t);if(!i)throw new Error("ToggleButton could not be found with the selector provided.");this.init(i,e),o.instance=this,Object.seal(this)}set onChange(t){this._onChange=t}set onDark(t){this._onDark=t}set onLight(t){this._onLight=t}init(e,i){const r=t(this.defaults,i);this.options=r,this.darkModeToggleButton=e,this._onChange=this.options.onChange||this._onChange,this._onDark=this.options.onDark||this._onDark,this._onLight=this.options.onLight||this._onLight,this.setupDarkMode(),console.log(`DarkMode is loaded, version: ${o.version}`)}setupDarkMode(){let t=e(this.options.darkModeStorageKey);null===t&&(t=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),this.applyCustomDarkModeSettings(t),"dark"===t?this._onDark():this._onLight(),this.bindEvents(),this.listenToSystemDarkModeChange()}bindEvents(){this.darkModeToggleButton.addEventListener("click",(()=>{const t=this.toggleCustomDarkMode();this.applyCustomDarkModeSettings(t),t&&(this._onChange(t),"dark"===t?this._onDark():"light"===t&&this._onLight())}))}getModeFromCSSMediaQuery(){const t=getComputedStyle(this.options.rootElement).getPropertyValue(this.options.darkModeMediaQueryKey);return t.length?t.replace(/\"/g,"").trim():"dark"===t?"dark":"light"}resetRootDarkModeAttribute(){var t;this.options.rootElement.removeAttribute(this.options.rootElementDarkModeAttributeName),t=this.options.darkModeStorageKey,window.localStorage.removeItem(t)}applyCustomDarkModeSettings(t){const o=t||e(this.options.darkModeStorageKey)||this.getModeFromCSSMediaQuery();return this.validColorModeKeys[o]?this.options.rootElement.setAttribute(this.options.rootElementDarkModeAttributeName,o):this.resetRootDarkModeAttribute(),this.darkModeToggleButton&&this.darkModeToggleButton instanceof Element&&(this.darkModeToggleButton.classList.remove("dm-"+this.invertDarkModeObj[o]),this.darkModeToggleButton.classList.add("dm-"+o)),o}toggleCustomDarkMode(){let t=e(this.options.darkModeStorageKey);if(this.validColorModeKeys[t])t=this.invertDarkModeObj[t];else{if(null!==t)return;t=this.invertDarkModeObj[this.getModeFromCSSMediaQuery()]}return function(t,e,o=!0){o&&(e=JSON.stringify(e)),window.localStorage.setItem(t,e)}(this.options.darkModeStorageKey,t),t}listenToSystemDarkModeChange(){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(t=>{if(null===e(this.options.darkModeStorageKey)){const e=t.matches?"dark":"light";this.applyCustomDarkModeSettings(e),this._onChange(e),"dark"===e?this._onDark():this._onLight()}}))}}return o}));

package.json

 {
   "name": "@carry0987/darkmode",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A simple and lightweight JavaScript library for dark mode toggle with localStorage support.",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15393

increased by6.38%

Lines of code

273

increased by5%

No dependency changes