@tsparticles/plugin-themes 4.0.0-alpha.4

package/esm/Options/Classes/ThemeDefault.js

@@ -0,0 +1,23 @@
+import { isNull } from "@tsparticles/engine";
+import { ThemeMode } from "../../ThemeMode.js";
+export class ThemeDefault {
+    constructor() {
+        this.auto = false;
+        this.mode = ThemeMode.any;
+        this.value = false;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.auto !== undefined) {
+            this.auto = data.auto;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        if (data.value !== undefined) {
+            this.value = data.value;
+        }
+    }
+}

package/esm/Options/Interfaces/ITheme.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IThemeDefault.js

@@ -0,0 +1 @@
+export {};

package/esm/ThemeMode.js

@@ -0,0 +1,6 @@
+export var ThemeMode;
+(function (ThemeMode) {
+    ThemeMode["any"] = "any";
+    ThemeMode["dark"] = "dark";
+    ThemeMode["light"] = "light";
+})(ThemeMode || (ThemeMode = {}));

package/esm/ThemesPlugin.js

@@ -0,0 +1,64 @@
+import { safeMatchMedia, } from "@tsparticles/engine";
+import { Theme } from "./Options/Classes/Theme.js";
+import { ThemeMode } from "./ThemeMode.js";
+export class ThemesPlugin {
+    constructor() {
+        this.id = "theme";
+    }
+    async getPlugin(container) {
+        const { ThemesPluginInstance } = await import("./ThemesPluginInstance.js");
+        return new ThemesPluginInstance(container);
+    }
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        const findDefaultTheme = (mode) => {
+            if (!options.themes) {
+                return;
+            }
+            return (options.themes.find(theme => theme.default.value && theme.default.mode === mode) ??
+                options.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any));
+        }, setTheme = (name) => {
+            if (!options.themes) {
+                return;
+            }
+            if (name) {
+                const chosenTheme = options.themes.find(theme => theme.name === name);
+                if (chosenTheme) {
+                    options.load(chosenTheme.options);
+                }
+            }
+            else {
+                const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = findDefaultTheme(clientDarkMode ? ThemeMode.dark : ThemeMode.light);
+                if (defaultTheme) {
+                    options.load(defaultTheme.options);
+                }
+            }
+        };
+        options.findDefaultTheme = findDefaultTheme;
+        options.setTheme = setTheme;
+        options.themes ??= [];
+        if (source?.themes !== undefined) {
+            for (const theme of source.themes) {
+                if (!theme) {
+                    continue;
+                }
+                const existingTheme = options.themes.find(t => t.name === theme.name);
+                if (existingTheme) {
+                    existingTheme.load(theme);
+                }
+                else {
+                    const optTheme = new Theme();
+                    optTheme.load(theme);
+                    options.themes.push(optTheme);
+                }
+            }
+        }
+        options.defaultThemes.dark = findDefaultTheme(ThemeMode.dark)?.name;
+        options.defaultThemes.light = findDefaultTheme(ThemeMode.light)?.name;
+    }
+    needsPlugin(options) {
+        return !!options?.themes?.length;
+    }
+}

package/esm/ThemesPluginInstance.js

@@ -0,0 +1,59 @@
+import { manageListener, safeMatchMedia } from "@tsparticles/engine";
+export class ThemesPluginInstance {
+    constructor(container) {
+        this._handleThemeChange = (e) => {
+            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);
+            if (theme?.default.auto) {
+                void container.loadTheme?.(themeName);
+            }
+        };
+        this._container = container;
+    }
+    async init() {
+        const container = this._container;
+        container.themeMatchMedia = safeMatchMedia("(prefers-color-scheme: dark)");
+        const loadTheme = async (name) => {
+            if (container.destroyed) {
+                return;
+            }
+            container.currentTheme = name;
+            await container.refresh();
+        };
+        container.themeHandlers = {
+            themeChange: (e) => {
+                this._handleThemeChange(e);
+            },
+            oldThemeChange: (e) => {
+                this._handleThemeChange(e);
+            },
+        };
+        container.manageMediaMatch = (add) => {
+            const handlers = container.themeHandlers;
+            if (!handlers) {
+                return;
+            }
+            if (!container.themeMatchMedia) {
+                return;
+            }
+            manageListener(container.themeMatchMedia, "change", handlers.themeChange, add);
+        };
+        container.loadTheme = loadTheme;
+        await Promise.resolve();
+    }
+    manageListeners(add) {
+        const container = this._container;
+        container.manageMediaMatch?.(add);
+    }
+    async start() {
+        this.manageListeners(true);
+        await Promise.resolve();
+    }
+    stop() {
+        this.manageListeners(false);
+    }
+    updateActualOptions() {
+        const container = this._container;
+        container.actualOptions.setTheme?.(container.currentTheme);
+        return false;
+    }
+}

package/esm/index.js

@@ -0,0 +1,7 @@
+export function loadThemesPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.4");
+    engine.register(async (e) => {
+        const { ThemesPlugin } = await import("./ThemesPlugin.js");
+        e.addPlugin(new ThemesPlugin());
+    });
+}

package/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@tsparticles/plugin-themes",
+  "version": "4.0.0-alpha.4",
+  "description": "tsParticles themes plugin",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "plugins/themes"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "tsparticles-plugin"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tsparticles/tsparticles/issues"
+  },
+  "sideEffects": false,
+  "jsdelivr": "tsparticles.plugin.themes.min.js",
+  "unpkg": "tsparticles.plugin.themes.min.js",
+  "browser": "browser/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./browser/index.js",
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "umd": "./umd/index.js",
+      "default": "./cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "4.0.0-alpha.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module"
+}