Add support for changing backdrop color

index.html

@@ -141,7 +141,7 @@
         <button id="without-element-btn">No Element</button>
         <button id="is-active-btn">Is Active?</button>
         <button id="activate-check-btn">Activate and Check</button>
-        <button id="modify-refresh">Modify Active + Refresh</button>
+        <button id="backdrop-color-btn">Backdrop Color</button>
         <button id="destroy-btn">Destroy</button>
       </div>
 
@@ -276,6 +276,15 @@ npm install driver.js</pre
         alert(driver().isActive());
       });
 
+      document.getElementById("backdrop-color-btn").addEventListener("click", () => {
+        driver({
+          backdropColor: "blue",
+          opacity: 0.3,
+        }).highlight({
+          element: "#backdrop-color-btn",
+        });
+      });
+
       document.getElementById("activate-check-btn").addEventListener("click", () => {
         const driverObj = driver({
           showButtons: false,

src/config.ts

@@ -2,6 +2,7 @@ import { DriveStep } from "./driver";
 
 export type Config = {
   animate?: boolean;
+  backdropColor?: string;
   smoothScroll?: boolean;
   allowClose?: boolean;
   opacity?: number;
@@ -26,6 +27,7 @@ export function configure(config: Config = {}) {
     stageRadius: 5,
     popoverOffset: 10,
     showButtons: true,
+    backdropColor: "#000",
     ...config,
   };
 }

src/stage.ts

@@ -135,7 +135,7 @@ function createStageSvg(stage: StageDefinition): SVGSVGElement {
 
   stagePath.setAttribute("d", generateStageSvgPathString(stage));
 
-  stagePath.style.fill = "rgb(0,0,0)";
+  stagePath.style.fill = getConfig("backdropColor") || "rgb(0,0,0)";
   stagePath.style.opacity = `${getConfig("opacity")}`;
   stagePath.style.pointerEvents = "auto";
   stagePath.style.cursor = "auto";