darkify-js 1.1.8 → 1.1.10
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.
- package/dist/darkify.cjs.js +98 -0
- package/dist/darkify.esm.js +1 -1
- package/dist/darkify.min.js +1 -1
- package/dist/darkify.umd.js +1 -1
- package/package.json +4 -2
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* @author Emilio Romero <emrocode@gmail.com>
|
|
4
|
+
* @version 1.1.10
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
'use strict';
|
|
8
|
+
|
|
9
|
+
const isBrowser = typeof window !== 'undefined';
|
|
10
|
+
|
|
11
|
+
const defaultOptions = {
|
|
12
|
+
autoMatchTheme: true,
|
|
13
|
+
useLocalStorage: true,
|
|
14
|
+
useSessionStorage: false,
|
|
15
|
+
useColorScheme: ['#ffffff', '#000000'],
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
class Darkify {
|
|
19
|
+
constructor(element, options) {
|
|
20
|
+
this.options = {};
|
|
21
|
+
this.theme = 'light';
|
|
22
|
+
if (!isBrowser)
|
|
23
|
+
return;
|
|
24
|
+
(options === null || options === void 0 ? void 0 : options.useLocalStorage) && (options.useSessionStorage = false);
|
|
25
|
+
(options === null || options === void 0 ? void 0 : options.useSessionStorage) && (options.useLocalStorage = false);
|
|
26
|
+
options = Object.assign(Object.assign({}, defaultOptions), options);
|
|
27
|
+
this.options = options;
|
|
28
|
+
this.init(element);
|
|
29
|
+
this.theme = this.getOsPreference(options);
|
|
30
|
+
this._style = document.createElement('style');
|
|
31
|
+
this._meta = document.createElement('meta');
|
|
32
|
+
this.createAttribute();
|
|
33
|
+
this.syncThemeBetweenTabs();
|
|
34
|
+
}
|
|
35
|
+
init(element) {
|
|
36
|
+
window
|
|
37
|
+
.matchMedia('(prefers-color-scheme: dark)')
|
|
38
|
+
.addEventListener('change', ({ matches: isDark }) => {
|
|
39
|
+
this.theme = isDark ? 'dark' : 'light';
|
|
40
|
+
this.savePreference();
|
|
41
|
+
});
|
|
42
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
43
|
+
const htmlElement = document.querySelector(element);
|
|
44
|
+
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.addEventListener('click', () => this.toggleTheme());
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
getOsPreference(options) {
|
|
48
|
+
const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
|
|
49
|
+
const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
|
|
50
|
+
(useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey)) ||
|
|
51
|
+
(autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
52
|
+
? 'dark'
|
|
53
|
+
: 'light');
|
|
54
|
+
return STO;
|
|
55
|
+
}
|
|
56
|
+
createAttribute() {
|
|
57
|
+
const dataTheme = document.getElementsByTagName('html')[0];
|
|
58
|
+
const { useColorScheme } = this.options;
|
|
59
|
+
let css = `/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;
|
|
60
|
+
dataTheme.setAttribute('data-theme', this.theme);
|
|
61
|
+
this.updateTags(css, useColorScheme !== null && useColorScheme !== void 0 ? useColorScheme : []);
|
|
62
|
+
this.savePreference();
|
|
63
|
+
}
|
|
64
|
+
updateTags(css, useColorScheme) {
|
|
65
|
+
const head = document.head || document.getElementsByTagName('head')[0];
|
|
66
|
+
this._meta.setAttribute('name', 'theme-color');
|
|
67
|
+
this._meta.setAttribute('content', this.theme === 'light' ? useColorScheme[0] : useColorScheme[1]);
|
|
68
|
+
this._style.setAttribute('type', 'text/css');
|
|
69
|
+
this._style.innerHTML = css;
|
|
70
|
+
head.appendChild(this._meta);
|
|
71
|
+
head.appendChild(this._style);
|
|
72
|
+
}
|
|
73
|
+
savePreference() {
|
|
74
|
+
const { useLocalStorage } = this.options;
|
|
75
|
+
const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
|
|
76
|
+
const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
|
|
77
|
+
OTS.removeItem(Darkify.storageKey);
|
|
78
|
+
STO.setItem(Darkify.storageKey, this.theme);
|
|
79
|
+
}
|
|
80
|
+
syncThemeBetweenTabs() {
|
|
81
|
+
window.addEventListener('storage', e => {
|
|
82
|
+
if (e.key === Darkify.storageKey && e.newValue) {
|
|
83
|
+
this.theme = e.newValue;
|
|
84
|
+
this.createAttribute();
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
toggleTheme() {
|
|
89
|
+
this.theme = this.theme === 'light' ? 'dark' : 'light';
|
|
90
|
+
this.createAttribute();
|
|
91
|
+
}
|
|
92
|
+
getCurrentTheme() {
|
|
93
|
+
return this.theme;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
Darkify.storageKey = 'theme';
|
|
97
|
+
|
|
98
|
+
module.exports = Darkify;
|
package/dist/darkify.esm.js
CHANGED
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.
|
|
4
|
+
* @version 1.1.10
|
|
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.
|
|
4
|
+
* @version 1.1.10
|
|
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.
|
|
3
|
+
"version": "1.1.10",
|
|
4
4
|
"description": "A simple dark mode toggle library",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "dist/darkify.
|
|
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",
|