@carry0987/darkmode - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/darkMode.d.ts

@@ -35,2 +35,3 @@ type DarkModeCallback = () => void;
     private getModeFromCSSMediaQuery;
+    private detectSystemDarkMode;
     private resetRootDarkModeAttribute;
@@ -37,0 +38,0 @@ private applyCustomDarkModeSettings;

dist/darkMode.esm.js

@@ -73,3 +73,3 @@ function reportError(...error) {
     static instance = null;
-    static version = '1.0.2';
+    static version = '1.0.3';
     darkModeToggleButton;
@@ -134,3 +134,4 @@ options;
     setupDarkMode() {
-        const currentSetting = this.applyCustomDarkModeSettings();
+        const systemSetting = this.detectSystemDarkMode();
+        const currentSetting = this.applyCustomDarkModeSettings(systemSetting);
         this.bindEvents();
@@ -166,2 +167,10 @@ if (currentSetting && currentSetting === 'dark') {
     }
+    detectSystemDarkMode() {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        else {
+            return 'light';
+        }
+    }
     resetRootDarkModeAttribute() {
@@ -168,0 +177,0 @@ this.options.rootElement.removeAttribute(this.options.rootElementDarkModeAttributeName);

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 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.2";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(){const t=this.applyCustomDarkModeSettings();this.bindEvents(),t&&"dark"===t?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"}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 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}));

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

14470

increased by3.12%

Lines of code

260

increased by4.42%

No dependency changes