Add option to configure opacity

index.html

@@ -81,6 +81,8 @@
         <button id="simple-highlight-btn">Simple Highlight</button>
         <button id="transition-highlight-btn">Multiple Highlight Calls</button>
         <button id="disallow-close">Disallow Close</button>
+        <button id="dark-highlight-btn">Super Dark Highlight</button>
+        <button id="dim-highlight-btn">Super Dim Highlight</button>
         <button id="tour-btn">Start Tour</button>
         <button id="destroy-btn">Destroy</button>
       </div>
@@ -105,6 +107,24 @@
           driver({ animate: false }).highlight({ element: "ul" });
         });
 
+      document
+        .getElementById("dark-highlight-btn")
+        .addEventListener("click", () => {
+          driver({
+            animate: true,
+            opacity: 0.9,
+          }).highlight({ element: "ul" });
+        });
+
+      document
+        .getElementById("dim-highlight-btn")
+        .addEventListener("click", () => {
+          driver({
+            animate: true,
+            opacity: 0.2,
+          }).highlight({ element: ".buttons" });
+        });
+
       document
         .getElementById("transition-highlight-btn")
         .addEventListener("click", () => {

src/config.ts

@@ -1,6 +1,7 @@
 export type Config = {
   animate?: boolean;
   allowClose?: boolean;
+  opacity?: number;
 };
 
 let currentConfig: Config = {};
@@ -9,6 +10,7 @@ export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
     allowClose: true,
+    opacity: 0.7,
     ...config,
   };
 }

src/stage.ts

@@ -1,6 +1,7 @@
 import { easeInOutQuad } from "./math";
 import { onDriverClick } from "./events";
 import { trigger } from "./hooks";
+import { getConfig } from "./config";
 
 export type StageDefinition = {
   x: number;
@@ -158,7 +159,7 @@ function createStageSvg(stage: StageDefinition): SVGSVGElement {
   cutoutPath.setAttribute("d", generateSvgCutoutPathString(stage));
 
   cutoutPath.style.fill = "rgb(0,0,0)";
-  cutoutPath.style.opacity = `0.7`;
+  cutoutPath.style.opacity = `${getConfig("opacity")}`;
   cutoutPath.style.pointerEvents = "auto";
   cutoutPath.style.cursor = "auto";