darkify-js 1.1.4 → 1.1.5

package/README.md

@@ -1,8 +1,8 @@
 # Darkify JS
+[![Run tests](https://github.com/emrocode/darkify-js/actions/workflows/tests.yml/badge.svg)](https://github.com/emrocode/darkify-js/actions/workflows/tests.yml)
 
 🌚 A simple dark mode toggle library that makes it easy to implement dark mode on your website without additional configuration
 
-> [!NOTE]
 > Please make sure to read the [Wiki] for detailed documentation and examples
 
 ### 📦 Installation

package/dist/darkify.cjs.js

@@ -1,12 +1,26 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.4
+ * @version 1.1.5
  * @license MIT
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const isBrowser = typeof window !== 'undefined';
 
@@ -17,72 +31,84 @@ const defaultOptions = {
     useColorScheme: ['#ffffff', '#000000'],
 };
 
+var _Darkify_instances, _a, _Darkify_theme, _Darkify_cssTag, _Darkify_metaTag, _Darkify_init, _Darkify_getOsPreference, _Darkify_createAttribute, _Darkify_updateTags, _Darkify_savePreference, _Darkify_syncThemeBetweenTabs;
 class Darkify {
     constructor(element, options) {
+        _Darkify_instances.add(this);
         this.options = {};
-        if (!isBrowser) {
+        _Darkify_theme.set(this, void 0);
+        _Darkify_cssTag.set(this, void 0);
+        _Darkify_metaTag.set(this, void 0);
+        if (!isBrowser)
             return;
-        }
-        options?.useLocalStorage && (options.useSessionStorage = false);
-        options?.useSessionStorage && (options.useLocalStorage = false);
-        options = { ...defaultOptions, ...options };
+        (options === null || options === void 0 ? void 0 : options.useLocalStorage) && (options.useSessionStorage = false);
+        (options === null || options === void 0 ? void 0 : options.useSessionStorage) && (options.useLocalStorage = false);
+        options = Object.assign(Object.assign({}, defaultOptions), options);
         this.options = options;
-        document.addEventListener('DOMContentLoaded', () => {
-            this.createAttribute();
-            const htmlElement = document.querySelector(element);
-            htmlElement?.addEventListener('click', () => this.onClick());
-        });
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', ({ matches: isDark }) => {
-            this.theme.value = isDark ? 'dark' : 'light';
-            this.savePreference();
-        });
-        this.theme = {
-            value: this.getOsPreference(options) ?? 'light',
-        };
-        this.cssTag = document.createElement('style');
-        this.metaTag = document.createElement('meta');
-        this.createAttribute();
-    }
-    getOsPreference(options) {
-        const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
-        const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
-            (useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey));
-        return (STO ||
-            (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'));
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_init).call(this, element);
+        __classPrivateFieldSet(this, _Darkify_theme, { value: __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_getOsPreference).call(this, options) }, "f");
+        __classPrivateFieldSet(this, _Darkify_cssTag, document.createElement('style'), "f");
+        __classPrivateFieldSet(this, _Darkify_metaTag, document.createElement('meta'), "f");
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_syncThemeBetweenTabs).call(this);
     }
-    createAttribute() {
-        const dataTheme = document.getElementsByTagName('html')[0];
-        const { useColorScheme } = this.options;
-        let css = `/**! Darkify / A simple dark mode toggle library **/:root:is([data-theme="${this.theme.value}"]), [data-theme="${this.theme.value}"] {color-scheme: ${this.theme.value}}`;
-        dataTheme.setAttribute('data-theme', this.theme.value);
-        this.updateTags(css, useColorScheme || []);
-        this.savePreference();
+    toggleTheme() {
+        __classPrivateFieldGet(this, _Darkify_theme, "f").value = __classPrivateFieldGet(this, _Darkify_theme, "f").value === 'light' ? 'dark' : 'light';
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
     }
-    updateTags(css, useColorScheme) {
-        const head = document.head || document.getElementsByTagName('head')[0];
-        this.metaTag.setAttribute('name', 'theme-color');
-        this.metaTag.setAttribute('content', this.theme.value === 'light' ? useColorScheme[0] : useColorScheme[1]);
-        this.cssTag.setAttribute('type', 'text/css');
-        this.cssTag.innerHTML = css;
-        head.appendChild(this.metaTag);
-        head.appendChild(this.cssTag);
-    }
-    savePreference() {
-        const { useLocalStorage } = this.options;
-        const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
-        const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
-        OTS.removeItem(Darkify.storageKey);
-        STO.setItem(Darkify.storageKey, this.theme.value);
-    }
-    onClick() {
-        this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
-        this.createAttribute();
+    getCurrentTheme() {
+        return __classPrivateFieldGet(this, _Darkify_theme, "f").value;
     }
 }
+_a = Darkify, _Darkify_theme = new WeakMap(), _Darkify_cssTag = new WeakMap(), _Darkify_metaTag = new WeakMap(), _Darkify_instances = new WeakSet(), _Darkify_init = function _Darkify_init(element) {
+    window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', ({ matches: isDark }) => {
+        __classPrivateFieldGet(this, _Darkify_theme, "f").value = isDark ? 'dark' : 'light';
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_savePreference).call(this);
+    });
+    document.addEventListener('DOMContentLoaded', () => {
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
+        const htmlElement = document.querySelector(element);
+        htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.addEventListener('click', () => this.toggleTheme());
+    });
+}, _Darkify_getOsPreference = function _Darkify_getOsPreference(options) {
+    const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
+    const STO = (useLocalStorage && window.localStorage.getItem(_a.storageKey)) ||
+        (useSessionStorage && window.sessionStorage.getItem(_a.storageKey));
+    return (STO ||
+        (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'));
+}, _Darkify_createAttribute = function _Darkify_createAttribute() {
+    const dataTheme = document.getElementsByTagName('html')[0];
+    const { useColorScheme } = this.options;
+    let css = `/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${__classPrivateFieldGet(this, _Darkify_theme, "f").value}"]),[data-theme="${__classPrivateFieldGet(this, _Darkify_theme, "f").value}"]{color-scheme:${__classPrivateFieldGet(this, _Darkify_theme, "f").value}}`;
+    dataTheme.setAttribute('data-theme', __classPrivateFieldGet(this, _Darkify_theme, "f").value);
+    __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_updateTags).call(this, css, useColorScheme || []);
+    __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_savePreference).call(this);
+}, _Darkify_updateTags = function _Darkify_updateTags(css, useColorScheme) {
+    const head = document.head || document.getElementsByTagName('head')[0];
+    __classPrivateFieldGet(this, _Darkify_metaTag, "f").setAttribute('name', 'theme-color');
+    __classPrivateFieldGet(this, _Darkify_metaTag, "f").setAttribute('content', __classPrivateFieldGet(this, _Darkify_theme, "f").value === 'light' ? useColorScheme[0] : useColorScheme[1]);
+    __classPrivateFieldGet(this, _Darkify_cssTag, "f").setAttribute('type', 'text/css');
+    __classPrivateFieldGet(this, _Darkify_cssTag, "f").innerHTML = css;
+    head.appendChild(__classPrivateFieldGet(this, _Darkify_metaTag, "f"));
+    head.appendChild(__classPrivateFieldGet(this, _Darkify_cssTag, "f"));
+}, _Darkify_savePreference = function _Darkify_savePreference() {
+    const { useLocalStorage } = this.options;
+    const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
+    const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
+    OTS.removeItem(_a.storageKey);
+    STO.setItem(_a.storageKey, __classPrivateFieldGet(this, _Darkify_theme, "f").value);
+}, _Darkify_syncThemeBetweenTabs = function _Darkify_syncThemeBetweenTabs() {
+    window.addEventListener('storage', (e) => {
+        if (e.key === 'theme' && e.newValue) {
+            __classPrivateFieldGet(this, _Darkify_theme, "f").value = e.newValue;
+            __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
+        }
+    });
+};
 Darkify.storageKey = 'theme';
 
-exports.default = Darkify;
+module.exports = Darkify;

package/dist/darkify.d.ts

@@ -6,24 +6,25 @@ type Options = {
 };
 
 declare class Darkify {
+    #private;
     private static readonly storageKey;
-    options: Options;
-    theme: {
-        value: string;
-    };
-    cssTag: HTMLStyleElement;
-    metaTag: HTMLMetaElement;
+    readonly options: Options;
     /**
      * @param {string} element Button ID ( recommended ) or HTML element
      * @param {object} options Options
      * @see {@link https://github.com/emrocode/darkify-js/wiki|Documentation}
      */
     constructor(element: string, options: Options);
-    getOsPreference(options: Options): string;
-    createAttribute(): void;
-    updateTags(css: string, useColorScheme: string[]): void;
-    savePreference(): void;
-    onClick(): void;
+    /**
+     * Toggles the theme between light and dark modes
+     * @returns {void}
+     */
+    toggleTheme(): void;
+    /**
+     * Retrieves the current active theme
+     * @returns {string}
+     */
+    getCurrentTheme(): string;
 }
 
 export { Darkify as default };

package/dist/darkify.esm.js

@@ -1,9 +1,25 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.4
+ * @version 1.1.5
  * @license MIT
  */
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const isBrowser = typeof window !== 'undefined';
 
 const defaultOptions = {
@@ -13,72 +29,84 @@ const defaultOptions = {
     useColorScheme: ['#ffffff', '#000000'],
 };
 
+var _Darkify_instances, _a, _Darkify_theme, _Darkify_cssTag, _Darkify_metaTag, _Darkify_init, _Darkify_getOsPreference, _Darkify_createAttribute, _Darkify_updateTags, _Darkify_savePreference, _Darkify_syncThemeBetweenTabs;
 class Darkify {
     constructor(element, options) {
+        _Darkify_instances.add(this);
         this.options = {};
-        if (!isBrowser) {
+        _Darkify_theme.set(this, void 0);
+        _Darkify_cssTag.set(this, void 0);
+        _Darkify_metaTag.set(this, void 0);
+        if (!isBrowser)
             return;
-        }
-        options?.useLocalStorage && (options.useSessionStorage = false);
-        options?.useSessionStorage && (options.useLocalStorage = false);
-        options = { ...defaultOptions, ...options };
+        (options === null || options === void 0 ? void 0 : options.useLocalStorage) && (options.useSessionStorage = false);
+        (options === null || options === void 0 ? void 0 : options.useSessionStorage) && (options.useLocalStorage = false);
+        options = Object.assign(Object.assign({}, defaultOptions), options);
         this.options = options;
-        document.addEventListener('DOMContentLoaded', () => {
-            this.createAttribute();
-            const htmlElement = document.querySelector(element);
-            htmlElement?.addEventListener('click', () => this.onClick());
-        });
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', ({ matches: isDark }) => {
-            this.theme.value = isDark ? 'dark' : 'light';
-            this.savePreference();
-        });
-        this.theme = {
-            value: this.getOsPreference(options) ?? 'light',
-        };
-        this.cssTag = document.createElement('style');
-        this.metaTag = document.createElement('meta');
-        this.createAttribute();
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_init).call(this, element);
+        __classPrivateFieldSet(this, _Darkify_theme, { value: __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_getOsPreference).call(this, options) }, "f");
+        __classPrivateFieldSet(this, _Darkify_cssTag, document.createElement('style'), "f");
+        __classPrivateFieldSet(this, _Darkify_metaTag, document.createElement('meta'), "f");
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_syncThemeBetweenTabs).call(this);
     }
-    getOsPreference(options) {
-        const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
-        const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
-            (useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey));
-        return (STO ||
-            (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'));
+    toggleTheme() {
+        __classPrivateFieldGet(this, _Darkify_theme, "f").value = __classPrivateFieldGet(this, _Darkify_theme, "f").value === 'light' ? 'dark' : 'light';
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
     }
-    createAttribute() {
-        const dataTheme = document.getElementsByTagName('html')[0];
-        const { useColorScheme } = this.options;
-        let css = `/**! Darkify / A simple dark mode toggle library **/:root:is([data-theme="${this.theme.value}"]), [data-theme="${this.theme.value}"] {color-scheme: ${this.theme.value}}`;
-        dataTheme.setAttribute('data-theme', this.theme.value);
-        this.updateTags(css, useColorScheme || []);
-        this.savePreference();
-    }
-    updateTags(css, useColorScheme) {
-        const head = document.head || document.getElementsByTagName('head')[0];
-        this.metaTag.setAttribute('name', 'theme-color');
-        this.metaTag.setAttribute('content', this.theme.value === 'light' ? useColorScheme[0] : useColorScheme[1]);
-        this.cssTag.setAttribute('type', 'text/css');
-        this.cssTag.innerHTML = css;
-        head.appendChild(this.metaTag);
-        head.appendChild(this.cssTag);
-    }
-    savePreference() {
-        const { useLocalStorage } = this.options;
-        const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
-        const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
-        OTS.removeItem(Darkify.storageKey);
-        STO.setItem(Darkify.storageKey, this.theme.value);
-    }
-    onClick() {
-        this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
-        this.createAttribute();
+    getCurrentTheme() {
+        return __classPrivateFieldGet(this, _Darkify_theme, "f").value;
     }
 }
+_a = Darkify, _Darkify_theme = new WeakMap(), _Darkify_cssTag = new WeakMap(), _Darkify_metaTag = new WeakMap(), _Darkify_instances = new WeakSet(), _Darkify_init = function _Darkify_init(element) {
+    window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', ({ matches: isDark }) => {
+        __classPrivateFieldGet(this, _Darkify_theme, "f").value = isDark ? 'dark' : 'light';
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_savePreference).call(this);
+    });
+    document.addEventListener('DOMContentLoaded', () => {
+        __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
+        const htmlElement = document.querySelector(element);
+        htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.addEventListener('click', () => this.toggleTheme());
+    });
+}, _Darkify_getOsPreference = function _Darkify_getOsPreference(options) {
+    const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
+    const STO = (useLocalStorage && window.localStorage.getItem(_a.storageKey)) ||
+        (useSessionStorage && window.sessionStorage.getItem(_a.storageKey));
+    return (STO ||
+        (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'));
+}, _Darkify_createAttribute = function _Darkify_createAttribute() {
+    const dataTheme = document.getElementsByTagName('html')[0];
+    const { useColorScheme } = this.options;
+    let css = `/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${__classPrivateFieldGet(this, _Darkify_theme, "f").value}"]),[data-theme="${__classPrivateFieldGet(this, _Darkify_theme, "f").value}"]{color-scheme:${__classPrivateFieldGet(this, _Darkify_theme, "f").value}}`;
+    dataTheme.setAttribute('data-theme', __classPrivateFieldGet(this, _Darkify_theme, "f").value);
+    __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_updateTags).call(this, css, useColorScheme || []);
+    __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_savePreference).call(this);
+}, _Darkify_updateTags = function _Darkify_updateTags(css, useColorScheme) {
+    const head = document.head || document.getElementsByTagName('head')[0];
+    __classPrivateFieldGet(this, _Darkify_metaTag, "f").setAttribute('name', 'theme-color');
+    __classPrivateFieldGet(this, _Darkify_metaTag, "f").setAttribute('content', __classPrivateFieldGet(this, _Darkify_theme, "f").value === 'light' ? useColorScheme[0] : useColorScheme[1]);
+    __classPrivateFieldGet(this, _Darkify_cssTag, "f").setAttribute('type', 'text/css');
+    __classPrivateFieldGet(this, _Darkify_cssTag, "f").innerHTML = css;
+    head.appendChild(__classPrivateFieldGet(this, _Darkify_metaTag, "f"));
+    head.appendChild(__classPrivateFieldGet(this, _Darkify_cssTag, "f"));
+}, _Darkify_savePreference = function _Darkify_savePreference() {
+    const { useLocalStorage } = this.options;
+    const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
+    const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
+    OTS.removeItem(_a.storageKey);
+    STO.setItem(_a.storageKey, __classPrivateFieldGet(this, _Darkify_theme, "f").value);
+}, _Darkify_syncThemeBetweenTabs = function _Darkify_syncThemeBetweenTabs() {
+    window.addEventListener('storage', (e) => {
+        if (e.key === 'theme' && e.newValue) {
+            __classPrivateFieldGet(this, _Darkify_theme, "f").value = e.newValue;
+            __classPrivateFieldGet(this, _Darkify_instances, "m", _Darkify_createAttribute).call(this);
+        }
+    });
+};
 Darkify.storageKey = 'theme';
 
 export { Darkify as default };

package/dist/darkify.min.js

@@ -1,7 +1,7 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.4
+ * @version 1.1.5
  * @license MIT
  */
-var Darkify=function(){"use strict";const e="undefined"!=typeof window,t={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"]};class s{constructor(s,a){this.options={},e&&(a?.useLocalStorage&&(a.useSessionStorage=!1),a?.useSessionStorage&&(a.useLocalStorage=!1),a={...t,...a},this.options=a,document.addEventListener("DOMContentLoaded",(()=>{this.createAttribute();const e=document.querySelector(s);e?.addEventListener("click",(()=>this.onClick()))})),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(({matches:e})=>{this.theme.value=e?"dark":"light",this.savePreference()})),this.theme={value:this.getOsPreference(a)??"light"},this.cssTag=document.createElement("style"),this.metaTag=document.createElement("meta"),this.createAttribute())}getOsPreference(e){const{autoMatchTheme:t,useLocalStorage:a,useSessionStorage:o}=e;return a&&window.localStorage.getItem(s.storageKey)||o&&window.sessionStorage.getItem(s.storageKey)||(t&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}createAttribute(){const e=document.getElementsByTagName("html")[0],{useColorScheme:t}=this.options;let s=`/**! Darkify / A simple dark mode toggle library **/:root:is([data-theme="${this.theme.value}"]), [data-theme="${this.theme.value}"] {color-scheme: ${this.theme.value}}`;e.setAttribute("data-theme",this.theme.value),this.updateTags(s,t||[]),this.savePreference()}updateTags(e,t){const s=document.head||document.getElementsByTagName("head")[0];this.metaTag.setAttribute("name","theme-color"),this.metaTag.setAttribute("content","light"===this.theme.value?t[0]:t[1]),this.cssTag.setAttribute("type","text/css"),this.cssTag.innerHTML=e,s.appendChild(this.metaTag),s.appendChild(this.cssTag)}savePreference(){const{useLocalStorage:e}=this.options,t=e?window.localStorage:window.sessionStorage;(e?window.sessionStorage:window.localStorage).removeItem(s.storageKey),t.setItem(s.storageKey,this.theme.value)}onClick(){this.theme.value="light"===this.theme.value?"dark":"light",this.createAttribute()}}return s.storageKey="theme",s}();
+var Darkify=function(){"use strict";function e(e,t,s,o){if("a"===s&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?o:"a"===s?o.call(e):o?o.value:t.get(e)}function t(e,t,s,o,a){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?a.call(e,s):a?a.value=s:t.set(e,s),s}"function"==typeof SuppressedError&&SuppressedError;const s="undefined"!=typeof window,o={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"]};var a,i,r,n,h,l,c,u,d,m,f;class g{constructor(i,d){a.add(this),this.options={},r.set(this,void 0),n.set(this,void 0),h.set(this,void 0),s&&((null==d?void 0:d.useLocalStorage)&&(d.useSessionStorage=!1),(null==d?void 0:d.useSessionStorage)&&(d.useLocalStorage=!1),d=Object.assign(Object.assign({},o),d),this.options=d,e(this,a,"m",l).call(this,i),t(this,r,{value:e(this,a,"m",c).call(this,d)},"f"),t(this,n,document.createElement("style"),"f"),t(this,h,document.createElement("meta"),"f"),e(this,a,"m",u).call(this),e(this,a,"m",f).call(this))}toggleTheme(){e(this,r,"f").value="light"===e(this,r,"f").value?"dark":"light",e(this,a,"m",u).call(this)}getCurrentTheme(){return e(this,r,"f").value}}return i=g,r=new WeakMap,n=new WeakMap,h=new WeakMap,a=new WeakSet,l=function(t){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(({matches:t})=>{e(this,r,"f").value=t?"dark":"light",e(this,a,"m",m).call(this)})),document.addEventListener("DOMContentLoaded",(()=>{e(this,a,"m",u).call(this);const s=document.querySelector(t);null==s||s.addEventListener("click",(()=>this.toggleTheme()))}))},c=function(e){const{autoMatchTheme:t,useLocalStorage:s,useSessionStorage:o}=e;return s&&window.localStorage.getItem(i.storageKey)||o&&window.sessionStorage.getItem(i.storageKey)||(t&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},u=function(){const t=document.getElementsByTagName("html")[0],{useColorScheme:s}=this.options;let o=`/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${e(this,r,"f").value}"]),[data-theme="${e(this,r,"f").value}"]{color-scheme:${e(this,r,"f").value}}`;t.setAttribute("data-theme",e(this,r,"f").value),e(this,a,"m",d).call(this,o,s||[]),e(this,a,"m",m).call(this)},d=function(t,s){const o=document.head||document.getElementsByTagName("head")[0];e(this,h,"f").setAttribute("name","theme-color"),e(this,h,"f").setAttribute("content","light"===e(this,r,"f").value?s[0]:s[1]),e(this,n,"f").setAttribute("type","text/css"),e(this,n,"f").innerHTML=t,o.appendChild(e(this,h,"f")),o.appendChild(e(this,n,"f"))},m=function(){const{useLocalStorage:t}=this.options,s=t?window.localStorage:window.sessionStorage;(t?window.sessionStorage:window.localStorage).removeItem(i.storageKey),s.setItem(i.storageKey,e(this,r,"f").value)},f=function(){window.addEventListener("storage",(t=>{"theme"===t.key&&t.newValue&&(e(this,r,"f").value=t.newValue,e(this,a,"m",u).call(this))}))},g.storageKey="theme",g}();

package/dist/darkify.umd.js

@@ -1,7 +1,7 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.4
+ * @version 1.1.5
  * @license MIT
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Darkify=t()}(this,(function(){"use strict";const e="undefined"!=typeof window,t={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"]};class s{constructor(s,a){this.options={},e&&(a?.useLocalStorage&&(a.useSessionStorage=!1),a?.useSessionStorage&&(a.useLocalStorage=!1),a={...t,...a},this.options=a,document.addEventListener("DOMContentLoaded",(()=>{this.createAttribute();const e=document.querySelector(s);e?.addEventListener("click",(()=>this.onClick()))})),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(({matches:e})=>{this.theme.value=e?"dark":"light",this.savePreference()})),this.theme={value:this.getOsPreference(a)??"light"},this.cssTag=document.createElement("style"),this.metaTag=document.createElement("meta"),this.createAttribute())}getOsPreference(e){const{autoMatchTheme:t,useLocalStorage:a,useSessionStorage:o}=e;return a&&window.localStorage.getItem(s.storageKey)||o&&window.sessionStorage.getItem(s.storageKey)||(t&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}createAttribute(){const e=document.getElementsByTagName("html")[0],{useColorScheme:t}=this.options;let s=`/**! Darkify / A simple dark mode toggle library **/:root:is([data-theme="${this.theme.value}"]), [data-theme="${this.theme.value}"] {color-scheme: ${this.theme.value}}`;e.setAttribute("data-theme",this.theme.value),this.updateTags(s,t||[]),this.savePreference()}updateTags(e,t){const s=document.head||document.getElementsByTagName("head")[0];this.metaTag.setAttribute("name","theme-color"),this.metaTag.setAttribute("content","light"===this.theme.value?t[0]:t[1]),this.cssTag.setAttribute("type","text/css"),this.cssTag.innerHTML=e,s.appendChild(this.metaTag),s.appendChild(this.cssTag)}savePreference(){const{useLocalStorage:e}=this.options,t=e?window.localStorage:window.sessionStorage;(e?window.sessionStorage:window.localStorage).removeItem(s.storageKey),t.setItem(s.storageKey,this.theme.value)}onClick(){this.theme.value="light"===this.theme.value?"dark":"light",this.createAttribute()}}return s.storageKey="theme",s}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Darkify=t()}(this,(function(){"use strict";function e(e,t,o,s){if("a"===o&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?s:"a"===o?s.call(e):s?s.value:t.get(e)}function t(e,t,o,s,i){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?i.call(e,o):i?i.value=o:t.set(e,o),o}"function"==typeof SuppressedError&&SuppressedError;const o="undefined"!=typeof window,s={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"]};var i,a,n,r,h,l,c,d,u,f,m;class g{constructor(a,u){i.add(this),this.options={},n.set(this,void 0),r.set(this,void 0),h.set(this,void 0),o&&((null==u?void 0:u.useLocalStorage)&&(u.useSessionStorage=!1),(null==u?void 0:u.useSessionStorage)&&(u.useLocalStorage=!1),u=Object.assign(Object.assign({},s),u),this.options=u,e(this,i,"m",l).call(this,a),t(this,n,{value:e(this,i,"m",c).call(this,u)},"f"),t(this,r,document.createElement("style"),"f"),t(this,h,document.createElement("meta"),"f"),e(this,i,"m",d).call(this),e(this,i,"m",m).call(this))}toggleTheme(){e(this,n,"f").value="light"===e(this,n,"f").value?"dark":"light",e(this,i,"m",d).call(this)}getCurrentTheme(){return e(this,n,"f").value}}return a=g,n=new WeakMap,r=new WeakMap,h=new WeakMap,i=new WeakSet,l=function(t){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(({matches:t})=>{e(this,n,"f").value=t?"dark":"light",e(this,i,"m",f).call(this)})),document.addEventListener("DOMContentLoaded",(()=>{e(this,i,"m",d).call(this);const o=document.querySelector(t);null==o||o.addEventListener("click",(()=>this.toggleTheme()))}))},c=function(e){const{autoMatchTheme:t,useLocalStorage:o,useSessionStorage:s}=e;return o&&window.localStorage.getItem(a.storageKey)||s&&window.sessionStorage.getItem(a.storageKey)||(t&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},d=function(){const t=document.getElementsByTagName("html")[0],{useColorScheme:o}=this.options;let s=`/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${e(this,n,"f").value}"]),[data-theme="${e(this,n,"f").value}"]{color-scheme:${e(this,n,"f").value}}`;t.setAttribute("data-theme",e(this,n,"f").value),e(this,i,"m",u).call(this,s,o||[]),e(this,i,"m",f).call(this)},u=function(t,o){const s=document.head||document.getElementsByTagName("head")[0];e(this,h,"f").setAttribute("name","theme-color"),e(this,h,"f").setAttribute("content","light"===e(this,n,"f").value?o[0]:o[1]),e(this,r,"f").setAttribute("type","text/css"),e(this,r,"f").innerHTML=t,s.appendChild(e(this,h,"f")),s.appendChild(e(this,r,"f"))},f=function(){const{useLocalStorage:t}=this.options,o=t?window.localStorage:window.sessionStorage;(t?window.sessionStorage:window.localStorage).removeItem(a.storageKey),o.setItem(a.storageKey,e(this,n,"f").value)},m=function(){window.addEventListener("storage",(t=>{"theme"===t.key&&t.newValue&&(e(this,n,"f").value=t.newValue,e(this,i,"m",d).call(this))}))},g.storageKey="theme",g}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "darkify-js",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A simple dark mode toggle library",
   "type": "module",
   "main": "dist/darkify.cjs.js",
@@ -16,34 +16,39 @@
   "scripts": {
     "_cls": "rm -rf dist",
     "_bundle": "rollup -c rollup.config.ts --configPlugin typescript",
-    "prettier": "prettier --write src/",
-    "build": "npm run _cls && npm run _bundle"
+    "build": "npm run _cls && npm run _bundle",
+    "format": "prettier --write src/",
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest"
   },
-  "keywords": [
-    "color-scheme",
-    "toggle",
-    "dark-mode",
-    "dark-theme"
-  ],
-  "author": "Emilio Romero <emrocode@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/emrocode/darkify-js"
   },
-  "homepage": "https://github.com/emrocode/darkify-js#readme",
-  "bugs": {
-    "url": "https://github.com/emrocode/darkify-js/issues"
-  },
+  "keywords": [
+    "dark mode",
+    "light mode",
+    "theme toggle",
+    "dark theme",
+    "color scheme",
+    "theme switcher",
+    "night mode",
+    "automatic theme"
+  ],
+  "author": "Emilio Romero <emrocode@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "prettier": "^3.2.5",
-    "rollup": "^4.18.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/jest": "^29.5.14",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.4.2",
+    "rollup": "^4.34.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-dts": "^6.1.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3"
   }
 }