darkify-js 1.1.4 → 1.1.6
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/README.md +1 -1
- package/dist/darkify.d.ts +16 -7
- package/dist/darkify.esm.js +45 -33
- package/dist/darkify.min.js +2 -2
- package/dist/darkify.umd.js +2 -2
- package/package.json +28 -23
- package/dist/darkify.cjs.js +0 -88
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Darkify JS
|
|
2
|
+
[](https://github.com/emrocode/darkify-js/actions/workflows/tests.yml)
|
|
2
3
|
|
|
3
4
|
🌚 A simple dark mode toggle library that makes it easy to implement dark mode on your website without additional configuration
|
|
4
5
|
|
|
5
|
-
> [!NOTE]
|
|
6
6
|
> Please make sure to read the [Wiki] for detailed documentation and examples
|
|
7
7
|
|
|
8
8
|
### 📦 Installation
|
package/dist/darkify.d.ts
CHANGED
|
@@ -7,23 +7,32 @@ type Options = {
|
|
|
7
7
|
|
|
8
8
|
declare class Darkify {
|
|
9
9
|
private static readonly storageKey;
|
|
10
|
-
options: Options;
|
|
11
|
-
theme:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
cssTag: HTMLStyleElement;
|
|
15
|
-
metaTag: HTMLMetaElement;
|
|
10
|
+
readonly options: Options;
|
|
11
|
+
theme: string;
|
|
12
|
+
_style: HTMLStyleElement;
|
|
13
|
+
_meta: HTMLMetaElement;
|
|
16
14
|
/**
|
|
17
15
|
* @param {string} element Button ID ( recommended ) or HTML element
|
|
18
16
|
* @param {object} options Options
|
|
19
17
|
* @see {@link https://github.com/emrocode/darkify-js/wiki|Documentation}
|
|
20
18
|
*/
|
|
21
19
|
constructor(element: string, options: Options);
|
|
20
|
+
init(element: string): void;
|
|
22
21
|
getOsPreference(options: Options): string;
|
|
23
22
|
createAttribute(): void;
|
|
24
23
|
updateTags(css: string, useColorScheme: string[]): void;
|
|
25
24
|
savePreference(): void;
|
|
26
|
-
|
|
25
|
+
syncThemeBetweenTabs(): void;
|
|
26
|
+
/**
|
|
27
|
+
* Toggles the theme between light and dark modes
|
|
28
|
+
* @returns {void}
|
|
29
|
+
*/
|
|
30
|
+
toggleTheme(): void;
|
|
31
|
+
/**
|
|
32
|
+
* Retrieves the current active theme
|
|
33
|
+
* @returns {string}
|
|
34
|
+
*/
|
|
35
|
+
getCurrentTheme(): string;
|
|
27
36
|
}
|
|
28
37
|
|
|
29
38
|
export { Darkify as default };
|
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.
|
|
4
|
+
* @version 1.1.6
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
7
7
|
const isBrowser = typeof window !== 'undefined';
|
|
@@ -16,68 +16,80 @@ const defaultOptions = {
|
|
|
16
16
|
class Darkify {
|
|
17
17
|
constructor(element, options) {
|
|
18
18
|
this.options = {};
|
|
19
|
-
|
|
19
|
+
this.theme = 'light';
|
|
20
|
+
if (!isBrowser)
|
|
20
21
|
return;
|
|
21
|
-
|
|
22
|
-
options
|
|
23
|
-
options
|
|
24
|
-
options = { ...defaultOptions, ...options };
|
|
22
|
+
(options === null || options === void 0 ? void 0 : options.useLocalStorage) && (options.useSessionStorage = false);
|
|
23
|
+
(options === null || options === void 0 ? void 0 : options.useSessionStorage) && (options.useLocalStorage = false);
|
|
24
|
+
options = Object.assign(Object.assign({}, defaultOptions), options);
|
|
25
25
|
this.options = options;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
this.init(element);
|
|
27
|
+
this.theme = this.getOsPreference(options);
|
|
28
|
+
this._style = document.createElement('style');
|
|
29
|
+
this._meta = document.createElement('meta');
|
|
30
|
+
this.createAttribute();
|
|
31
|
+
this.syncThemeBetweenTabs();
|
|
32
|
+
}
|
|
33
|
+
init(element) {
|
|
31
34
|
window
|
|
32
35
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
33
36
|
.addEventListener('change', ({ matches: isDark }) => {
|
|
34
|
-
this.theme
|
|
37
|
+
this.theme = isDark ? 'dark' : 'light';
|
|
35
38
|
this.savePreference();
|
|
36
39
|
});
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
this.metaTag = document.createElement('meta');
|
|
42
|
-
this.createAttribute();
|
|
40
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
41
|
+
const htmlElement = document.querySelector(element);
|
|
42
|
+
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.addEventListener('click', () => this.toggleTheme());
|
|
43
|
+
});
|
|
43
44
|
}
|
|
44
45
|
getOsPreference(options) {
|
|
45
46
|
const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
|
|
46
47
|
const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
|
|
47
|
-
(useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey))
|
|
48
|
-
return (STO ||
|
|
48
|
+
(useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey)) ||
|
|
49
49
|
(autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
50
50
|
? 'dark'
|
|
51
|
-
: 'light')
|
|
51
|
+
: 'light');
|
|
52
|
+
return STO;
|
|
52
53
|
}
|
|
53
54
|
createAttribute() {
|
|
54
55
|
const dataTheme = document.getElementsByTagName('html')[0];
|
|
55
56
|
const { useColorScheme } = this.options;
|
|
56
|
-
let css = `/**! Darkify / A simple dark mode toggle library
|
|
57
|
-
dataTheme.setAttribute('data-theme', this.theme
|
|
58
|
-
this.updateTags(css, useColorScheme
|
|
57
|
+
let css = `/**! Darkify / A simple dark mode toggle library **/\n:root:is([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;
|
|
58
|
+
dataTheme.setAttribute('data-theme', this.theme);
|
|
59
|
+
this.updateTags(css, useColorScheme !== null && useColorScheme !== void 0 ? useColorScheme : []);
|
|
59
60
|
this.savePreference();
|
|
60
61
|
}
|
|
61
62
|
updateTags(css, useColorScheme) {
|
|
62
63
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
63
|
-
this.
|
|
64
|
-
this.
|
|
65
|
-
this.
|
|
66
|
-
this.
|
|
67
|
-
head.appendChild(this.
|
|
68
|
-
head.appendChild(this.
|
|
64
|
+
this._meta.setAttribute('name', 'theme-color');
|
|
65
|
+
this._meta.setAttribute('content', this.theme === 'light' ? useColorScheme[0] : useColorScheme[1]);
|
|
66
|
+
this._style.setAttribute('type', 'text/css');
|
|
67
|
+
this._style.innerHTML = css;
|
|
68
|
+
head.appendChild(this._meta);
|
|
69
|
+
head.appendChild(this._style);
|
|
69
70
|
}
|
|
70
71
|
savePreference() {
|
|
71
72
|
const { useLocalStorage } = this.options;
|
|
72
73
|
const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
|
|
73
74
|
const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
|
|
74
75
|
OTS.removeItem(Darkify.storageKey);
|
|
75
|
-
STO.setItem(Darkify.storageKey, this.theme
|
|
76
|
+
STO.setItem(Darkify.storageKey, this.theme);
|
|
76
77
|
}
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
syncThemeBetweenTabs() {
|
|
79
|
+
window.addEventListener('storage', e => {
|
|
80
|
+
if (e.key === Darkify.storageKey && e.newValue) {
|
|
81
|
+
this.theme = e.newValue;
|
|
82
|
+
this.createAttribute();
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
toggleTheme() {
|
|
87
|
+
this.theme = this.theme === 'light' ? 'dark' : 'light';
|
|
79
88
|
this.createAttribute();
|
|
80
89
|
}
|
|
90
|
+
getCurrentTheme() {
|
|
91
|
+
return this.theme;
|
|
92
|
+
}
|
|
81
93
|
}
|
|
82
94
|
Darkify.storageKey = 'theme';
|
|
83
95
|
|
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.6
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
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,
|
|
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.6
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
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,
|
|
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,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "darkify-js",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.6",
|
|
4
4
|
"description": "A simple dark mode toggle library",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "dist/darkify.
|
|
6
|
+
"main": "dist/darkify.umd.js",
|
|
7
7
|
"module": "dist/darkify.esm.js",
|
|
8
|
+
"browser": "dist/darkify.min.js",
|
|
8
9
|
"types": "dist/darkify.d.ts",
|
|
9
10
|
"files": [
|
|
10
11
|
"dist/darkify.d.ts",
|
|
11
|
-
"dist/darkify.cjs.js",
|
|
12
12
|
"dist/darkify.esm.js",
|
|
13
13
|
"dist/darkify.umd.js",
|
|
14
14
|
"dist/darkify.min.js"
|
|
@@ -16,34 +16,39 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"_cls": "rm -rf dist",
|
|
18
18
|
"_bundle": "rollup -c rollup.config.ts --configPlugin typescript",
|
|
19
|
-
"
|
|
20
|
-
"
|
|
19
|
+
"build": "npm run _cls && npm run _bundle",
|
|
20
|
+
"format": "prettier --write src/",
|
|
21
|
+
"test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest"
|
|
21
22
|
},
|
|
22
|
-
"keywords": [
|
|
23
|
-
"color-scheme",
|
|
24
|
-
"toggle",
|
|
25
|
-
"dark-mode",
|
|
26
|
-
"dark-theme"
|
|
27
|
-
],
|
|
28
|
-
"author": "Emilio Romero <emrocode@gmail.com>",
|
|
29
23
|
"repository": {
|
|
30
24
|
"type": "git",
|
|
31
25
|
"url": "git+https://github.com/emrocode/darkify-js"
|
|
32
26
|
},
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
27
|
+
"keywords": [
|
|
28
|
+
"dark mode",
|
|
29
|
+
"light mode",
|
|
30
|
+
"theme toggle",
|
|
31
|
+
"dark theme",
|
|
32
|
+
"color scheme",
|
|
33
|
+
"theme switcher",
|
|
34
|
+
"night mode",
|
|
35
|
+
"automatic theme"
|
|
36
|
+
],
|
|
37
|
+
"author": "Emilio Romero <emrocode@gmail.com>",
|
|
37
38
|
"license": "MIT",
|
|
38
39
|
"devDependencies": {
|
|
39
|
-
"@rollup/plugin-commonjs": "^25.0.8",
|
|
40
40
|
"@rollup/plugin-terser": "^0.4.4",
|
|
41
|
-
"@rollup/plugin-typescript": "^
|
|
42
|
-
"
|
|
43
|
-
"
|
|
41
|
+
"@rollup/plugin-typescript": "^12.1.4",
|
|
42
|
+
"@types/jest": "^30.0.0",
|
|
43
|
+
"jest": "^30.1.3",
|
|
44
|
+
"jest-environment-jsdom": "^30.1.2",
|
|
45
|
+
"prettier": "^3.6.2",
|
|
46
|
+
"rollup": "^4.50.0",
|
|
44
47
|
"rollup-plugin-cleanup": "^3.2.1",
|
|
45
|
-
"rollup-plugin-dts": "^6.
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
+
"rollup-plugin-dts": "^6.2.3",
|
|
49
|
+
"ts-jest": "^29.4.1",
|
|
50
|
+
"ts-node": "^10.9.2",
|
|
51
|
+
"tslib": "^2.8.1",
|
|
52
|
+
"typescript": "^5.9.2"
|
|
48
53
|
}
|
|
49
54
|
}
|
package/dist/darkify.cjs.js
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*
|
|
3
|
-
* @author Emilio Romero <emrocode@gmail.com>
|
|
4
|
-
* @version 1.1.4
|
|
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
|
-
if (!isBrowser) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
options?.useLocalStorage && (options.useSessionStorage = false);
|
|
27
|
-
options?.useSessionStorage && (options.useLocalStorage = false);
|
|
28
|
-
options = { ...defaultOptions, ...options };
|
|
29
|
-
this.options = options;
|
|
30
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
31
|
-
this.createAttribute();
|
|
32
|
-
const htmlElement = document.querySelector(element);
|
|
33
|
-
htmlElement?.addEventListener('click', () => this.onClick());
|
|
34
|
-
});
|
|
35
|
-
window
|
|
36
|
-
.matchMedia('(prefers-color-scheme: dark)')
|
|
37
|
-
.addEventListener('change', ({ matches: isDark }) => {
|
|
38
|
-
this.theme.value = isDark ? 'dark' : 'light';
|
|
39
|
-
this.savePreference();
|
|
40
|
-
});
|
|
41
|
-
this.theme = {
|
|
42
|
-
value: this.getOsPreference(options) ?? 'light',
|
|
43
|
-
};
|
|
44
|
-
this.cssTag = document.createElement('style');
|
|
45
|
-
this.metaTag = document.createElement('meta');
|
|
46
|
-
this.createAttribute();
|
|
47
|
-
}
|
|
48
|
-
getOsPreference(options) {
|
|
49
|
-
const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
|
|
50
|
-
const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
|
|
51
|
-
(useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey));
|
|
52
|
-
return (STO ||
|
|
53
|
-
(autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
54
|
-
? 'dark'
|
|
55
|
-
: 'light'));
|
|
56
|
-
}
|
|
57
|
-
createAttribute() {
|
|
58
|
-
const dataTheme = document.getElementsByTagName('html')[0];
|
|
59
|
-
const { useColorScheme } = this.options;
|
|
60
|
-
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}}`;
|
|
61
|
-
dataTheme.setAttribute('data-theme', this.theme.value);
|
|
62
|
-
this.updateTags(css, useColorScheme || []);
|
|
63
|
-
this.savePreference();
|
|
64
|
-
}
|
|
65
|
-
updateTags(css, useColorScheme) {
|
|
66
|
-
const head = document.head || document.getElementsByTagName('head')[0];
|
|
67
|
-
this.metaTag.setAttribute('name', 'theme-color');
|
|
68
|
-
this.metaTag.setAttribute('content', this.theme.value === 'light' ? useColorScheme[0] : useColorScheme[1]);
|
|
69
|
-
this.cssTag.setAttribute('type', 'text/css');
|
|
70
|
-
this.cssTag.innerHTML = css;
|
|
71
|
-
head.appendChild(this.metaTag);
|
|
72
|
-
head.appendChild(this.cssTag);
|
|
73
|
-
}
|
|
74
|
-
savePreference() {
|
|
75
|
-
const { useLocalStorage } = this.options;
|
|
76
|
-
const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
|
|
77
|
-
const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
|
|
78
|
-
OTS.removeItem(Darkify.storageKey);
|
|
79
|
-
STO.setItem(Darkify.storageKey, this.theme.value);
|
|
80
|
-
}
|
|
81
|
-
onClick() {
|
|
82
|
-
this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
|
|
83
|
-
this.createAttribute();
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
Darkify.storageKey = 'theme';
|
|
87
|
-
|
|
88
|
-
exports.default = Darkify;
|