diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
index 375c746079490..37de7d347fa80 100644
--- a/packages/connect-react/CHANGELOG.md
+++ b/packages/connect-react/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 # Changelog
 
+## [2.3.0] - 2025-12-07
+
+### Added
+
+- Dark mode support for select components with new theme color tokens (`optionHover`, `optionSelected`, `optionSelectedHover`, `appIconBackground`)
+- App icon backgrounds in `SelectApp` for better visibility in dark mode
+
 ## [2.2.0] - 2025-11-29
 
 ### Added
diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
index d7039ff9eeaaa..0c6c3de6408f3 100644
--- a/packages/connect-react/package.json
+++ b/packages/connect-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"
diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
index 484a098bbab8d..a392370d86510 100644
--- a/packages/connect-react/src/components/ControlApp.tsx
+++ b/packages/connect-react/src/components/ControlApp.tsx
@@ -55,15 +55,27 @@ export function ControlApp({ app }: ControlAppProps) {
     getProps, select, theme,
   } = useCustomize();
 
-  const {
-    surface,
-    border,
-    text,
-    textStrong,
-    hoverBg,
-    selectedBg,
-    selectedHoverBg,
-  } = resolveSelectColors(theme.colors);
+  // Memoize color resolution to avoid recalculating on every render
+  const resolvedColors = useMemo(() => resolveSelectColors(theme.colors), [
+    theme.colors,
+  ]);
+
+  // Memoize base select styles - only recalculate when colors or boxShadow change
+  const baseSelectStyles = useMemo(() => createBaseSelectStyles<SelectValue>({
+    colors: {
+      surface: resolvedColors.surface,
+      border: resolvedColors.border,
+      text: resolvedColors.text,
+      textStrong: resolvedColors.textStrong,
+      hoverBg: resolvedColors.hoverBg,
+      selectedBg: resolvedColors.selectedBg,
+      selectedHoverBg: resolvedColors.selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  }), [
+    resolvedColors,
+    theme.boxShadow,
+  ]);
 
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
@@ -79,27 +91,14 @@ export function ControlApp({ app }: ControlAppProps) {
     gridArea: "control",
   };
 
-  const selectStyles = createBaseSelectStyles<SelectValue>({
-    colors: {
-      surface,
-      border,
-      text,
-      textStrong,
-      hoverBg,
-      selectedBg,
-      selectedHoverBg,
-    },
-    boxShadow: theme.boxShadow,
-  });
-
   const baseSelectProps: BaseReactSelectProps<SelectValue> = {
     components: {
       Option: BaseOption,
     },
     styles: {
-      ...selectStyles,
+      ...baseSelectStyles,
       control: (base, state) => ({
-        ...(selectStyles.control?.(base, state) ?? base),
+        ...(baseSelectStyles.control?.(base, state) ?? base),
         gridArea: "control",
       }),
     },
diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx
index 9c037aca2a33d..dfb6723aee2c5 100644
--- a/packages/connect-react/src/components/ControlSelect.tsx
+++ b/packages/connect-react/src/components/ControlSelect.tsx
@@ -5,15 +5,12 @@ import {
   useState,
   useRef,
 } from "react";
-import type {
-  CSSObjectWithLabel, MenuListProps,
-} from "react-select";
+import type { MenuListProps } from "react-select";
 import Select, {
   components,
   Props as ReactSelectProps,
 } from "react-select";
 import CreatableSelect from "react-select/creatable";
-import type { BaseReactSelectProps } from "../hooks/customization-context";
 import { useCustomize } from "../hooks/customization-context";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import type {
@@ -28,6 +25,10 @@ import {
   isArrayOfLabelValueWrapped,
   isLabelValueWrapped,
 } from "../utils/label-value";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import { LoadMoreButton } from "./LoadMoreButton";
 
 // XXX T and ConfigurableProp should be related
@@ -55,6 +56,29 @@ export function ControlSelect<T extends PropOptionValue>({
   const {
     select, theme,
   } = useCustomize();
+
+  // Memoize color resolution to avoid recalculating on every render
+  const resolvedColors = useMemo(() => resolveSelectColors(theme.colors), [
+    theme.colors,
+  ]);
+
+  // Memoize base select styles - only recalculate when colors or boxShadow change
+  const baseSelectStyles = useMemo(() => createBaseSelectStyles<LabelValueOption<T>, boolean>({
+    colors: {
+      surface: resolvedColors.surface,
+      border: resolvedColors.border,
+      text: resolvedColors.text,
+      textStrong: resolvedColors.textStrong,
+      hoverBg: resolvedColors.hoverBg,
+      selectedBg: resolvedColors.selectedBg,
+      selectedHoverBg: resolvedColors.selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  }), [
+    resolvedColors,
+    theme.boxShadow,
+  ]);
+
   const [
     selectOptions,
     setSelectOptions,
@@ -77,16 +101,6 @@ export function ControlSelect<T extends PropOptionValue>({
     value,
   ])
 
-  const baseSelectProps: BaseReactSelectProps<LabelValueOption<T>, boolean> = {
-    styles: {
-      container: (base): CSSObjectWithLabel => ({
-        ...base,
-        gridArea: "control",
-        boxShadow: theme.boxShadow.input,
-      }),
-    },
-  };
-
   const selectValue: LabelValueOption<T> | LabelValueOption<T>[] | null = useMemo(() => {
     if (rawValue == null) {
       return null;
@@ -130,7 +144,15 @@ export function ControlSelect<T extends PropOptionValue>({
     selectOptions,
   ]);
 
-  const props = select.getProps("controlSelect", baseSelectProps)
+  // Get customization props from context
+  // We pass our dark mode base styles as the base, so user customizations merge on top
+  const customizationProps = select.getProps<
+    "controlSelect",
+    LabelValueOption<T>,
+    boolean
+  >("controlSelect", {
+    styles: baseSelectStyles,
+  })
 
   // Use ref to store latest onLoadMore callback
   // This allows stable component reference while calling current callback
@@ -145,10 +167,10 @@ export function ControlSelect<T extends PropOptionValue>({
   showLoadMoreButtonRef.current = showLoadMoreButton;
 
   // Memoize custom components to prevent remounting
-  // Recompute when caller/customizer supplies new component overrides
+  // Merge: customization context components -> caller overrides -> our MenuList wrapper
   const finalComponents = useMemo(() => {
     const mergedComponents = {
-      ...(props.components ?? {}),
+      ...(customizationProps.components ?? {}),
       ...(componentsOverride ?? {}),
     };
     const ParentMenuList = mergedComponents.MenuList ?? components.MenuList;
@@ -174,8 +196,8 @@ export function ControlSelect<T extends PropOptionValue>({
       MenuList: CustomMenuList,
     };
   }, [
-    props.components,
     componentsOverride,
+    customizationProps.components,
   ]);
 
   const handleCreate = (inputValue: string) => {
@@ -254,11 +276,13 @@ export function ControlSelect<T extends PropOptionValue>({
       getOptionLabel={(option) => sanitizeOption(option).label}
       getOptionValue={(option) => String(sanitizeOption(option).value)}
       onChange={handleChange}
-      {...props}
+      // Apply customization context values as defaults
+      classNamePrefix={customizationProps.classNamePrefix || "react-select"}
+      classNames={customizationProps.classNames}
+      theme={customizationProps.theme}
+      // Spread selectProps after defaults so callers can override theme/classNames/classNamePrefix
       {...selectProps}
       {...additionalProps}
-      // These must come AFTER spreads to avoid being overridden
-      classNamePrefix="react-select"
       menuPortalTarget={
         typeof document !== "undefined"
           ? document.body
@@ -266,9 +290,12 @@ export function ControlSelect<T extends PropOptionValue>({
       }
       menuPosition="fixed"
       styles={{
-        // eslint-disable-next-line react/prop-types
-        ...props.styles,
-        ...selectProps?.styles,
+        ...customizationProps.styles,
+        ...(selectProps?.styles ?? {}),
+        container: (base) => ({
+          ...base,
+          gridArea: "control",
+        }),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,
diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 1f546a495e981..b1f79f462ab35 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -98,30 +98,30 @@ export function SelectApp({
     loadMore,
   ]);
 
-  const {
-    surface,
-    border,
-    text,
-    textStrong,
-    hoverBg,
-    selectedBg,
-    selectedHoverBg,
-    appIconBg,
-  } = resolveSelectColors(theme.colors);
+  // Memoize color resolution to avoid recalculating on every render
+  const resolvedColors = useMemo(() => resolveSelectColors(theme.colors), [
+    theme.colors,
+  ]);
+
+  // Memoize base select styles - only recalculate when colors or boxShadow change
+  const baseSelectStyles = useMemo(() => createBaseSelectStyles<App>({
+    colors: {
+      surface: resolvedColors.surface,
+      border: resolvedColors.border,
+      text: resolvedColors.text,
+      textStrong: resolvedColors.textStrong,
+      hoverBg: resolvedColors.hoverBg,
+      selectedBg: resolvedColors.selectedBg,
+      selectedHoverBg: resolvedColors.selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  }), [
+    resolvedColors,
+    theme.boxShadow,
+  ]);
 
   const baseSelectProps: BaseReactSelectProps<App> = {
-    styles: createBaseSelectStyles<App>({
-      colors: {
-        surface,
-        border,
-        text,
-        textStrong,
-        hoverBg,
-        selectedBg,
-        selectedHoverBg,
-      },
-      boxShadow: theme.boxShadow,
-    }),
+    styles: baseSelectStyles,
   };
 
   const selectProps = select.getProps("selectApp", baseSelectProps);
@@ -139,7 +139,7 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
-              backgroundColor: appIconBg,
+              backgroundColor: resolvedColors.appIconBg,
               borderRadius: 6,
               padding: 2,
             }}
@@ -163,7 +163,7 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
-              backgroundColor: appIconBg,
+              backgroundColor: resolvedColors.appIconBg,
               borderRadius: 6,
               padding: 2,
             }}
@@ -197,7 +197,7 @@ export function SelectApp({
     Option,
     SingleValue,
     MenuList,
-    appIconBg,
+    resolvedColors.appIconBg,
   ]);
   return (
     <Select
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 41147672ff23c..3ecf909e03917 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -50,15 +50,27 @@ export function SelectComponent({
     select, theme,
   } = useCustomize();
 
-  const {
-    surface,
-    border,
-    text,
-    textStrong,
-    hoverBg,
-    selectedBg,
-    selectedHoverBg,
-  } = resolveSelectColors(theme.colors);
+  // Memoize color resolution to avoid recalculating on every render
+  const resolvedColors = useMemo(() => resolveSelectColors(theme.colors), [
+    theme.colors,
+  ]);
+
+  // Memoize base select styles - only recalculate when colors or boxShadow change
+  const baseSelectStyles = useMemo(() => createBaseSelectStyles<Component>({
+    colors: {
+      surface: resolvedColors.surface,
+      border: resolvedColors.border,
+      text: resolvedColors.text,
+      textStrong: resolvedColors.textStrong,
+      hoverBg: resolvedColors.hoverBg,
+      selectedBg: resolvedColors.selectedBg,
+      selectedHoverBg: resolvedColors.selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  }), [
+    resolvedColors,
+    theme.boxShadow,
+  ]);
 
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
@@ -83,18 +95,7 @@ export function SelectComponent({
   ]);
 
   const baseSelectProps: BaseReactSelectProps<Component> = {
-    styles: createBaseSelectStyles<Component>({
-      colors: {
-        surface,
-        border,
-        text,
-        textStrong,
-        hoverBg,
-        selectedBg,
-        selectedHoverBg,
-      },
-      boxShadow: theme.boxShadow,
-    }),
+    styles: baseSelectStyles,
   };
 
   const selectProps = select.getProps("selectComponent", baseSelectProps);
diff --git a/packages/connect-react/src/utils/select-styles.ts b/packages/connect-react/src/utils/select-styles.ts
index fe32a228a7ef8..ef6b4d72cc214 100644
--- a/packages/connect-react/src/utils/select-styles.ts
+++ b/packages/connect-react/src/utils/select-styles.ts
@@ -21,26 +21,34 @@ export type SelectStyleConfig = {
 };
 
 /**
- * Resolves theme colors with fallbacks for dark mode styling.
- * Returns the theme value if defined, otherwise the fallback.
+ * Resolves theme colors for select components.
+ * Uses theme colors directly - no dark/light mode fallbacks needed
+ * since the theme itself defines the appropriate colors.
  */
 export function resolveSelectColors(colors: Partial<Colors>): SelectColorConfig & { appIconBg: string } {
-  const resolve = <K extends keyof Colors>(key: K, fallback: string): string => {
-    const current = colors[key];
-    return current !== undefined
-      ? current
-      : fallback;
-  };
+  // Use theme colors directly - these are already correct for the current mode
+  const surface = colors.neutral0 ?? "#ffffff";
+  const border = colors.neutral20 ?? "hsl(0, 0%, 80%)";
+  const text = colors.neutral60 ?? "hsl(0, 0%, 40%)";
+  const textStrong = colors.neutral80 ?? "hsl(0, 0%, 20%)";
+
+  // For hover/selected, use custom colors if provided, otherwise use theme colors
+  // neutral20 works for hover in both light (darker than surface) and dark (lighter than surface) modes
+  const hoverBg = colors.optionHover ?? colors.neutral20 ?? "hsl(0, 0%, 80%)";
+  // For selected state, use neutral30 (slightly more contrast than hover) for better visibility
+  const selectedBg = colors.optionSelected ?? colors.neutral30 ?? "hsl(0, 0%, 70%)";
+  const selectedHoverBg = colors.optionSelectedHover ?? colors.neutral40 ?? "hsl(0, 0%, 60%)";
+  const appIconBg = colors.appIconBackground ?? colors.neutral0 ?? "#ffffff";
 
   return {
-    surface: resolve("neutral0", "#18181b"),
-    border: resolve("neutral20", "rgba(255,255,255,0.16)"),
-    text: resolve("neutral80", "#a1a1aa"),
-    textStrong: resolve("neutral90", "#e4e4e7"),
-    hoverBg: resolve("optionHover", "#27272a"),
-    selectedBg: resolve("optionSelected", "rgba(59,130,246,0.2)"),
-    selectedHoverBg: resolve("optionSelectedHover", "rgba(59,130,246,0.35)"),
-    appIconBg: resolve("appIconBackground", "#fff"),
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+    appIconBg,
   };
 }
 
@@ -79,17 +87,23 @@ export function createBaseSelectStyles<
       backgroundColor: surface,
       boxShadow: boxShadow.dropdown,
     }),
+    menuList: (base: CSSObjectWithLabel) => ({
+      ...base,
+      backgroundColor: surface,
+    }),
     singleValue: (base: CSSObjectWithLabel) => ({
       ...base,
       color: text,
+      fontSize: "0.875rem",
     }),
     input: (base: CSSObjectWithLabel) => ({
       ...base,
       color: text,
+      fontSize: "0.875rem",
     }),
     option: (
       base: CSSObjectWithLabel,
-      state: { isSelected: boolean; isFocused: boolean },
+      state: { isSelected: boolean; isFocused: boolean; isDisabled: boolean },
     ) => {
       let bg = surface;
       if (state.isSelected && state.isFocused) {
@@ -101,8 +115,16 @@ export function createBaseSelectStyles<
       }
       return {
         ...base,
-        backgroundColor: bg,
-        color: textStrong,
+        "backgroundColor": bg,
+        "color": textStrong,
+        "fontSize": "0.875rem",
+        // Override the :active state to use our colors instead of default blue
+        ":active": {
+          ...base[":active"],
+          backgroundColor: state.isDisabled
+            ? undefined
+            : selectedHoverBg,
+        },
       };
     },
   };