Update configuration

docs/src/content/guides/configuration.mdx

@@ -119,17 +119,17 @@ type Config = {
 
   // Whether to animate the product tour. (default: true)
   animate?: boolean;
-  // Overlay color. (default: rgba(0, 0, 0, 0.5))
+  // Overlay color. (default: black)
   // This is useful when you have a dark background
   // and want to highlight elements with a light
   // background color.
-  backdropColor?: string;
+  overlayColor?: string;
   // Whether to smooth scroll to the highlighted element. (default: false)
   smoothScroll?: boolean;
   // Whether to allow closing the popover by clicking on the backdrop. (default: true)
   allowClose?: boolean;
   // Opacity of the backdrop. (default: 0.5)
-  opacity?: number;
+  overlayOpacity?: number;
   // Distance between the highlighted element and the cutout. (default: 10)
   stagePadding?: number;
   // Radius of the cutout around the highlighted element. (default: 5)

docs/src/content/guides/customize-overlay.mdx

@@ -0,0 +1,43 @@
+---
+title: "Styling Overlay"
+groupTitle: "Examples"
+sort: 8
+---
+
+import { CodeSample } from "../../components/CodeSample.tsx";
+
+You can customize the overlay opacity and color using `overlayOpacity` and `overlayColor` options to change the look of the overlay.
+
+## Overlay Color
+
+Here are some driver.js examples with different overlay colors.
+
+```js
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
+
+const driverObj = driver({
+  overlayColor: 'blue'
+});
+driverObj.highlight({
+  popover: {
+    title: 'Pass any RGB Color',
+    description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.'
+  }
+});
+```
+
+<CodeSample
+  buttonText={"Blue Color"}
+  config={{
+    overlayColor: 'blue'
+  }}
+  highlight={{
+    popover: {
+      title: 'Pass any RGB Color',
+      description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
+    }
+  }}
+  id={"left-start"}
+  client:load
+/>