diff --git a/src/frontend/src/primitives/Popover.tsx b/src/frontend/src/primitives/Popover.tsx
index c0863a15..467c7669 100644
--- a/src/frontend/src/primitives/Popover.tsx
+++ b/src/frontend/src/primitives/Popover.tsx
@@ -46,6 +46,18 @@ const StyledOverlayArrow = styled(OverlayArrow, {
       transform: 'rotate(180deg) translateY(-1px)',
     },
   },
+  variants: {
+    variant: {
+      light: {},
+      dark: {
+        fill: 'primaryDark.50',
+        stroke: 'primaryDark.50',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'light',
+  },
 })
 
 /**
@@ -56,6 +68,7 @@ const StyledOverlayArrow = styled(OverlayArrow, {
  */
 export const Popover = ({
   children,
+  variant = 'light',
   ...dialogProps
 }: {
   children: [
@@ -64,20 +77,21 @@ export const Popover = ({
       | (({ close }: { close: () => void }) => ReactNode)
       | ReactNode,
   ]
+  variant?: 'dark' | 'light'
 } & DialogProps) => {
   const [trigger, popoverContent] = children
   return (
     <DialogTrigger>
       {trigger}
       <StyledPopover>
-        <StyledOverlayArrow>
+        <StyledOverlayArrow variant={variant}>
           <svg width={12} height={12} viewBox="0 0 12 12">
             <path d="M0 0 L6 6 L12 0" />
           </svg>
         </StyledOverlayArrow>
         <Dialog {...dialogProps}>
           {({ close }) => (
-            <Box size="sm" type="popover">
+            <Box size="sm" type="popover" variant={variant}>
               {typeof popoverContent === 'function'
                 ? popoverContent({ close })
                 : popoverContent}