From d71c768365175d92c8681724d3a834d7cd701802 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 3 Jul 2023 02:20:25 +0100
Subject: [PATCH] Update configuration

---
 docs/src/content/guides/configuration.mdx     |  6 +--
 docs/src/content/guides/customize-overlay.mdx | 43 +++++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/content/guides/customize-overlay.mdx

diff --git a/docs/src/content/guides/configuration.mdx b/docs/src/content/guides/configuration.mdx
index ad9d5bc..af77cf3 100644
--- a/docs/src/content/guides/configuration.mdx
+++ b/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)
diff --git a/docs/src/content/guides/customize-overlay.mdx b/docs/src/content/guides/customize-overlay.mdx
new file mode 100644
index 0000000..a4533b9
--- /dev/null
+++ b/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
+/>
\ No newline at end of file