From 0d525227ba16d37898dc58b82a52a58a8b9affcd Mon Sep 17 00:00:00 2001
From: Terry <186405119+tlq5l@users.noreply.github.com>
Date: Thu, 22 Oct 2026 06:55:34 +0700
Subject: [PATCH 1/3] fix(aws-lambda): Style layer selects for dark mode

Fixes #13907

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/lambdaLayerDetailClient.tsx | 40 ++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/components/lambdaLayerDetailClient.tsx b/src/components/lambdaLayerDetailClient.tsx
index d077b32c3bc2d..75c97c739fa17 100644
--- a/src/components/lambdaLayerDetailClient.tsx
+++ b/src/components/lambdaLayerDetailClient.tsx
@@ -207,6 +207,7 @@ export function LayerDetailClient({
           <Select
             instanceId="layer-region"
             inputId="layer-region"
+            classNamePrefix="layer-select"
             placeholder="Select a region"
             isDisabled={isLoading}
             options={regionOptions}
@@ -220,6 +221,7 @@ export function LayerDetailClient({
             <Select
               instanceId="layer-runtime"
               inputId="layer-runtime"
+              classNamePrefix="layer-select"
               placeholder="Runtime compatibility unavailable"
               isDisabled={isLoading || !runtimeOptions.length}
               options={runtimeOptions}
@@ -233,6 +235,7 @@ export function LayerDetailClient({
           <Select<SelectOption>
             instanceId="layer-sdk-version"
             inputId="layer-sdk-version"
+            classNamePrefix="layer-select"
             isDisabled={isLoading}
             options={sdkVersionOptions}
             value={selectedSdkVersionOption}
@@ -291,6 +294,43 @@ const SelectionField = styled('div')`
   &:focus-within {
     z-index: 1;
   }
+
+  /* react-select ships light-only colors; map them to the site's dark theme. */
+  .dark & {
+    .layer-select__control {
+      background-color: var(--gray-a2);
+      border-color: var(--gray-4);
+    }
+    .layer-select__control--is-focused {
+      border-color: var(--accent-purple);
+      box-shadow: 0 0 0 0.2rem var(--accent-purple-light);
+    }
+    .layer-select__control--is-disabled {
+      opacity: 0.6;
+    }
+    .layer-select__single-value,
+    .layer-select__input-container {
+      color: var(--foreground);
+    }
+    .layer-select__placeholder {
+      color: var(--foreground-secondary);
+    }
+    .layer-select__menu {
+      background-color: var(--gray-2);
+      box-shadow: var(--shadow-6);
+    }
+    .layer-select__option {
+      background-color: transparent;
+      color: var(--foreground);
+    }
+    .layer-select__option--is-focused {
+      background-color: var(--gray-a4);
+    }
+    .layer-select__option--is-selected {
+      background-color: var(--accent-purple);
+      color: white;
+    }
+  }
 `;
 
 const SelectionLabel = styled('label')`

From 7b5f719cd24653ee3502675f57f79dfee9e1fcd8 Mon Sep 17 00:00:00 2001
From: Terry <186405119+tlq5l@users.noreply.github.com>
Date: Fri, 30 Oct 2026 02:56:40 +0700
Subject: [PATCH 2/3] fix(aws-lambda): Cite react-select default colors in
 layer select CSS

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/lambdaLayerDetailClient.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/lambdaLayerDetailClient.tsx b/src/components/lambdaLayerDetailClient.tsx
index 75c97c739fa17..de11cf6186947 100644
--- a/src/components/lambdaLayerDetailClient.tsx
+++ b/src/components/lambdaLayerDetailClient.tsx
@@ -295,7 +295,9 @@ const SelectionField = styled('div')`
     z-index: 1;
   }
 
-  /* react-select ships light-only colors; map them to the site's dark theme. */
+  /* react-select defaults to white control and menu backgrounds and dark text
+     (https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/components/Control.tsx#L55,
+     .../SingleValue.tsx#L46); map them to the site's dark theme. */
   .dark & {
     .layer-select__control {
       background-color: var(--gray-a2);

From 29f9c03060b099f6faf5c1cd4e653d85bf62c199 Mon Sep 17 00:00:00 2001
From: Terry <186405119+tlq5l@users.noreply.github.com>
Date: Fri, 30 Oct 2026 03:01:35 +0700
Subject: [PATCH 3/3] fix(aws-lambda): Cite every react-select default color in
 layer select CSS

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/lambdaLayerDetailClient.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/lambdaLayerDetailClient.tsx b/src/components/lambdaLayerDetailClient.tsx
index de11cf6186947..da34db86bc59a 100644
--- a/src/components/lambdaLayerDetailClient.tsx
+++ b/src/components/lambdaLayerDetailClient.tsx
@@ -296,8 +296,11 @@ const SelectionField = styled('div')`
   }
 
   /* react-select defaults to white control and menu backgrounds and dark text
-     (https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/components/Control.tsx#L55,
-     .../SingleValue.tsx#L46); map them to the site's dark theme. */
+     (https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/theme.ts#L12-L21,
+     https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/components/Control.tsx#L55,
+     https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/components/Menu.tsx#L297,
+     https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/components/SingleValue.tsx#L46);
+     map them to the site's dark theme. */
   .dark & {
     .layer-select__control {
       background-color: var(--gray-a2);