Add option to change the stage background

readme.md

@@ -156,6 +156,7 @@ const driver = new Driver({
   allowClose: true,                 // Whether the click on overlay should close or not
   doneBtnText: 'Done',              // Text on the final button
   closeBtnText: 'Close',            // Text on the close button for this step
+  stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
   nextBtnText: 'Next',              // Next button text for this step
   prevBtnText: 'Previous',          // Previous button text for this step
   showButtons: false,               // Do not show control buttons in footer
@@ -174,6 +175,7 @@ Here are the set of options that you can pass while defining steps `defineSteps`
 ```javascript
 const stepDefinition = {
   element: '#some-item',        // Query selector for the item to be highlighted
+  stageBackground: '#ffffff',   // This will override the one set in driver
   popover: {                    // There will be no popover if empty or not given
     title: 'Title',             // Title on the popover
     description: 'Description', // Body of the popover
@@ -255,7 +257,7 @@ activeElement.showPopover();          // Show the popover
 activeElement.getNode();  // Gets the DOM Element behind this element
 ```
 
-*Note –* Do not forget to add `e.stopPropagation()` to the `click` binding that triggers driver 
+**Note –** Do not forget to add `e.stopPropagation()` to the `click` binding that triggers driver
 
 ![](./demo/images/split.png)
 

src/core/stage.js

@@ -85,6 +85,7 @@ export default class Stage extends Element {
     this.node.style.height = `${height}px`;
     this.node.style.top = `${position.top - (requiredPadding / 2)}px`;
     this.node.style.left = `${position.left - (requiredPadding / 2)}px`;
+    this.node.style.backgroundColor = this.options.stageBackground;
   }
 }
 

src/index.js

@@ -26,11 +26,12 @@ export default class Driver {
    */
   constructor(options = {}) {
     this.options = {
-      animate: SHOULD_ANIMATE_OVERLAY,     // Whether to animate or not
-      opacity: OVERLAY_OPACITY,     // Overlay opacity
-      padding: OVERLAY_PADDING,     // Spacing around the element from the overlay
+      animate: SHOULD_ANIMATE_OVERLAY, // Whether to animate or not
+      opacity: OVERLAY_OPACITY, // Overlay opacity
+      padding: OVERLAY_PADDING, // Spacing around the element from the overlay
       scrollIntoViewOptions: null,  // Options to be passed to `scrollIntoView`
       allowClose: SHOULD_OUTSIDE_CLICK_CLOSE,    // Whether to close overlay on click outside the element
+      stageBackground: '#ffffff',   // Background color for the stage
       onHighlightStarted: () => {   // When element is about to be highlighted
       },
       onHighlighted: () => {        // When element has been highlighted
@@ -280,7 +281,12 @@ export default class Driver {
       popover = new Popover(popoverOptions, this.window, this.document);
     }
 
-    const stage = new Stage(this.options, this.window, this.document);
+    const stageOptions = {
+      ...this.options,
+      ...elementOptions,
+    };
+
+    const stage = new Stage(stageOptions, this.window, this.document);
 
     return new Element({
       node: domElement,