darkify-js 1.1.0

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +1,28 @@
+# 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)

package/dist/darkify.d.ts

@@ -0,0 +1,27 @@
+interface options {
+  autoMatchTheme?: boolean;
+  useLocalStorage?: boolean;
+  useSessionStorage?: boolean;
+  useColors: string;
+}
+
+declare class Darkify {
+    options: options;
+    theme: {
+        value: string;
+    };
+    cssTag: HTMLStyleElement;
+    metaTag: HTMLMetaElement;
+    private static readonly storageKey;
+    /**
+     * @param {string} element Button ID ( recommended ) or HTML element
+     * @param {object} options Options
+     */
+    constructor(element: string, options: options);
+    getOsPreference(options: options): string | null;
+    createAttribute(): void;
+    savePreference(): void;
+    onClick(): void;
+}
+
+export { Darkify as default };

package/dist/darkify.js

@@ -0,0 +1,106 @@
+/**
+ *
+ * @author Emilio Romero <emrocode@gmail.com>
+ * @version 1.1.0
+ * @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 {
+        /**
+         * @param {string} element Button ID ( recommended ) or HTML element
+         * @param {object} options Options
+         */
+        constructor(element, options) {
+            if (!isBrowser) {
+                return;
+            }
+            // avoid using both values
+            if (options.useLocalStorage && options.useSessionStorage) {
+                console.warn('Both storage options are enabled. Disabling useSessionStorage...');
+                options.useSessionStorage = false;
+            }
+            else if (!options.useLocalStorage && !options.useSessionStorage) {
+                console.warn('Both storage options are disabled. Enabling useLocalStorage...');
+                options.useLocalStorage = true;
+            }
+            else if (options.useSessionStorage) {
+                options.useLocalStorage = false;
+            }
+            const defaultOptions = {
+                autoMatchTheme: true,
+                useLocalStorage: true,
+                useSessionStorage: false,
+                useColors: ['#ffffff', '#000000'],
+            };
+            this.options = Object.assign({}, defaultOptions, options);
+            document.addEventListener('DOMContentLoaded', () => {
+                this.createAttribute();
+                const htmlElement = document.querySelector(element);
+                htmlElement?.addEventListener('click', () => this.onClick());
+            });
+            // sync with system changes
+            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();
+        }
+        // get os color preference
+        getOsPreference(options) {
+            if (options.useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) {
+                return window.localStorage.getItem(Darkify.storageKey);
+            }
+            else if (options.useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey)) {
+                return window.sessionStorage.getItem(Darkify.storageKey);
+            }
+            else {
+                return options.autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? 'dark'
+                    : 'light';
+            }
+        }
+        createAttribute() {
+            let dataTheme = document.getElementsByTagName('html')[0];
+            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}}`;
+            let head = document.head;
+            // set theme-color meta tag
+            this.metaTag.setAttribute('name', 'theme-color');
+            this.metaTag.setAttribute('content', this.theme.value === 'light' ? this.options.useColors[0] : this.options.useColors[1]);
+            this.cssTag.setAttribute('type', 'text/css');
+            this.cssTag.innerHTML = css;
+            dataTheme.setAttribute('data-theme', this.theme.value);
+            head.appendChild(this.metaTag);
+            head.appendChild(this.cssTag);
+            this.savePreference();
+        }
+        // save to local or session storage
+        savePreference() {
+            const STO = this.options.useLocalStorage ? window.localStorage : window.sessionStorage;
+            const OTS = this.options.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;
+
+}));

package/dist/darkify.min.js

@@ -0,0 +1,7 @@
+/**
+ *
+ * @author Emilio Romero <emrocode@gmail.com>
+ * @version 1.1.0
+ * @license MIT
+ */
+var Darkify=function(){"use strict";const e="undefined"!=typeof window;class t{constructor(t,s){if(!e)return;s.useLocalStorage&&s.useSessionStorage?(console.warn("Both storage options are enabled. Disabling useSessionStorage..."),s.useSessionStorage=!1):s.useLocalStorage||s.useSessionStorage?s.useSessionStorage&&(s.useLocalStorage=!1):(console.warn("Both storage options are disabled. Enabling useLocalStorage..."),s.useLocalStorage=!0);this.options=Object.assign({},{autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColors:["#ffffff","#000000"]},s),document.addEventListener("DOMContentLoaded",(()=>{this.createAttribute();document.querySelector(t)?.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){return e.useLocalStorage&&window.localStorage.getItem(t.storageKey)?window.localStorage.getItem(t.storageKey):e.useSessionStorage&&window.sessionStorage.getItem(t.storageKey)?window.sessionStorage.getItem(t.storageKey):e.autoMatchTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}createAttribute(){let e=document.getElementsByTagName("html")[0],t=`/**! Darkify / Easy dark mode for your site **/:root:is([data-theme="${this.theme.value}"]), [data-theme="${this.theme.value}"] {color-scheme: ${this.theme.value}}`,s=document.head;this.metaTag.setAttribute("name","theme-color"),this.metaTag.setAttribute("content","light"===this.theme.value?this.options.useColors[0]:this.options.useColors[1]),this.cssTag.setAttribute("type","text/css"),this.cssTag.innerHTML=t,e.setAttribute("data-theme",this.theme.value),s.appendChild(this.metaTag),s.appendChild(this.cssTag),this.savePreference()}savePreference(){const e=this.options.useLocalStorage?window.localStorage:window.sessionStorage;(this.options.useLocalStorage?window.sessionStorage:window.localStorage).removeItem(t.storageKey),e.setItem(t.storageKey,this.theme.value)}onClick(){this.theme.value="light"===this.theme.value?"dark":"light",this.createAttribute()}}return t.storageKey="darkify-theme",t}();

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "darkify-js",
+  "version": "1.1.0",
+  "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.1.0",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "prettier": "^2.8.0",
+    "rollup": "^3.4.0",
+    "rollup-plugin-dts": "^5.0.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3"
+  }
+}