darkify-js 1.1.2 → 1.1.3

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 (7) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +1 -0
  3. package/dist/darkify.cjs.js +91 -0
  4. package/dist/darkify.esm.js +87 -0
  5. package/dist/darkify.min.js +2 -2
  6. package/dist/{darkify.js → darkify.umd.js} +2 -2
  7. package/package.json +14 -11
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2022 Emilio Romero
3
+ Copyright (c) 2022-present Emilio Romero
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -15,6 +15,7 @@ const options = {
15
15
  // autoMatchTheme: default is true
16
16
  // useLocalStorage: default is true
17
17
  // useSessionStorage: default is false
18
+ // useColorScheme: default is ['#ffffff', '#000000']
18
19
 
19
20
  var darkMode = new Darkify('#element', options)
20
21
  ```
package/dist/darkify.cjs.js ADDED
@@ -0,0 +1,91 @@
1
+ /**
2
+ *
3
+ * @author Emilio Romero <emrocode@gmail.com>
4
+ * @version 1.1.3
5
+ * @license MIT
6
+ */
7
+ 'use strict';
8
+
9
+ Object.defineProperty(exports, '__esModule', { value: true });
10
+
11
+ const isBrowser = typeof window !== 'undefined';
12
+ class Darkify {
13
+ constructor(element, options) {
14
+ this.options = {};
15
+ if (!isBrowser) {
16
+ return;
17
+ }
18
+ if (options?.useLocalStorage) {
19
+ options.useSessionStorage = false;
20
+ }
21
+ else if (options?.useSessionStorage) {
22
+ options.useLocalStorage = false;
23
+ }
24
+ const defaultOptions = {
25
+ autoMatchTheme: true,
26
+ useLocalStorage: true,
27
+ useSessionStorage: false,
28
+ useColorScheme: ['#ffffff', '#000000'],
29
+ };
30
+ options = { ...defaultOptions, ...options };
31
+ this.options = options;
32
+ document.addEventListener('DOMContentLoaded', () => {
33
+ this.createAttribute();
34
+ const htmlElement = document.querySelector(element);
35
+ htmlElement?.addEventListener('click', () => this.onClick());
36
+ });
37
+ window
38
+ .matchMedia('(prefers-color-scheme: dark)')
39
+ .addEventListener('change', ({ matches: isDark }) => {
40
+ this.theme.value = isDark ? 'dark' : 'light';
41
+ this.savePreference();
42
+ return window.location.reload();
43
+ });
44
+ this.theme = {
45
+ value: this.getOsPreference(options) ?? 'light',
46
+ };
47
+ this.cssTag = document.createElement('style');
48
+ this.metaTag = document.createElement('meta');
49
+ this.createAttribute();
50
+ }
51
+ getOsPreference(options) {
52
+ const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
53
+ const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
54
+ (useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey));
55
+ return (STO ||
56
+ (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
57
+ ? 'dark'
58
+ : 'light'));
59
+ }
60
+ createAttribute() {
61
+ const dataTheme = document.getElementsByTagName('html')[0];
62
+ const { useColorScheme } = this.options;
63
+ 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}}`;
64
+ dataTheme.setAttribute('data-theme', this.theme.value);
65
+ this.updateTags(css, useColorScheme || []);
66
+ this.savePreference();
67
+ }
68
+ updateTags(css, useColorScheme) {
69
+ const head = document.head;
70
+ this.metaTag.setAttribute('name', 'theme-color');
71
+ this.metaTag.setAttribute('content', this.theme.value === 'light' ? useColorScheme[0] : useColorScheme[1]);
72
+ this.cssTag.setAttribute('type', 'text/css');
73
+ this.cssTag.innerHTML = css;
74
+ head.appendChild(this.metaTag);
75
+ head.appendChild(this.cssTag);
76
+ }
77
+ savePreference() {
78
+ const { useLocalStorage } = this.options;
79
+ const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
80
+ const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
81
+ OTS.removeItem(Darkify.storageKey);
82
+ STO.setItem(Darkify.storageKey, this.theme.value);
83
+ }
84
+ onClick() {
85
+ this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
86
+ this.createAttribute();
87
+ }
88
+ }
89
+ Darkify.storageKey = 'darkify-theme';
90
+
91
+ exports.default = Darkify;
package/dist/darkify.esm.js ADDED
@@ -0,0 +1,87 @@
1
+ /**
2
+ *
3
+ * @author Emilio Romero <emrocode@gmail.com>
4
+ * @version 1.1.3
5
+ * @license MIT
6
+ */
7
+ const isBrowser = typeof window !== 'undefined';
8
+ class Darkify {
9
+ constructor(element, options) {
10
+ this.options = {};
11
+ if (!isBrowser) {
12
+ return;
13
+ }
14
+ if (options?.useLocalStorage) {
15
+ options.useSessionStorage = false;
16
+ }
17
+ else if (options?.useSessionStorage) {
18
+ options.useLocalStorage = false;
19
+ }
20
+ const defaultOptions = {
21
+ autoMatchTheme: true,
22
+ useLocalStorage: true,
23
+ useSessionStorage: false,
24
+ useColorScheme: ['#ffffff', '#000000'],
25
+ };
26
+ options = { ...defaultOptions, ...options };
27
+ this.options = options;
28
+ document.addEventListener('DOMContentLoaded', () => {
29
+ this.createAttribute();
30
+ const htmlElement = document.querySelector(element);
31
+ htmlElement?.addEventListener('click', () => this.onClick());
32
+ });
33
+ window
34
+ .matchMedia('(prefers-color-scheme: dark)')
35
+ .addEventListener('change', ({ matches: isDark }) => {
36
+ this.theme.value = isDark ? 'dark' : 'light';
37
+ this.savePreference();
38
+ return window.location.reload();
39
+ });
40
+ this.theme = {
41
+ value: this.getOsPreference(options) ?? 'light',
42
+ };
43
+ this.cssTag = document.createElement('style');
44
+ this.metaTag = document.createElement('meta');
45
+ this.createAttribute();
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
+ return (STO ||
52
+ (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
53
+ ? 'dark'
54
+ : 'light'));
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 **/:root:is([data-theme="${this.theme.value}"]), [data-theme="${this.theme.value}"] {color-scheme: ${this.theme.value}}`;
60
+ dataTheme.setAttribute('data-theme', this.theme.value);
61
+ this.updateTags(css, useColorScheme || []);
62
+ this.savePreference();
63
+ }
64
+ updateTags(css, useColorScheme) {
65
+ const head = document.head;
66
+ this.metaTag.setAttribute('name', 'theme-color');
67
+ this.metaTag.setAttribute('content', this.theme.value === 'light' ? useColorScheme[0] : useColorScheme[1]);
68
+ this.cssTag.setAttribute('type', 'text/css');
69
+ this.cssTag.innerHTML = css;
70
+ head.appendChild(this.metaTag);
71
+ head.appendChild(this.cssTag);
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.value);
79
+ }
80
+ onClick() {
81
+ this.theme.value = this.theme.value === 'light' ? 'dark' : 'light';
82
+ this.createAttribute();
83
+ }
84
+ }
85
+ Darkify.storageKey = 'darkify-theme';
86
+
87
+ export { Darkify as default };
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.2
4
+ * @version 1.1.3
5
5
  * @license MIT
6
6
  */
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}();
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 / A simple dark mode toggle library **/: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/dist/{darkify.js → darkify.umd.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  *
3
3
  * @author Emilio Romero <emrocode@gmail.com>
4
- * @version 1.1.2
4
+ * @version 1.1.3
5
5
  * @license MIT
6
6
  */
7
7
  (function (global, factory) {
@@ -62,7 +62,7 @@
62
62
  createAttribute() {
63
63
  const dataTheme = document.getElementsByTagName('html')[0];
64
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}}`;
65
+ 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}}`;
66
66
  dataTheme.setAttribute('data-theme', this.theme.value);
67
67
  this.updateTags(css, useColorScheme || []);
68
68
  this.savePreference();
package/package.json CHANGED
@@ -1,15 +1,17 @@
1
1
  {
2
2
  "name": "darkify-js",
3
- "version": "1.1.2",
4
- "description": "Create an easy dark mode for your site",
3
+ "version": "1.1.3",
4
+ "description": "A simple dark mode toggle library",
5
5
  "type": "module",
6
- "main": "dist/darkify.js",
6
+ "main": "dist/darkify.cjs.js",
7
+ "module": "dist/darkify.esm.js",
7
8
  "types": "dist/darkify.d.ts",
8
9
  "files": [
9
10
  "dist/darkify.d.ts",
10
- "dist/darkify.js",
11
- "dist/darkify.min.js",
12
- "dist/darkify.min.js.map"
11
+ "dist/darkify.cjs.js",
12
+ "dist/darkify.esm.js",
13
+ "dist/darkify.umd.js",
14
+ "dist/darkify.min.js"
13
15
  ],
14
16
  "scripts": {
15
17
  "_cls": "rm -rf dist",
@@ -34,13 +36,14 @@
34
36
  },
35
37
  "license": "MIT",
36
38
  "devDependencies": {
39
+ "@rollup/plugin-commonjs": "^25.0.8",
37
40
  "@rollup/plugin-terser": "^0.4.4",
38
41
  "@rollup/plugin-typescript": "^11.1.6",
39
- "prettier": "^3.2.4",
40
- "rollup": "^4.9.6",
42
+ "prettier": "^3.2.5",
43
+ "rollup": "^4.18.0",
41
44
  "rollup-plugin-cleanup": "^3.2.1",
42
- "rollup-plugin-dts": "^6.1.0",
43
- "tslib": "^2.4.1",
44
- "typescript": "^5.3.3"
45
+ "rollup-plugin-dts": "^6.1.1",
46
+ "tslib": "^2.6.2",
47
+ "typescript": "^5.4.5"
45
48
  }
46
49
  }