diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index 5f1d427e6..3a5a6eb23 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -71,50 +71,54 @@
 }
 
 /* Override default styles from the codemirror inline css for autocomplete info tooltip*/
+/* Override default styles from the c odemirror inline css for autocomplete info tooltip*/
 .cm-tooltip.cm-completionInfo {
-  padding: 0 !important;
-  background: #1e1e1e !important;
-  border: 1px solid #3a3a3a !important;
+  padding: 12px !important;
+  padding-bottom: 12px !important;
+  border: 1px solid var(--foreground) !important;
   border-radius: 4px !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
   max-width: 500px !important;
   min-width: 300px !important;
   max-height: 400px !important;
   white-space: normal !important;
+  overflow: auto !important;
+  background-color: var(--lineHighlight) !important;
 }
 
 /* Main tooltip container */
 .autocomplete-info-tooltip {
-  padding: 12px;
-  color: #d4d4d4;
-  font-family: 'SF Mono', 'Monaco', monospace;
-  font-size: 13px;
+  border-radius: 4px !important;
+  color: var(--foreground);
+  font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
+  font-size: var(--font-size, 13px);
   line-height: 1.4;
-  overflow-y: auto;
   max-width: 600px;
   max-height: 400px;
+  min-width: 400px;
 }
 
 /* Function name */
 .autocomplete-info-function-name {
   font-size: 15px;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--foreground);
   margin: 0 0 8px 0;
 }
 
 /* Function description */
 .autocomplete-info-function-description {
   margin: 0 0 12px 0;
-  color: #b4b4b4;
+  color: var(--foreground);
   line-height: 1.5;
+  opacity: 0.8;
 }
 
 /* Section titles */
 .autocomplete-info-section-title {
   font-size: 12px;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--foreground);
   margin: 16px 0 6px 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -138,9 +142,9 @@
 .autocomplete-info-param-item {
   margin-bottom: 8px;
   padding: 8px;
-  background: #2a2a2a;
+  background-color: var(--lineBackground);
   border-radius: 3px;
-  border-left: 2px solid #555;
+  border-left: 2px solid var(--foreground, #555);
 }
 
 .autocomplete-info-param-item:last-child {
@@ -149,23 +153,24 @@
 
 .autocomplete-info-param-name {
   font-weight: 600;
-  color: #ffffff;
+  color: var(--variable, var(--foreground));
   margin-right: 8px;
 }
 
 .autocomplete-info-param-type {
-  color: #888;
+  color: var(--comment);
   font-size: 12px;
-  background: #333;
+  background-color: var(--gutterForeground);
   padding: 1px 4px;
   border-radius: 2px;
 }
 
 .autocomplete-info-param-desc {
-  color: #b4b4b4;
+  color: var(--foreground);
   font-size: 10px;
   margin-top: 4px;
   line-height: 1.4;
+  opacity: 0.7;
 }
 
 /* Examples */
@@ -174,29 +179,33 @@
 }
 
 .autocomplete-info-example-code {
-  background: #2a2a2a;
-  color: #d4d4d4;
+  background: var(--lineBackground);
+  color: var(--foreground);
   padding: 8px;
   border-radius: 3px;
-  font-family: 'SF Mono', 'Monaco', monospace;
+  font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
   font-size: 12px;
   line-height: 1.5;
   margin: 4px 0;
   overflow-x: auto;
   white-space: pre;
-  border: 1px solid #3a3a3a;
+  border: 1px solid var(--foreground, #3a3a3a);
 }
 
-/* Scrollbar */
+/* Scrollbar - using theme colors */
 .autocomplete-info-tooltip::-webkit-scrollbar {
   width: 4px;
 }
 
 .autocomplete-info-tooltip::-webkit-scrollbar-track {
-  background: #2a2a2a;
+  /* background: var(--lineBackground, var(--background)); */
 }
 
 .autocomplete-info-tooltip::-webkit-scrollbar-thumb {
-  background: #555;
+  /* background: var(--border, #555); */
   border-radius: 2px;
 }
+
+.autocomplete-info-tooltip::-webkit-scrollbar-thumb:hover {
+  /* background: var(--selection, var(--border, #777)); */
+}