diff --git a/client/index.css b/client/index.css
index cfb10fd..99c5d25 100644
--- a/client/index.css
+++ b/client/index.css
@@ -44,6 +44,7 @@ a {
 
 /* Hero */
 .hero {
+    --current-background-color: var(--background-color);
     background: var(--background-color);
     display: flex;
     justify-content: center;
diff --git a/client/patterns/popover-arrow/Cover.tsx b/client/patterns/popover-arrow/Cover.tsx
index 47dade7..be4e06b 100644
--- a/client/patterns/popover-arrow/Cover.tsx
+++ b/client/patterns/popover-arrow/Cover.tsx
@@ -31,7 +31,7 @@ const Cover: React.FC<{}> = () => {
                 >
                     <div
                         style={{
-                            backgroundColor: '#FFF',
+                            backgroundColor: 'var(--current-background-color, #FFF)',
                             borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
                             borderRight: '1px solid rgba(0, 0, 0, 0.3)',
                             height: '10px',