darkify-js 1.1.1 → 1.1.2
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.d.ts +19 -21
- package/dist/darkify.js +79 -100
- package/dist/darkify.min.js +2 -2
- package/package.json +9 -8
package/dist/darkify.d.ts
CHANGED
|
@@ -1,28 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
type Options = {
|
|
2
2
|
autoMatchTheme?: boolean;
|
|
3
3
|
useLocalStorage?: boolean;
|
|
4
4
|
useSessionStorage?: boolean;
|
|
5
|
-
useColorScheme
|
|
6
|
-
}
|
|
5
|
+
useColorScheme?: string[];
|
|
6
|
+
};
|
|
7
7
|
|
|
8
|
-
declare class Darkify {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
savePreference(): void;
|
|
25
|
-
onClick(): void;
|
|
8
|
+
declare class Darkify {
|
|
9
|
+
private static readonly storageKey;
|
|
10
|
+
private options;
|
|
11
|
+
private theme;
|
|
12
|
+
private cssTag;
|
|
13
|
+
private metaTag;
|
|
14
|
+
/**
|
|
15
|
+
* @param {string} element Button ID ( recommended ) or HTML element
|
|
16
|
+
* @param {object} options Options
|
|
17
|
+
*/
|
|
18
|
+
constructor(element: string, options: Options);
|
|
19
|
+
getOsPreference(options: Options): string;
|
|
20
|
+
createAttribute(): void;
|
|
21
|
+
updateTags(css: string, useColorScheme: string[]): void;
|
|
22
|
+
savePreference(): void;
|
|
23
|
+
onClick(): void;
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
export { Darkify as default };
|
package/dist/darkify.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.2
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
7
7
|
(function (global, factory) {
|
|
@@ -10,105 +10,84 @@
|
|
|
10
10
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Darkify = factory());
|
|
11
11
|
})(this, (function () { 'use strict';
|
|
12
12
|
|
|
13
|
-
const isBrowser = typeof window !== 'undefined';
|
|
14
|
-
class Darkify {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
if (
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
this.
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
// update style tag
|
|
92
|
-
this.cssTag.setAttribute('type', 'text/css');
|
|
93
|
-
this.cssTag.innerHTML = css;
|
|
94
|
-
head.appendChild(this.metaTag);
|
|
95
|
-
head.appendChild(this.cssTag);
|
|
96
|
-
}
|
|
97
|
-
// save to local or session storage
|
|
98
|
-
savePreference() {
|
|
99
|
-
const { useLocalStorage } = this.options;
|
|
100
|
-
const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
|
|
101
|
-
const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
|
|
102
|
-
// remove unused storage
|
|
103
|
-
OTS.removeItem(Darkify.storageKey);
|
|
104
|
-
// set storage value
|
|
105
|
-
STO.setItem(Darkify.storageKey, this.theme.value);
|
|
106
|
-
}
|
|
107
|
-
onClick() {
|
|
108
|
-
this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
|
|
109
|
-
this.createAttribute();
|
|
110
|
-
}
|
|
111
|
-
}
|
|
13
|
+
const isBrowser = typeof window !== 'undefined';
|
|
14
|
+
class Darkify {
|
|
15
|
+
constructor(element, options) {
|
|
16
|
+
this.options = {};
|
|
17
|
+
if (!isBrowser) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (options?.useLocalStorage) {
|
|
21
|
+
options.useSessionStorage = false;
|
|
22
|
+
}
|
|
23
|
+
else if (options?.useSessionStorage) {
|
|
24
|
+
options.useLocalStorage = false;
|
|
25
|
+
}
|
|
26
|
+
const defaultOptions = {
|
|
27
|
+
autoMatchTheme: true,
|
|
28
|
+
useLocalStorage: true,
|
|
29
|
+
useSessionStorage: false,
|
|
30
|
+
useColorScheme: ['#ffffff', '#000000'],
|
|
31
|
+
};
|
|
32
|
+
options = { ...defaultOptions, ...options };
|
|
33
|
+
this.options = options;
|
|
34
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
35
|
+
this.createAttribute();
|
|
36
|
+
const htmlElement = document.querySelector(element);
|
|
37
|
+
htmlElement?.addEventListener('click', () => this.onClick());
|
|
38
|
+
});
|
|
39
|
+
window
|
|
40
|
+
.matchMedia('(prefers-color-scheme: dark)')
|
|
41
|
+
.addEventListener('change', ({ matches: isDark }) => {
|
|
42
|
+
this.theme.value = isDark ? 'dark' : 'light';
|
|
43
|
+
this.savePreference();
|
|
44
|
+
return window.location.reload();
|
|
45
|
+
});
|
|
46
|
+
this.theme = {
|
|
47
|
+
value: this.getOsPreference(options) ?? 'light',
|
|
48
|
+
};
|
|
49
|
+
this.cssTag = document.createElement('style');
|
|
50
|
+
this.metaTag = document.createElement('meta');
|
|
51
|
+
this.createAttribute();
|
|
52
|
+
}
|
|
53
|
+
getOsPreference(options) {
|
|
54
|
+
const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
|
|
55
|
+
const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
|
|
56
|
+
(useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey));
|
|
57
|
+
return (STO ||
|
|
58
|
+
(autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
59
|
+
? 'dark'
|
|
60
|
+
: 'light'));
|
|
61
|
+
}
|
|
62
|
+
createAttribute() {
|
|
63
|
+
const dataTheme = document.getElementsByTagName('html')[0];
|
|
64
|
+
const { useColorScheme } = this.options;
|
|
65
|
+
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}}`;
|
|
66
|
+
dataTheme.setAttribute('data-theme', this.theme.value);
|
|
67
|
+
this.updateTags(css, useColorScheme || []);
|
|
68
|
+
this.savePreference();
|
|
69
|
+
}
|
|
70
|
+
updateTags(css, useColorScheme) {
|
|
71
|
+
const head = document.head;
|
|
72
|
+
this.metaTag.setAttribute('name', 'theme-color');
|
|
73
|
+
this.metaTag.setAttribute('content', this.theme.value === 'light' ? useColorScheme[0] : useColorScheme[1]);
|
|
74
|
+
this.cssTag.setAttribute('type', 'text/css');
|
|
75
|
+
this.cssTag.innerHTML = css;
|
|
76
|
+
head.appendChild(this.metaTag);
|
|
77
|
+
head.appendChild(this.cssTag);
|
|
78
|
+
}
|
|
79
|
+
savePreference() {
|
|
80
|
+
const { useLocalStorage } = this.options;
|
|
81
|
+
const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
|
|
82
|
+
const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
|
|
83
|
+
OTS.removeItem(Darkify.storageKey);
|
|
84
|
+
STO.setItem(Darkify.storageKey, this.theme.value);
|
|
85
|
+
}
|
|
86
|
+
onClick() {
|
|
87
|
+
this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
|
|
88
|
+
this.createAttribute();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
112
91
|
Darkify.storageKey = 'darkify-theme';
|
|
113
92
|
|
|
114
93
|
return Darkify;
|
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.2
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
7
|
-
var Darkify=function(){"use strict";const e="undefined"!=typeof window;class t{constructor(t,s){if(
|
|
7
|
+
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}();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "darkify-js",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Create an easy dark mode for your site",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/darkify.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"scripts": {
|
|
15
15
|
"_cls": "rm -rf dist",
|
|
16
16
|
"_bundle": "rollup -c rollup.config.ts --configPlugin typescript",
|
|
17
|
-
"prettier": "prettier --write src
|
|
17
|
+
"prettier": "prettier --write src/",
|
|
18
18
|
"build": "npm run _cls && npm run _bundle"
|
|
19
19
|
},
|
|
20
20
|
"keywords": [
|
|
@@ -34,12 +34,13 @@
|
|
|
34
34
|
},
|
|
35
35
|
"license": "MIT",
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@rollup/plugin-terser": "^0.
|
|
38
|
-
"@rollup/plugin-typescript": "^
|
|
39
|
-
"prettier": "^2.
|
|
40
|
-
"rollup": "^
|
|
41
|
-
"rollup-plugin-
|
|
37
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
38
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
39
|
+
"prettier": "^3.2.4",
|
|
40
|
+
"rollup": "^4.9.6",
|
|
41
|
+
"rollup-plugin-cleanup": "^3.2.1",
|
|
42
|
+
"rollup-plugin-dts": "^6.1.0",
|
|
42
43
|
"tslib": "^2.4.1",
|
|
43
|
-
"typescript": "^
|
|
44
|
+
"typescript": "^5.3.3"
|
|
44
45
|
}
|
|
45
46
|
}
|