feat: Match styling of Mantine Select with InvokeAI

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -5,7 +5,43 @@ type IAISelectProps = SelectProps;
 
 const IAIMantineSelect = (props: IAISelectProps) => {
   const { searchable = true, ...rest } = props;
-  return <Select searchable={searchable} {...rest} />;
+  return (
+    <Select
+      searchable={searchable}
+      styles={() => ({
+        label: {
+          color: 'var(--invokeai-colors-base-300)',
+          fontWeight: 'normal',
+        },
+        input: {
+          backgroundColor: 'var(--invokeai-colors-base-900)',
+          border: 'none',
+          color: 'var(--invokeai-colors-base-100)',
+          fontWeight: 500,
+        },
+        dropdown: {
+          backgroundColor: 'var(--invokeai-colors-base-800)',
+          borderColor: 'var(--invokeai-colors-base-700)',
+        },
+        item: {
+          color: 'var(--invokeai-colors-base-300)',
+          ':hover': {
+            color: 'var(--invokeai-colors-base-300)',
+            backgroundColor: 'var(--invokeai-colors-accent-750)',
+          },
+          '&[data-selected]': {
+            color: 'var(--invokeai-colors-base-300)',
+            backgroundColor: 'var(--invokeai-colors-accent-750)',
+            fontWeight: 500,
+            ':hover': {
+              backgroundColor: 'var(--invokeai-colors-accent-750)',
+            },
+          },
+        },
+      })}
+      {...rest}
+    />
+  );
 };
 
 export default memo(IAIMantineSelect);

invokeai/frontend/web/src/mantine-theme/theme.ts

@@ -3,20 +3,4 @@ import { MantineThemeOverride } from '@mantine/core';
 export const mantineTheme: MantineThemeOverride = {
   colorScheme: 'dark',
   fontFamily: `'InterVariable', sans-serif`,
-  colors: {
-    ocean: [
-      '#dcf5ff',
-      '#afddff',
-      '#80c4fd',
-      '#50acf9',
-      '#2295f6',
-      '#097bdd',
-      '#0060ad',
-      '#00447d',
-      '#00294e',
-      '#000f20',
-    ],
-  },
-  primaryColor: 'ocean',
-  primaryShade: 6,
 };