From 396f911f29f98a0851f854fbfed62ca2cd9e99d2 Mon Sep 17 00:00:00 2001
From: Maximiliano Calderon
 <64944780+maximilianoCalderon@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:55:29 -0600
Subject: [PATCH] Add BackgroundColor

---
 src/components/Vue3Steppy.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Vue3Steppy.vue b/src/components/Vue3Steppy.vue
index 7f72522..97f5007 100644
--- a/src/components/Vue3Steppy.vue
+++ b/src/components/Vue3Steppy.vue
@@ -135,6 +135,10 @@ const props = defineProps({
     type: String,
     default: "#fff",
   },
+  backgroundColor: {
+    type: String,
+    default: "#fff",
+  },
   circleSize: {
     type: Number,
     default: 68,
@@ -145,6 +149,7 @@ const cssVars = computed(() => {
   return {
     "--primaryColor1": props.primaryColor1,
     "--primaryColor2": props.primaryColor2,
+    "--backgroundColor": props.backgroundColor,
     "--circleSize": `${props.circleSize}px`,
   };
 });
@@ -174,6 +179,8 @@ const circleStyles = computed(() => {
 <style scoped lang="scss">
 $primary-1: var(--primaryColor1);
 $primary-2: var(--primaryColor2);
+$backgroundColor: var(--backgroundColor);
+
 $transition: all 500ms ease;
 
 body {
@@ -303,7 +310,7 @@ body {
 .steppy-pane {
   color: #333;
   text-align: center;
-  background-color: #fff;
+  background-color: $backgroundColor;
   border-radius: 15px;
   padding: 25px 25px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);