From ca50a8e0e5e6e345fb6bc7f9072750decabce3c5 Mon Sep 17 00:00:00 2001
From: Diogo Alhada <alhada06@gmail.com>
Date: Sat, 2 Mar 2024 15:54:11 +0000
Subject: [PATCH] add theme prop and watcher

add theme prop and watcher to reactively change theme
---
 components/vue3/src/components/vue-particles.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/vue3/src/components/vue-particles.vue b/components/vue3/src/components/vue-particles.vue
index a50b3a0..de8800a 100644
--- a/components/vue3/src/components/vue-particles.vue
+++ b/components/vue3/src/components/vue-particles.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted } from "vue";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
 import { type Container, type ISourceOptions, type Engine, tsParticles } from "@tsparticles/engine";
 
 export type IParticlesProps = ISourceOptions;
@@ -14,6 +14,7 @@ const props = defineProps<{
     id: string;
     options?: IParticlesProps;
     url?: string;
+    theme?: string;
 }>();
 
 const emit = defineEmits<{
@@ -60,4 +61,12 @@ onUnmounted(() => {
     container.destroy();
     container = undefined;
 });
+
+watch(
+    () => props.theme,
+    () => {
+        container?.loadTheme(props.theme);
+    },
+    { immediate: true, deep: true },
+);
 </script>