darkify-js 1.1.3 → 1.1.5

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022-present Emilio Romero
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022-present Emilio Romero
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,29 +1,34 @@
-# Darkify js
-Create an easy dark mode for your site
-## 📦 Installation
-```bash
-npm install darkify-js
-```
-## ⚙️ Setup
-```js
-import Darkify from 'darkify-js'
-
-const options = {
-  autoMatchTheme: true,
-}
-
-// autoMatchTheme: default is true
-// useLocalStorage: default is true
-// useSessionStorage: default is false
-// useColorScheme: default is ['#ffffff', '#000000']
-
-var darkMode = new Darkify('#element', options)
-```
-### CDN
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/darkify-js"></script>
-```
-
-## Compatibility
-[Check browser compatibility](https://caniuse.com/mdn-css_properties_color-scheme)
+# 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
+
+> Please make sure to read the [Wiki] for detailed documentation and examples
+
+### 📦 Installation
+
+Use npm or any other package manager:
+
+```bash
+npm install darkify-js
+```
+
+### ⚙️ Setup
+
+```js
+// main.js
+import Darkify from 'darkify-js';
+
+const options = {
+  autoMatchTheme: true,
+};
+
+// autoMatchTheme: default is true
+// useLocalStorage: default is true
+// useSessionStorage: default is false
+// useColorScheme: default is ['#ffffff', '#000000']
+
+new Darkify('#element', options);
+```
+
+[Wiki]: https://github.com/emrocode/darkify-js/wiki

package/dist/darkify.cjs.js

@@ -1,91 +1,114 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.3
+ * @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';
+
+const defaultOptions = {
+    autoMatchTheme: true,
+    useLocalStorage: true,
+    useSessionStorage: false,
+    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;
-        }
-        if (options?.useLocalStorage) {
-            options.useSessionStorage = false;
-        }
-        else if (options?.useSessionStorage) {
-            options.useLocalStorage = false;
-        }
-        const defaultOptions = {
-            autoMatchTheme: true,
-            useLocalStorage: true,
-            useSessionStorage: false,
-            useColorScheme: ['#ffffff', '#000000'],
-        };
-        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();
-            return window.location.reload();
-        });
-        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'));
-    }
-    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();
+        __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);
     }
-    updateTags(css, useColorScheme) {
-        const head = document.head;
-        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);
+    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);
     }
-    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;
     }
 }
-Darkify.storageKey = 'darkify-theme';
+_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

@@ -1,26 +1,30 @@
-type Options = {
-  autoMatchTheme?: boolean;
-  useLocalStorage?: boolean;
-  useSessionStorage?: boolean;
-  useColorScheme?: string[];
+type Options = {
+  autoMatchTheme?: boolean;
+  useLocalStorage?: boolean;
+  useSessionStorage?: boolean;
+  useColorScheme?: string[];
 };
 
 declare class Darkify {
+    #private;
     private static readonly storageKey;
-    private options;
-    private theme;
-    private cssTag;
-    private metaTag;
+    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,87 +1,112 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.3
+ * @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 = {
+    autoMatchTheme: true,
+    useLocalStorage: true,
+    useSessionStorage: false,
+    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;
-        }
-        if (options?.useLocalStorage) {
-            options.useSessionStorage = false;
-        }
-        else if (options?.useSessionStorage) {
-            options.useLocalStorage = false;
-        }
-        const defaultOptions = {
-            autoMatchTheme: true,
-            useLocalStorage: true,
-            useSessionStorage: false,
-            useColorScheme: ['#ffffff', '#000000'],
-        };
-        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();
-            return window.location.reload();
-        });
-        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;
-        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;
     }
 }
-Darkify.storageKey = 'darkify-theme';
+_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.3
+ * @version 1.1.5
  * @license MIT
  */
-var Darkify=function(){"use strict";const e="undefined"!=typeof window;class t{constructor(t,s){if(this.options={},!e)return;s?.useLocalStorage?s.useSessionStorage=!1:s?.useSessionStorage&&(s.useLocalStorage=!1);s={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"],...s},this.options=s,document.addEventListener("DOMContentLoaded",(()=>{this.createAttribute();const e=document.querySelector(t);e?.addEventListener("click",(()=>this.onClick()))})),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(({matches:e})=>(this.theme.value=e?"dark":"light",this.savePreference(),window.location.reload()))),this.theme={value:this.getOsPreference(s)??"light"},this.cssTag=document.createElement("style"),this.metaTag=document.createElement("meta"),this.createAttribute()}getOsPreference(e){const{autoMatchTheme:s,useLocalStorage:a,useSessionStorage:o}=e;return a&&window.localStorage.getItem(t.storageKey)||o&&window.sessionStorage.getItem(t.storageKey)||(s&&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;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,s=e?window.localStorage:window.sessionStorage;(e?window.sessionStorage:window.localStorage).removeItem(t.storageKey),s.setItem(t.storageKey,this.theme.value)}onClick(){this.theme.value="light"===this.theme.value?"dark":"light",this.createAttribute()}}return t.storageKey="darkify-theme",t}();
+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,95 +1,7 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.3
+ * @version 1.1.5
  * @license MIT
  */
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Darkify = factory());
-})(this, (function () { 'use strict';
-
-    const isBrowser = typeof window !== 'undefined';
-    class Darkify {
-        constructor(element, options) {
-            this.options = {};
-            if (!isBrowser) {
-                return;
-            }
-            if (options?.useLocalStorage) {
-                options.useSessionStorage = false;
-            }
-            else if (options?.useSessionStorage) {
-                options.useLocalStorage = false;
-            }
-            const defaultOptions = {
-                autoMatchTheme: true,
-                useLocalStorage: true,
-                useSessionStorage: false,
-                useColorScheme: ['#ffffff', '#000000'],
-            };
-            options = { ...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();
-                return window.location.reload();
-            });
-            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'));
-        }
-        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;
-            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();
-        }
-    }
-    Darkify.storageKey = 'darkify-theme';
-
-    return Darkify;
-
-}));
+!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,49 +1,54 @@
-{
-  "name": "darkify-js",
-  "version": "1.1.3",
-  "description": "A simple dark mode toggle library",
-  "type": "module",
-  "main": "dist/darkify.cjs.js",
-  "module": "dist/darkify.esm.js",
-  "types": "dist/darkify.d.ts",
-  "files": [
-    "dist/darkify.d.ts",
-    "dist/darkify.cjs.js",
-    "dist/darkify.esm.js",
-    "dist/darkify.umd.js",
-    "dist/darkify.min.js"
-  ],
-  "scripts": {
-    "_cls": "rm -rf dist",
-    "_bundle": "rollup -c rollup.config.ts --configPlugin typescript",
-    "prettier": "prettier --write src/",
-    "build": "npm run _cls && npm run _bundle"
-  },
-  "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"
-  },
-  "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-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^6.1.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "darkify-js",
+  "version": "1.1.5",
+  "description": "A simple dark mode toggle library",
+  "type": "module",
+  "main": "dist/darkify.cjs.js",
+  "module": "dist/darkify.esm.js",
+  "types": "dist/darkify.d.ts",
+  "files": [
+    "dist/darkify.d.ts",
+    "dist/darkify.cjs.js",
+    "dist/darkify.esm.js",
+    "dist/darkify.umd.js",
+    "dist/darkify.min.js"
+  ],
+  "scripts": {
+    "_cls": "rm -rf dist",
+    "_bundle": "rollup -c rollup.config.ts --configPlugin typescript",
+    "build": "npm run _cls && npm run _bundle",
+    "format": "prettier --write src/",
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emrocode/darkify-js"
+  },
+  "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-terser": "^0.4.4",
+    "@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",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3"
+  }
+}