darkify-js 1.1.0 → 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.
Files changed (4) hide show
  1. package/dist/darkify.d.ts +19 -20
  2. package/dist/darkify.js +79 -90
  3. package/dist/darkify.min.js +2 -2
  4. package/package.json +9 -8
package/dist/darkify.d.ts CHANGED
@@ -1,27 +1,26 @@
1
- interface options {
1
+ type Options = {
2
2
  autoMatchTheme?: boolean;
3
3
  useLocalStorage?: boolean;
4
4
  useSessionStorage?: boolean;
5
- useColors: string;
6
- }
5
+ useColorScheme?: string[];
6
+ };
7
7
 
8
- declare class Darkify {
9
- options: options;
10
- theme: {
11
- value: string;
12
- };
13
- cssTag: HTMLStyleElement;
14
- metaTag: HTMLMetaElement;
15
- private static readonly storageKey;
16
- /**
17
- * @param {string} element Button ID ( recommended ) or HTML element
18
- * @param {object} options Options
19
- */
20
- constructor(element: string, options: options);
21
- getOsPreference(options: options): string | null;
22
- createAttribute(): void;
23
- savePreference(): void;
24
- 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;
25
24
  }
26
25
 
27
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.0
4
+ * @version 1.1.2
5
5
  * @license MIT
6
6
  */
7
7
  (function (global, factory) {
@@ -10,95 +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
- * @param {string} element Button ID ( recommended ) or HTML element
17
- * @param {object} options Options
18
- */
19
- constructor(element, options) {
20
- if (!isBrowser) {
21
- return;
22
- }
23
- // avoid using both values
24
- if (options.useLocalStorage && options.useSessionStorage) {
25
- console.warn('Both storage options are enabled. Disabling useSessionStorage...');
26
- options.useSessionStorage = false;
27
- }
28
- else if (!options.useLocalStorage && !options.useSessionStorage) {
29
- console.warn('Both storage options are disabled. Enabling useLocalStorage...');
30
- options.useLocalStorage = true;
31
- }
32
- else if (options.useSessionStorage) {
33
- options.useLocalStorage = false;
34
- }
35
- const defaultOptions = {
36
- autoMatchTheme: true,
37
- useLocalStorage: true,
38
- useSessionStorage: false,
39
- useColors: ['#ffffff', '#000000'],
40
- };
41
- this.options = Object.assign({}, defaultOptions, options);
42
- document.addEventListener('DOMContentLoaded', () => {
43
- this.createAttribute();
44
- const htmlElement = document.querySelector(element);
45
- htmlElement?.addEventListener('click', () => this.onClick());
46
- });
47
- // sync with system changes
48
- window
49
- .matchMedia('(prefers-color-scheme: dark)')
50
- .addEventListener('change', ({ matches: isDark }) => {
51
- this.theme.value = isDark ? 'dark' : 'light';
52
- this.savePreference();
53
- return window.location.reload();
54
- });
55
- this.theme = {
56
- value: this.getOsPreference(options) ?? 'light',
57
- };
58
- this.cssTag = document.createElement('style');
59
- this.metaTag = document.createElement('meta');
60
- this.createAttribute();
61
- }
62
- // get os color preference
63
- getOsPreference(options) {
64
- if (options.useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) {
65
- return window.localStorage.getItem(Darkify.storageKey);
66
- }
67
- else if (options.useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey)) {
68
- return window.sessionStorage.getItem(Darkify.storageKey);
69
- }
70
- else {
71
- return options.autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
72
- ? 'dark'
73
- : 'light';
74
- }
75
- }
76
- createAttribute() {
77
- let dataTheme = document.getElementsByTagName('html')[0];
78
- 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}}`;
79
- let head = document.head;
80
- // set theme-color meta tag
81
- this.metaTag.setAttribute('name', 'theme-color');
82
- this.metaTag.setAttribute('content', this.theme.value === 'light' ? this.options.useColors[0] : this.options.useColors[1]);
83
- this.cssTag.setAttribute('type', 'text/css');
84
- this.cssTag.innerHTML = css;
85
- dataTheme.setAttribute('data-theme', this.theme.value);
86
- head.appendChild(this.metaTag);
87
- head.appendChild(this.cssTag);
88
- this.savePreference();
89
- }
90
- // save to local or session storage
91
- savePreference() {
92
- const STO = this.options.useLocalStorage ? window.localStorage : window.sessionStorage;
93
- const OTS = this.options.useLocalStorage ? window.sessionStorage : window.localStorage;
94
- OTS.removeItem(Darkify.storageKey);
95
- STO.setItem(Darkify.storageKey, this.theme.value);
96
- }
97
- onClick() {
98
- this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
99
- this.createAttribute();
100
- }
101
- }
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
+ }
102
91
  Darkify.storageKey = 'darkify-theme';
103
92
 
104
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.0
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(!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}();
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.0",
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.1.0",
38
- "@rollup/plugin-typescript": "^9.0.2",
39
- "prettier": "^2.8.0",
40
- "rollup": "^3.4.0",
41
- "rollup-plugin-dts": "^5.0.0",
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": "^4.9.3"
44
+ "typescript": "^5.3.3"
44
45
  }
45
46
  }