@tsparticles/plugin-themes 4.0.0-alpha.5 → 4.0.0-beta.0
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/306.min.js +1 -0
- package/366.min.js +1 -0
- package/browser/Options/Classes/Theme.js +3 -0
- package/browser/Options/Classes/ThemeDefault.js +3 -0
- package/browser/ThemesPlugin.js +1 -3
- package/browser/ThemesPluginInstance.js +10 -9
- package/browser/index.js +1 -1
- package/cjs/Options/Classes/Theme.js +3 -0
- package/cjs/Options/Classes/ThemeDefault.js +3 -0
- package/cjs/ThemesPlugin.js +1 -3
- package/cjs/ThemesPluginInstance.js +10 -9
- package/cjs/index.js +1 -1
- package/dist_browser_ThemesPluginInstance_js.js +2 -2
- package/dist_browser_ThemesPlugin_js.js +5 -5
- package/esm/Options/Classes/Theme.js +3 -0
- package/esm/Options/Classes/ThemeDefault.js +3 -0
- package/esm/ThemesPlugin.js +1 -3
- package/esm/ThemesPluginInstance.js +10 -9
- package/esm/index.js +1 -1
- package/package.json +2 -2
- package/report.html +3 -3
- package/tsparticles.plugin.themes.js +31 -19
- package/tsparticles.plugin.themes.min.js +2 -2
- package/types/ThemesPlugin.d.ts +1 -2
- package/umd/Options/Classes/Theme.js +3 -0
- package/umd/Options/Classes/ThemeDefault.js +3 -0
- package/umd/ThemesPlugin.js +1 -3
- package/umd/ThemesPluginInstance.js +10 -9
- package/umd/index.js +1 -1
- package/52.min.js +0 -2
- package/52.min.js.LICENSE.txt +0 -1
- package/995.min.js +0 -2
- package/995.min.js.LICENSE.txt +0 -1
- package/tsparticles.plugin.themes.min.js.LICENSE.txt +0 -1
package/306.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(this.webpackChunk_tsparticles_plugin_themes=this.webpackChunk_tsparticles_plugin_themes||[]).push([[306],{306(e,t,a){a.d(t,{ThemesPluginInstance:()=>n});var h=a(303);class n{_container;constructor(e){this._container=e}init(){let e=this._container;e.themeMatchMedia=(0,h.safeMatchMedia)("(prefers-color-scheme: dark)");let t=async t=>{e.destroyed||(e.currentTheme=t,await e.refresh())};return e.themeHandlers={themeChange:e=>{this._handleThemeChange(e)},oldThemeChange:e=>{this._handleThemeChange(e)}},e.manageMediaMatch=t=>{let a=e.themeHandlers;!a||e.themeMatchMedia&&(0,h.manageListener)(e.themeMatchMedia,"change",a.themeChange,t)},e.loadTheme=t,Promise.resolve()}manageListeners(e){let t=this._container;t.manageMediaMatch?.(e)}async start(){return this.manageListeners(!0),Promise.resolve()}stop(){this.manageListeners(!1)}updateActualOptions(){let e=this._container;return e.actualOptions.setTheme?.(e.currentTheme),!1}_handleThemeChange=e=>{let t=this._container,a=t.options,h=a.defaultThemes,n=e.matches?h.dark:h.light,s=a.themes?.find(e=>e.name===n);s?.default.auto&&t.loadTheme?.(n)}}}}]);
|
package/366.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(this.webpackChunk_tsparticles_plugin_themes=this.webpackChunk_tsparticles_plugin_themes||[]).push([[366],{366(e,t,s){s.d(t,{ThemesPlugin:()=>h});var a,i,l=s(303);(a=i||(i={})).any="any",a.dark="dark",a.light="light";class n{auto;mode;value;constructor(){this.auto=!1,this.mode=i.any,this.value=!1}load(e){(0,l.isNull)(e)||(void 0!==e.auto&&(this.auto=e.auto),void 0!==e.mode&&(this.mode=e.mode),void 0!==e.value&&(this.value=e.value))}}class d{default;name;options;constructor(){this.name="",this.default=new n}load(e){(0,l.isNull)(e)||(void 0!==e.name&&(this.name=e.name),this.default.load(e.default),void 0!==e.options&&(this.options=(0,l.deepExtend)({},e.options)))}}class h{id="theme";async getPlugin(e){let{ThemesPluginInstance:t}=await s.e(306).then(s.bind(s,306));return new t(e)}loadOptions(e,t,s){if(!this.needsPlugin(t)&&!this.needsPlugin(s))return;let a=e=>{if(t.themes)return t.themes.find(t=>t.default.value&&t.default.mode===e)??t.themes.find(e=>e.default.value&&e.default.mode===i.any)};if(t.findDefaultTheme=a,t.setTheme=e=>{if(t.themes)if(e){let s=t.themes.find(t=>t.name===e);s&&t.load(s.options)}else{let e=(0,l.safeMatchMedia)("(prefers-color-scheme: dark)"),s=a(e?.matches?i.dark:i.light);s&&t.load(s.options)}},t.themes??=[],s?.themes!==void 0)for(let e of s.themes){if(!e)continue;let s=t.themes.find(t=>t.name===e.name);if(s)s.load(e);else{let s=new d;s.load(e),t.themes.push(s)}}t.defaultThemes.dark=a(i.dark)?.name,t.defaultThemes.light=a(i.light)?.name}needsPlugin(e){return!!e?.themes?.length}}}}]);
|
package/browser/ThemesPlugin.js
CHANGED
|
@@ -2,9 +2,7 @@ import { safeMatchMedia, } from "@tsparticles/engine";
|
|
|
2
2
|
import { Theme } from "./Options/Classes/Theme.js";
|
|
3
3
|
import { ThemeMode } from "./ThemeMode.js";
|
|
4
4
|
export class ThemesPlugin {
|
|
5
|
-
|
|
6
|
-
this.id = "theme";
|
|
7
|
-
}
|
|
5
|
+
id = "theme";
|
|
8
6
|
async getPlugin(container) {
|
|
9
7
|
const { ThemesPluginInstance } = await import("./ThemesPluginInstance.js");
|
|
10
8
|
return new ThemesPluginInstance(container);
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { manageListener, safeMatchMedia } from "@tsparticles/engine";
|
|
2
2
|
export class ThemesPluginInstance {
|
|
3
|
+
_container;
|
|
3
4
|
constructor(container) {
|
|
4
|
-
this._handleThemeChange = (e) => {
|
|
5
|
-
const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find(theme => theme.name === themeName);
|
|
6
|
-
if (theme?.default.auto) {
|
|
7
|
-
void container.loadTheme?.(themeName);
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
5
|
this._container = container;
|
|
11
6
|
}
|
|
12
|
-
|
|
7
|
+
init() {
|
|
13
8
|
const container = this._container;
|
|
14
9
|
container.themeMatchMedia = safeMatchMedia("(prefers-color-scheme: dark)");
|
|
15
10
|
const loadTheme = async (name) => {
|
|
@@ -38,7 +33,7 @@ export class ThemesPluginInstance {
|
|
|
38
33
|
manageListener(container.themeMatchMedia, "change", handlers.themeChange, add);
|
|
39
34
|
};
|
|
40
35
|
container.loadTheme = loadTheme;
|
|
41
|
-
|
|
36
|
+
return Promise.resolve();
|
|
42
37
|
}
|
|
43
38
|
manageListeners(add) {
|
|
44
39
|
const container = this._container;
|
|
@@ -46,7 +41,7 @@ export class ThemesPluginInstance {
|
|
|
46
41
|
}
|
|
47
42
|
async start() {
|
|
48
43
|
this.manageListeners(true);
|
|
49
|
-
|
|
44
|
+
return Promise.resolve();
|
|
50
45
|
}
|
|
51
46
|
stop() {
|
|
52
47
|
this.manageListeners(false);
|
|
@@ -56,4 +51,10 @@ export class ThemesPluginInstance {
|
|
|
56
51
|
container.actualOptions.setTheme?.(container.currentTheme);
|
|
57
52
|
return false;
|
|
58
53
|
}
|
|
54
|
+
_handleThemeChange = (e) => {
|
|
55
|
+
const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find(theme => theme.name === themeName);
|
|
56
|
+
if (theme?.default.auto) {
|
|
57
|
+
void container.loadTheme?.(themeName);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
59
60
|
}
|
package/browser/index.js
CHANGED
package/cjs/ThemesPlugin.js
CHANGED
|
@@ -2,9 +2,7 @@ import { safeMatchMedia, } from "@tsparticles/engine";
|
|
|
2
2
|
import { Theme } from "./Options/Classes/Theme.js";
|
|
3
3
|
import { ThemeMode } from "./ThemeMode.js";
|
|
4
4
|
export class ThemesPlugin {
|
|
5
|
-
|
|
6
|
-
this.id = "theme";
|
|
7
|
-
}
|
|
5
|
+
id = "theme";
|
|
8
6
|
async getPlugin(container) {
|
|
9
7
|
const { ThemesPluginInstance } = await import("./ThemesPluginInstance.js");
|
|
10
8
|
return new ThemesPluginInstance(container);
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { manageListener, safeMatchMedia } from "@tsparticles/engine";
|
|
2
2
|
export class ThemesPluginInstance {
|
|
3
|
+
_container;
|
|
3
4
|
constructor(container) {
|
|
4
|
-
this._handleThemeChange = (e) => {
|
|
5
|
-
const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find(theme => theme.name === themeName);
|
|
6
|
-
if (theme?.default.auto) {
|
|
7
|
-
void container.loadTheme?.(themeName);
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
5
|
this._container = container;
|
|
11
6
|
}
|
|
12
|
-
|
|
7
|
+
init() {
|
|
13
8
|
const container = this._container;
|
|
14
9
|
container.themeMatchMedia = safeMatchMedia("(prefers-color-scheme: dark)");
|
|
15
10
|
const loadTheme = async (name) => {
|
|
@@ -38,7 +33,7 @@ export class ThemesPluginInstance {
|
|
|
38
33
|
manageListener(container.themeMatchMedia, "change", handlers.themeChange, add);
|
|
39
34
|
};
|
|
40
35
|
container.loadTheme = loadTheme;
|
|
41
|
-
|
|
36
|
+
return Promise.resolve();
|
|
42
37
|
}
|
|
43
38
|
manageListeners(add) {
|
|
44
39
|
const container = this._container;
|
|
@@ -46,7 +41,7 @@ export class ThemesPluginInstance {
|
|
|
46
41
|
}
|
|
47
42
|
async start() {
|
|
48
43
|
this.manageListeners(true);
|
|
49
|
-
|
|
44
|
+
return Promise.resolve();
|
|
50
45
|
}
|
|
51
46
|
stop() {
|
|
52
47
|
this.manageListeners(false);
|
|
@@ -56,4 +51,10 @@ export class ThemesPluginInstance {
|
|
|
56
51
|
container.actualOptions.setTheme?.(container.currentTheme);
|
|
57
52
|
return false;
|
|
58
53
|
}
|
|
54
|
+
_handleThemeChange = (e) => {
|
|
55
|
+
const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find(theme => theme.name === themeName);
|
|
56
|
+
if (theme?.default.auto) {
|
|
57
|
+
void container.loadTheme?.(themeName);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
59
60
|
}
|
package/cjs/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v4.0.0-
|
|
7
|
+
* v4.0.0-beta.0
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
/*
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
\**********************************************/
|
|
24
24
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
25
|
|
|
26
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemesPluginInstance: () => (/* binding */ ThemesPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass ThemesPluginInstance {\n
|
|
26
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemesPluginInstance: () => (/* binding */ ThemesPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass ThemesPluginInstance {\n _container;\n constructor(container){\n this._container = container;\n }\n init() {\n const container = this._container;\n container.themeMatchMedia = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-color-scheme: dark)\");\n const loadTheme = async (name)=>{\n if (container.destroyed) {\n return;\n }\n container.currentTheme = name;\n await container.refresh();\n };\n container.themeHandlers = {\n themeChange: (e)=>{\n this._handleThemeChange(e);\n },\n oldThemeChange: (e)=>{\n this._handleThemeChange(e);\n }\n };\n container.manageMediaMatch = (add)=>{\n const handlers = container.themeHandlers;\n if (!handlers) {\n return;\n }\n if (!container.themeMatchMedia) {\n return;\n }\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(container.themeMatchMedia, \"change\", handlers.themeChange, add);\n };\n container.loadTheme = loadTheme;\n return Promise.resolve();\n }\n manageListeners(add) {\n const container = this._container;\n container.manageMediaMatch?.(add);\n }\n async start() {\n this.manageListeners(true);\n return Promise.resolve();\n }\n stop() {\n this.manageListeners(false);\n }\n updateActualOptions() {\n const container = this._container;\n container.actualOptions.setTheme?.(container.currentTheme);\n return false;\n }\n _handleThemeChange = (e)=>{\n const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find((theme)=>theme.name === themeName);\n if (theme?.default.auto) {\n void container.loadTheme?.(themeName);\n }\n };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-themes/./dist/browser/ThemesPluginInstance.js?\n}");
|
|
27
27
|
|
|
28
28
|
/***/ }
|
|
29
29
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v4.0.0-
|
|
7
|
+
* v4.0.0-beta.0
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
/*
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
\***********************************************/
|
|
24
24
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
25
|
|
|
26
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Theme: () => (/* binding */ Theme)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _ThemeDefault_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ThemeDefault.js */ \"./dist/browser/Options/Classes/ThemeDefault.js\");\n\n\nclass Theme {\n
|
|
26
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Theme: () => (/* binding */ Theme)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _ThemeDefault_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ThemeDefault.js */ \"./dist/browser/Options/Classes/ThemeDefault.js\");\n\n\nclass Theme {\n default;\n name;\n options;\n constructor(){\n this.name = \"\";\n this.default = new _ThemeDefault_js__WEBPACK_IMPORTED_MODULE_1__.ThemeDefault();\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n if (data.name !== undefined) {\n this.name = data.name;\n }\n this.default.load(data.default);\n if (data.options !== undefined) {\n this.options = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.options);\n }\n }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-themes/./dist/browser/Options/Classes/Theme.js?\n}");
|
|
27
27
|
|
|
28
28
|
/***/ },
|
|
29
29
|
|
|
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
33
33
|
\******************************************************/
|
|
34
34
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
35
35
|
|
|
36
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemeDefault: () => (/* binding */ ThemeDefault)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _ThemeMode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ThemeMode.js */ \"./dist/browser/ThemeMode.js\");\n\n\nclass ThemeDefault {\n
|
|
36
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemeDefault: () => (/* binding */ ThemeDefault)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _ThemeMode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ThemeMode.js */ \"./dist/browser/ThemeMode.js\");\n\n\nclass ThemeDefault {\n auto;\n mode;\n value;\n constructor(){\n this.auto = false;\n this.mode = _ThemeMode_js__WEBPACK_IMPORTED_MODULE_1__.ThemeMode.any;\n this.value = false;\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n if (data.auto !== undefined) {\n this.auto = data.auto;\n }\n if (data.mode !== undefined) {\n this.mode = data.mode;\n }\n if (data.value !== undefined) {\n this.value = data.value;\n }\n }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-themes/./dist/browser/Options/Classes/ThemeDefault.js?\n}");
|
|
37
37
|
|
|
38
38
|
/***/ },
|
|
39
39
|
|
|
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
43
43
|
\***********************************/
|
|
44
44
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
45
45
|
|
|
46
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemeMode: () => (/* binding */ ThemeMode)\n/* harmony export */ });\nvar ThemeMode;\n(function
|
|
46
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemeMode: () => (/* binding */ ThemeMode)\n/* harmony export */ });\nvar ThemeMode;\n(function(ThemeMode) {\n ThemeMode[\"any\"] = \"any\";\n ThemeMode[\"dark\"] = \"dark\";\n ThemeMode[\"light\"] = \"light\";\n})(ThemeMode || (ThemeMode = {}));\n\n\n//# sourceURL=webpack://@tsparticles/plugin-themes/./dist/browser/ThemeMode.js?\n}");
|
|
47
47
|
|
|
48
48
|
/***/ },
|
|
49
49
|
|
|
@@ -53,7 +53,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
53
53
|
\**************************************/
|
|
54
54
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
55
55
|
|
|
56
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemesPlugin: () => (/* binding */ ThemesPlugin)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Theme_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Theme.js */ \"./dist/browser/Options/Classes/Theme.js\");\n/* harmony import */ var _ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ThemeMode.js */ \"./dist/browser/ThemeMode.js\");\n\n\n\nclass ThemesPlugin {\n
|
|
56
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ThemesPlugin: () => (/* binding */ ThemesPlugin)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Theme_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Theme.js */ \"./dist/browser/Options/Classes/Theme.js\");\n/* harmony import */ var _ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ThemeMode.js */ \"./dist/browser/ThemeMode.js\");\n\n\n\nclass ThemesPlugin {\n id = \"theme\";\n async getPlugin(container) {\n const { ThemesPluginInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_ThemesPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ThemesPluginInstance.js */ \"./dist/browser/ThemesPluginInstance.js\"));\n return new ThemesPluginInstance(container);\n }\n loadOptions(_container, options, source) {\n if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n return;\n }\n const findDefaultTheme = (mode)=>{\n if (!options.themes) {\n return;\n }\n return options.themes.find((theme)=>theme.default.value && theme.default.mode === mode) ?? options.themes.find((theme)=>theme.default.value && theme.default.mode === _ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__.ThemeMode.any);\n }, setTheme = (name)=>{\n if (!options.themes) {\n return;\n }\n if (name) {\n const chosenTheme = options.themes.find((theme)=>theme.name === name);\n if (chosenTheme) {\n options.load(chosenTheme.options);\n }\n } else {\n const mediaMatch = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-color-scheme: dark)\"), clientDarkMode = mediaMatch?.matches, defaultTheme = findDefaultTheme(clientDarkMode ? _ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__.ThemeMode.dark : _ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__.ThemeMode.light);\n if (defaultTheme) {\n options.load(defaultTheme.options);\n }\n }\n };\n options.findDefaultTheme = findDefaultTheme;\n options.setTheme = setTheme;\n options.themes ??= [];\n if (source?.themes !== undefined) {\n for (const theme of source.themes){\n if (!theme) {\n continue;\n }\n const existingTheme = options.themes.find((t)=>t.name === theme.name);\n if (existingTheme) {\n existingTheme.load(theme);\n } else {\n const optTheme = new _Options_Classes_Theme_js__WEBPACK_IMPORTED_MODULE_1__.Theme();\n optTheme.load(theme);\n options.themes.push(optTheme);\n }\n }\n }\n options.defaultThemes.dark = findDefaultTheme(_ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__.ThemeMode.dark)?.name;\n options.defaultThemes.light = findDefaultTheme(_ThemeMode_js__WEBPACK_IMPORTED_MODULE_2__.ThemeMode.light)?.name;\n }\n needsPlugin(options) {\n return !!options?.themes?.length;\n }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-themes/./dist/browser/ThemesPlugin.js?\n}");
|
|
57
57
|
|
|
58
58
|
/***/ }
|
|
59
59
|
|
package/esm/ThemesPlugin.js
CHANGED
|
@@ -2,9 +2,7 @@ import { safeMatchMedia, } from "@tsparticles/engine";
|
|
|
2
2
|
import { Theme } from "./Options/Classes/Theme.js";
|
|
3
3
|
import { ThemeMode } from "./ThemeMode.js";
|
|
4
4
|
export class ThemesPlugin {
|
|
5
|
-
|
|
6
|
-
this.id = "theme";
|
|
7
|
-
}
|
|
5
|
+
id = "theme";
|
|
8
6
|
async getPlugin(container) {
|
|
9
7
|
const { ThemesPluginInstance } = await import("./ThemesPluginInstance.js");
|
|
10
8
|
return new ThemesPluginInstance(container);
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { manageListener, safeMatchMedia } from "@tsparticles/engine";
|
|
2
2
|
export class ThemesPluginInstance {
|
|
3
|
+
_container;
|
|
3
4
|
constructor(container) {
|
|
4
|
-
this._handleThemeChange = (e) => {
|
|
5
|
-
const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find(theme => theme.name === themeName);
|
|
6
|
-
if (theme?.default.auto) {
|
|
7
|
-
void container.loadTheme?.(themeName);
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
5
|
this._container = container;
|
|
11
6
|
}
|
|
12
|
-
|
|
7
|
+
init() {
|
|
13
8
|
const container = this._container;
|
|
14
9
|
container.themeMatchMedia = safeMatchMedia("(prefers-color-scheme: dark)");
|
|
15
10
|
const loadTheme = async (name) => {
|
|
@@ -38,7 +33,7 @@ export class ThemesPluginInstance {
|
|
|
38
33
|
manageListener(container.themeMatchMedia, "change", handlers.themeChange, add);
|
|
39
34
|
};
|
|
40
35
|
container.loadTheme = loadTheme;
|
|
41
|
-
|
|
36
|
+
return Promise.resolve();
|
|
42
37
|
}
|
|
43
38
|
manageListeners(add) {
|
|
44
39
|
const container = this._container;
|
|
@@ -46,7 +41,7 @@ export class ThemesPluginInstance {
|
|
|
46
41
|
}
|
|
47
42
|
async start() {
|
|
48
43
|
this.manageListeners(true);
|
|
49
|
-
|
|
44
|
+
return Promise.resolve();
|
|
50
45
|
}
|
|
51
46
|
stop() {
|
|
52
47
|
this.manageListeners(false);
|
|
@@ -56,4 +51,10 @@ export class ThemesPluginInstance {
|
|
|
56
51
|
container.actualOptions.setTheme?.(container.currentTheme);
|
|
57
52
|
return false;
|
|
58
53
|
}
|
|
54
|
+
_handleThemeChange = (e) => {
|
|
55
|
+
const mediaEvent = e, container = this._container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes?.find(theme => theme.name === themeName);
|
|
56
|
+
if (theme?.default.auto) {
|
|
57
|
+
void container.loadTheme?.(themeName);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
59
60
|
}
|
package/esm/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/plugin-themes",
|
|
3
|
-
"version": "4.0.0-
|
|
3
|
+
"version": "4.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles themes plugin",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"./package.json": "./package.json"
|
|
87
87
|
},
|
|
88
88
|
"dependencies": {
|
|
89
|
-
"@tsparticles/engine": "4.0.0-
|
|
89
|
+
"@tsparticles/engine": "4.0.0-beta.0"
|
|
90
90
|
},
|
|
91
91
|
"publishConfig": {
|
|
92
92
|
"access": "public"
|