darkify-js 1.1.2 → 1.1.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 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,28 +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
-
-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
+
+🌚 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
+
+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

@@ -0,0 +1,88 @@
+/**
+ *
+ * @author Emilio Romero <emrocode@gmail.com>
+ * @version 1.1.4
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isBrowser = typeof window !== 'undefined';
+
+const defaultOptions = {
+    autoMatchTheme: true,
+    useLocalStorage: true,
+    useSessionStorage: false,
+    useColorScheme: ['#ffffff', '#000000'],
+};
+
+class Darkify {
+    constructor(element, options) {
+        this.options = {};
+        if (!isBrowser) {
+            return;
+        }
+        options?.useLocalStorage && (options.useSessionStorage = false);
+        options?.useSessionStorage && (options.useLocalStorage = false);
+        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();
+        });
+        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 || 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();
+    }
+}
+Darkify.storageKey = 'theme';
+
+exports.default = Darkify;

package/dist/darkify.d.ts

@@ -1,19 +1,22 @@
-type Options = {
-  autoMatchTheme?: boolean;
-  useLocalStorage?: boolean;
-  useSessionStorage?: boolean;
-  useColorScheme?: string[];
+type Options = {
+  autoMatchTheme?: boolean;
+  useLocalStorage?: boolean;
+  useSessionStorage?: boolean;
+  useColorScheme?: string[];
 };
 
 declare class Darkify {
     private static readonly storageKey;
-    private options;
-    private theme;
-    private cssTag;
-    private metaTag;
+    options: Options;
+    theme: {
+        value: string;
+    };
+    cssTag: HTMLStyleElement;
+    metaTag: HTMLMetaElement;
     /**
      * @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;

package/dist/darkify.esm.js

@@ -0,0 +1,84 @@
+/**
+ *
+ * @author Emilio Romero <emrocode@gmail.com>
+ * @version 1.1.4
+ * @license MIT
+ */
+const isBrowser = typeof window !== 'undefined';
+
+const defaultOptions = {
+    autoMatchTheme: true,
+    useLocalStorage: true,
+    useSessionStorage: false,
+    useColorScheme: ['#ffffff', '#000000'],
+};
+
+class Darkify {
+    constructor(element, options) {
+        this.options = {};
+        if (!isBrowser) {
+            return;
+        }
+        options?.useLocalStorage && (options.useSessionStorage = false);
+        options?.useSessionStorage && (options.useLocalStorage = false);
+        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();
+        });
+        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 || 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();
+    }
+}
+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.2
+ * @version 1.1.4
  * @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 / Easy dark mode for your site **/: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";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}();

package/dist/darkify.umd.js

@@ -0,0 +1,7 @@
+/**
+ *
+ * @author Emilio Romero <emrocode@gmail.com>
+ * @version 1.1.4
+ * @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}));

package/package.json

@@ -1,46 +1,49 @@
-{
-  "name": "darkify-js",
-  "version": "1.1.2",
-  "description": "Create an easy dark mode for your site",
-  "type": "module",
-  "main": "dist/darkify.js",
-  "types": "dist/darkify.d.ts",
-  "files": [
-    "dist/darkify.d.ts",
-    "dist/darkify.js",
-    "dist/darkify.min.js",
-    "dist/darkify.min.js.map"
-  ],
-  "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-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "prettier": "^3.2.4",
-    "rollup": "^4.9.6",
-    "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^6.1.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.3.3"
-  }
-}
+{
+  "name": "darkify-js",
+  "version": "1.1.4",
+  "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"
+  }
+}

package/dist/darkify.js

@@ -1,95 +0,0 @@
-/**
- *
- * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.2
- * @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 / Easy dark mode for your site **/: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;
-
-}));