darkify-js 1.1.7 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/darkify.cjs.js +100 -0
  2. package/dist/darkify.esm.js +1 -1
  3. package/dist/darkify.min.js +1 -1
  4. package/dist/darkify.umd.js +1 -1
  5. package/package.json +4 -2
package/dist/darkify.cjs.js ADDED
@@ -0,0 +1,100 @@
1
+ /**
2
+ *
3
+ * @author Emilio Romero <emrocode@gmail.com>
4
+ * @version 1.1.9
5
+ * @license MIT
6
+ */
7
+ 'use strict';
8
+
9
+ Object.defineProperty(exports, '__esModule', { value: true });
10
+
11
+ const isBrowser = typeof window !== 'undefined';
12
+
13
+ const defaultOptions = {
14
+ autoMatchTheme: true,
15
+ useLocalStorage: true,
16
+ useSessionStorage: false,
17
+ useColorScheme: ['#ffffff', '#000000'],
18
+ };
19
+
20
+ class Darkify {
21
+ constructor(element, options) {
22
+ this.options = {};
23
+ this.theme = 'light';
24
+ if (!isBrowser)
25
+ return;
26
+ (options === null || options === void 0 ? void 0 : options.useLocalStorage) && (options.useSessionStorage = false);
27
+ (options === null || options === void 0 ? void 0 : options.useSessionStorage) && (options.useLocalStorage = false);
28
+ options = Object.assign(Object.assign({}, defaultOptions), options);
29
+ this.options = options;
30
+ this.init(element);
31
+ this.theme = this.getOsPreference(options);
32
+ this._style = document.createElement('style');
33
+ this._meta = document.createElement('meta');
34
+ this.createAttribute();
35
+ this.syncThemeBetweenTabs();
36
+ }
37
+ init(element) {
38
+ window
39
+ .matchMedia('(prefers-color-scheme: dark)')
40
+ .addEventListener('change', ({ matches: isDark }) => {
41
+ this.theme = isDark ? 'dark' : 'light';
42
+ this.savePreference();
43
+ });
44
+ document.addEventListener('DOMContentLoaded', () => {
45
+ const htmlElement = document.querySelector(element);
46
+ htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.addEventListener('click', () => this.toggleTheme());
47
+ });
48
+ }
49
+ getOsPreference(options) {
50
+ const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
51
+ const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
52
+ (useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey)) ||
53
+ (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
54
+ ? 'dark'
55
+ : 'light');
56
+ return STO;
57
+ }
58
+ createAttribute() {
59
+ const dataTheme = document.getElementsByTagName('html')[0];
60
+ const { useColorScheme } = this.options;
61
+ let css = `/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;
62
+ dataTheme.setAttribute('data-theme', this.theme);
63
+ this.updateTags(css, useColorScheme !== null && useColorScheme !== void 0 ? useColorScheme : []);
64
+ this.savePreference();
65
+ }
66
+ updateTags(css, useColorScheme) {
67
+ const head = document.head || document.getElementsByTagName('head')[0];
68
+ this._meta.setAttribute('name', 'theme-color');
69
+ this._meta.setAttribute('content', this.theme === 'light' ? useColorScheme[0] : useColorScheme[1]);
70
+ this._style.setAttribute('type', 'text/css');
71
+ this._style.innerHTML = css;
72
+ head.appendChild(this._meta);
73
+ head.appendChild(this._style);
74
+ }
75
+ savePreference() {
76
+ const { useLocalStorage } = this.options;
77
+ const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
78
+ const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
79
+ OTS.removeItem(Darkify.storageKey);
80
+ STO.setItem(Darkify.storageKey, this.theme);
81
+ }
82
+ syncThemeBetweenTabs() {
83
+ window.addEventListener('storage', e => {
84
+ if (e.key === Darkify.storageKey && e.newValue) {
85
+ this.theme = e.newValue;
86
+ this.createAttribute();
87
+ }
88
+ });
89
+ }
90
+ toggleTheme() {
91
+ this.theme = this.theme === 'light' ? 'dark' : 'light';
92
+ this.createAttribute();
93
+ }
94
+ getCurrentTheme() {
95
+ return this.theme;
96
+ }
97
+ }
98
+ Darkify.storageKey = 'theme';
99
+
100
+ exports.default = Darkify;
package/dist/darkify.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  *
3
3
  * @author Emilio Romero <emrocode@gmail.com>
4
- * @version 1.1.7
4
+ * @version 1.1.9
5
5
  * @license MIT
6
6
  */
7
7
  const isBrowser = typeof window !== 'undefined';
package/dist/darkify.min.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  *
3
3
  * @author Emilio Romero <emrocode@gmail.com>
4
- * @version 1.1.7
4
+ * @version 1.1.9
5
5
  * @license MIT
6
6
  */
7
7
  var Darkify=function(){"use strict";const e="undefined"!=typeof window,t={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"]};class s{constructor(s,o){this.options={},this.theme="light",e&&((null==o?void 0:o.useLocalStorage)&&(o.useSessionStorage=!1),(null==o?void 0:o.useSessionStorage)&&(o.useLocalStorage=!1),o=Object.assign(Object.assign({},t),o),this.options=o,this.init(s),this.theme=this.getOsPreference(o),this._style=document.createElement("style"),this._meta=document.createElement("meta"),this.createAttribute(),this.syncThemeBetweenTabs())}init(e){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:e})=>{this.theme=e?"dark":"light",this.savePreference()}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(e);null==t||t.addEventListener("click",()=>this.toggleTheme())})}getOsPreference(e){const{autoMatchTheme:t,useLocalStorage:o,useSessionStorage:a}=e;return o&&window.localStorage.getItem(s.storageKey)||a&&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 **/\n:root:is([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;e.setAttribute("data-theme",this.theme),this.updateTags(s,null!=t?t:[]),this.savePreference()}updateTags(e,t){const s=document.head||document.getElementsByTagName("head")[0];this._meta.setAttribute("name","theme-color"),this._meta.setAttribute("content","light"===this.theme?t[0]:t[1]),this._style.setAttribute("type","text/css"),this._style.innerHTML=e,s.appendChild(this._meta),s.appendChild(this._style)}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)}syncThemeBetweenTabs(){window.addEventListener("storage",e=>{e.key===s.storageKey&&e.newValue&&(this.theme=e.newValue,this.createAttribute())})}toggleTheme(){this.theme="light"===this.theme?"dark":"light",this.createAttribute()}getCurrentTheme(){return this.theme}}return s.storageKey="theme",s}();
package/dist/darkify.umd.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  *
3
3
  * @author Emilio Romero <emrocode@gmail.com>
4
- * @version 1.1.7
4
+ * @version 1.1.9
5
5
  * @license MIT
6
6
  */
7
7
  !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,o){this.options={},this.theme="light",e&&((null==o?void 0:o.useLocalStorage)&&(o.useSessionStorage=!1),(null==o?void 0:o.useSessionStorage)&&(o.useLocalStorage=!1),o=Object.assign(Object.assign({},t),o),this.options=o,this.init(s),this.theme=this.getOsPreference(o),this._style=document.createElement("style"),this._meta=document.createElement("meta"),this.createAttribute(),this.syncThemeBetweenTabs())}init(e){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:e})=>{this.theme=e?"dark":"light",this.savePreference()}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(e);null==t||t.addEventListener("click",()=>this.toggleTheme())})}getOsPreference(e){const{autoMatchTheme:t,useLocalStorage:o,useSessionStorage:i}=e;return o&&window.localStorage.getItem(s.storageKey)||i&&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 **/\n:root:is([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;e.setAttribute("data-theme",this.theme),this.updateTags(s,null!=t?t:[]),this.savePreference()}updateTags(e,t){const s=document.head||document.getElementsByTagName("head")[0];this._meta.setAttribute("name","theme-color"),this._meta.setAttribute("content","light"===this.theme?t[0]:t[1]),this._style.setAttribute("type","text/css"),this._style.innerHTML=e,s.appendChild(this._meta),s.appendChild(this._style)}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)}syncThemeBetweenTabs(){window.addEventListener("storage",e=>{e.key===s.storageKey&&e.newValue&&(this.theme=e.newValue,this.createAttribute())})}toggleTheme(){this.theme="light"===this.theme?"dark":"light",this.createAttribute()}getCurrentTheme(){return this.theme}}return s.storageKey="theme",s});
package/package.json CHANGED
@@ -1,14 +1,15 @@
1
1
  {
2
2
  "name": "darkify-js",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "description": "A simple dark mode toggle library",
5
5
  "type": "module",
6
- "main": "dist/darkify.umd.js",
6
+ "main": "dist/darkify.cjs.js",
7
7
  "module": "dist/darkify.esm.js",
8
8
  "browser": "dist/darkify.min.js",
9
9
  "types": "dist/darkify.d.ts",
10
10
  "files": [
11
11
  "dist/darkify.d.ts",
12
+ "dist/darkify.cjs.js",
12
13
  "dist/darkify.esm.js",
13
14
  "dist/darkify.umd.js",
14
15
  "dist/darkify.min.js"
@@ -37,6 +38,7 @@
37
38
  "author": "Emilio Romero <emrocode@gmail.com>",
38
39
  "license": "MIT",
39
40
  "devDependencies": {
41
+ "@rollup/plugin-commonjs": "^28.0.6",
40
42
  "@rollup/plugin-terser": "^0.4.4",
41
43
  "@rollup/plugin-typescript": "^12.1.4",
42
44
  "@types/jest": "^30.0.0",