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 = ({ 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 = ({ props.setIsOpen(false)} > Dismiss