diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index fef8a662d..d12f3023e 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -74,6 +74,8 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([hover])
 
+  const highlightAlpha = isDark ? 1.0 : 0.35
+
   return (
     <VStack
       ref={refs.setReference}
@@ -115,9 +117,8 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
                 m: '0px',
                 display: 'inline',
                 padding: '2px',
-                backgroundColor: 'rgba(var(--colors-highlightBackground), 1)',
-                boxShadow:
-                  '1px 0 0 rgba(var(--colors-highlightBackground), 1), -1px 0 0 rgba(var(--colors-highlightBackground),1)',
+                backgroundColor: `rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
+                boxShadow: `1px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -1px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxDecorationBreak: 'clone',
                 borderRadius: '2px',
               },