Overlay config change

index.html

@@ -395,8 +395,8 @@ npm install driver.js</pre
       document.getElementById("non-animated-tour").addEventListener("click", () => {
         const driverObj = driver({
           animate: false,
-          backdropColor: "blue",
-          opacity: 0.3,
+          overlayColor: "blue",
+          overlayOpacity: 0.3,
           showProgress: true,
           steps: basicTourSteps,
         });
@@ -407,8 +407,8 @@ npm install driver.js</pre
       document.getElementById("confirm-exit-tour").addEventListener("click", () => {
         const driverObj = driver({
           animate: true,
-          backdropColor: "green",
-          opacity: 0.3,
+          overlayColor: "green",
+          overlayOpacity: 0.3,
           steps: basicTourSteps,
           onDestroyStarted: () => {
             if (driverObj.hasNextStep() && confirm("Are you sure?")) {
@@ -446,7 +446,7 @@ npm install driver.js</pre
       document.getElementById("async-tour").addEventListener("click", () => {
         const driverObj = driver({
           animate: true,
-          opacity: 0.3,
+          overlayOpacity: 0.3,
           showProgress: true,
           progressText: "{{current}} / {{total}}",
           steps: [
@@ -735,8 +735,8 @@ npm install driver.js</pre
 
       document.getElementById("backdrop-color-btn").addEventListener("click", () => {
         driver({
-          backdropColor: "blue",
-          opacity: 0.3,
+          overlayColor: "blue",
+          overlayOpacity: 0.3,
         }).highlight({
           element: "#backdrop-color-btn",
         });
@@ -807,14 +807,14 @@ npm install driver.js</pre
       document.getElementById("dark-highlight-btn").addEventListener("click", () => {
         driver({
           animate: true,
-          opacity: 0.9,
+          overlayOpacity: 0.9,
         }).highlight({ element: "ul" });
       });
 
       document.getElementById("dim-highlight-btn").addEventListener("click", () => {
         driver({
           animate: true,
-          opacity: 0.2,
+          overlayOpacity: 0.2,
         }).highlight({ element: ".buttons" });
       });
 

src/config.ts

@@ -8,10 +8,10 @@ export type Config = {
   steps?: DriveStep[];
 
   animate?: boolean;
-  backdropColor?: string;
+  overlayColor?: string;
+  overlayOpacity?: number;
   smoothScroll?: boolean;
   allowClose?: boolean;
-  opacity?: number;
   stagePadding?: number;
   stageRadius?: number;
 
@@ -52,7 +52,7 @@ export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
     allowClose: true,
-    opacity: 0.7,
+    overlayOpacity: 0.7,
     smoothScroll: false,
     showProgress: false,
     stagePadding: 10,
@@ -60,7 +60,7 @@ export function configure(config: Config = {}) {
     popoverOffset: 10,
     showButtons: ["next", "previous", "close"],
     disableButtons: [],
-    backdropColor: "#000",
+    overlayColor: "#000",
     ...config,
   };
 }

src/overlay.ts

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