From ea0d5326a68228dbe247e7d2f12769d5b8b0e26f Mon Sep 17 00:00:00 2001
From: Ryan Holinshead <>
Date: Wed, 7 Feb 2024 19:50:48 -0500
Subject: [PATCH] [vscode][ez] Override Mantine Menu/Dropdown Styles with
 VSCode Styles

# [vscode][ez] Override Mantine Menu/Dropdown Styles with VSCode Styles

Update the menu and autoselect dropdowns to have correct theme styles.

## Before:
![Screenshot 2024-02-07 at 7 47 51 PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/214eb0d8-6c9b-4cc2-8c22-be42f896938e)
![Screenshot 2024-02-07 at 7 47 57 PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/0b931c6e-8781-47e4-b1a4-d0d6d2e529ef)

## After:
![Screenshot 2024-02-07 at 7 46 16 PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/ace3b666-93fc-4725-b5e6-9e42e12122fa)
![Screenshot 2024-02-07 at 7 48 28 PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/452eb626-1db1-49c3-ab41-ca4fb54a2a65)
---
 vscode-extension/editor/src/VSCodeTheme.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/vscode-extension/editor/src/VSCodeTheme.ts b/vscode-extension/editor/src/VSCodeTheme.ts
index 1dd3cf2ae..84331f382 100644
--- a/vscode-extension/editor/src/VSCodeTheme.ts
+++ b/vscode-extension/editor/src/VSCodeTheme.ts
@@ -23,6 +23,20 @@ export const VSCODE_THEME: MantineThemeOverride = {
       maxWidth: "100%",
       minHeight: "100vh",
     },
+    ".mantine-Autocomplete-dropdown": {
+      backgroundColor: "var(--vscode-menu-background)",
+      border: "1px solid",
+      borderColor: "var(--vscode-notebook-cellBorderColor)",
+      borderRadius: "0px",
+      color: "var(--vscode-menu-foreground)",
+
+      ".mantine-Autocomplete-item": {
+        backgroundColor: "var(--vscode-menu-background)",
+        "&:hover": {
+          backgroundColor: "var(--vscode-inputOption-hoverBackground)",
+        },
+      },
+    },
     ".mantine-Input-input": {
       backgroundColor: "var(--vscode-input-background)",
       borderColor: "var(--vscode-notebook-cellBorderColor)",
@@ -38,6 +52,13 @@ export const VSCODE_THEME: MantineThemeOverride = {
         color: "var(--vscode-input-placeholderForeground)",
       },
     },
+    ".mantine-Menu-dropdown": {
+      backgroundColor: "var(--vscode-menu-background)",
+      border: "1px solid",
+      borderColor: "var(--vscode-notebook-cellBorderColor)",
+      borderRadius: "0px",
+      color: "var(--vscode-menu-foreground)",
+    },
     ".monoFont": {
       fontFamily:
         "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",