storkit: merge 397_bug_selection_screen_directory_picker_unreadable_in_dark_mode

frontend/src/App.css

@@ -236,3 +236,49 @@ body,
 		opacity: 0;
 	}
 }
+
+/* ProjectPathInput dropdown theming */
+.path-dropdown {
+	border: 1px solid #ddd;
+	background: #fff;
+	color: #0f0f0f;
+}
+
+.path-dropdown-header {
+	border-bottom: 1px solid #eee;
+	background: #fafafa;
+}
+
+.path-dropdown-item {
+	background: transparent;
+}
+
+.path-dropdown-item--selected {
+	background: #f0f0f0;
+}
+
+.path-match-highlight {
+	font-weight: 600;
+	color: #222;
+}
+
+@media (prefers-color-scheme: dark) {
+	.path-dropdown {
+		border-color: #555;
+		background: #1e1e1e;
+		color: #f6f6f6;
+	}
+
+	.path-dropdown-header {
+		border-bottom-color: #444;
+		background: #2a2a2a;
+	}
+
+	.path-dropdown-item--selected {
+		background: #3a3a3a;
+	}
+
+	.path-match-highlight {
+		color: #f6f6f6;
+	}
+}

frontend/src/components/selection/ProjectPathInput.tsx

@@ -32,7 +32,7 @@ function renderHighlightedMatch(text: string, query: string) {
 		return (
 			<span
 				key={`${char}-${count}`}
-				style={isMatch ? { fontWeight: 600, color: "#222" } : undefined}
+				className={isMatch ? "path-match-highlight" : undefined}
 			>
 				{char}
 			</span>
@@ -93,16 +93,15 @@ export function ProjectPathInput({
 			/>
 			{matchList.length > 0 && (
 				<div
+					className="path-dropdown"
 					style={{
 						position: "absolute",
 						top: "100%",
 						left: 0,
 						right: 0,
 						marginTop: "6px",
-						border: "1px solid #ddd",
 						borderRadius: "6px",
 						overflow: "hidden",
-						background: "#fff",
 						fontFamily: "monospace",
 						height: "160px",
 						overflowY: "auto",
@@ -111,13 +110,12 @@ export function ProjectPathInput({
 					}}
 				>
 					<div
+						className="path-dropdown-header"
 						style={{
 							display: "flex",
 							justifyContent: "flex-end",
 							alignItems: "center",
 							padding: "4px 6px",
-							borderBottom: "1px solid #eee",
-							background: "#fafafa",
 						}}
 					>
 						<button
@@ -128,8 +126,6 @@ export function ProjectPathInput({
 								width: "24px",
 								height: "24px",
 								borderRadius: "4px",
-								border: "1px solid #ddd",
-								background: "#fff",
 								cursor: "pointer",
 								lineHeight: 1,
 							}}
@@ -143,6 +139,7 @@ export function ProjectPathInput({
 							<button
 								key={match.path}
 								type="button"
+								className={`path-dropdown-item${isSelected ? " path-dropdown-item--selected" : ""}`}
 								onMouseEnter={() => onSelectMatch(index)}
 								onMouseDown={(event) => {
 									event.preventDefault();
@@ -154,7 +151,6 @@ export function ProjectPathInput({
 									textAlign: "left",
 									padding: "6px 8px",
 									border: "none",
-									background: isSelected ? "#f0f0f0" : "transparent",
 									cursor: "pointer",
 									fontFamily: "inherit",
 								}}