From de2dbf5d9b6010f98b3df6f206c7312dc9dccd19 Mon Sep 17 00:00:00 2001
From: eecavanna <eecavanna@users.noreply.github.com>
Date: Mon, 10 Feb 2025 17:58:19 -0800
Subject: [PATCH] Make tour navigation dots use theme's primary color

---
 src/components/AppTourProvider/AppTourProvider.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/AppTourProvider/AppTourProvider.tsx b/src/components/AppTourProvider/AppTourProvider.tsx
index a47b47d..605602f 100644
--- a/src/components/AppTourProvider/AppTourProvider.tsx
+++ b/src/components/AppTourProvider/AppTourProvider.tsx
@@ -34,7 +34,11 @@ const AppTourProvider: React.FC<ProviderProps> = ({
         popover: (base) => ({
           ...base,
           borderRadius: 4,
+          // Make the tour text be legible over its background.
           color: "var(--ion-color-primary-contrast)",
+          // Make the navigation dots have the same color as the "Dismiss" button's background.
+          // Reference: https://docs.react.tours/tour/examples#custom-styles
+          "--reactour-accent": "var(--ion-color-primary)",
         }),
         // Style the hole in the mask (seems to impact light mode only 🤷).
         maskArea: (base) => ({ ...base, rx: 4 }),
@@ -74,7 +78,6 @@ const AppTourProvider: React.FC<ProviderProps> = ({
           <IonButton
             size={"small"}
             fill={"solid"}
-            color={"light"}
             onClick={() => props.setIsOpen(false)}
           >
             Dismiss