Enhance dark mode support across various components by updating styles and adding dark variants for better visibility. Adjusted button, input, and text colors to ensure consistency in dark theme. Improved layout and spacing in several areas for a more polished UI experience.

Author: walidkayhan

src/app/src/components/UnitInput/index.tsx

@@ -21,7 +21,7 @@ export function UnitInput({
 	return (
 		<div
 			className={cx(
-				"border border-gray-300 rounded flex flex-row items-center flex-1 justify-between pl-2 pr-2",
+				"border border-gray-300 rounded flex flex-row items-center flex-1 justify-between pl-2 pr-2 dark:border-outline",
 				{
 					"opacity-50": disabled,
 				},

src/app/src/components/Wizard/SecondaryContentPanel.tsx

@@ -122,12 +122,12 @@ export function SecondaryContentPanel({
 
 			{linkItem && (
 				<div className="flex-shrink-0 mt-auto pt-2">
-					<div className="bg-white rounded-lg border border-gray-200 px-3 py-2 shadow-sm">
+					<div className="bg-white dark:bg-surface-raised rounded-lg border border-gray-200 dark:border-gray-600 px-3 py-2 shadow-sm">
 						<div className="flex items-center gap-2">
 							<ExternalLink className="text-blue-500 flex-shrink-0" size={16} />
-							<span className="flex-1 text-sm text-gray-700">
+							<span className="flex-1 text-sm text-gray-700 dark:text-content-primary">
 								{linkItem.title && (
-									<span className="font-semibold text-gray-900">
+									<span className="font-semibold text-gray-900 dark:text-content-primary">
 										{linkItem.title}{" "}
 									</span>
 								)}
@@ -151,7 +151,7 @@ export function SecondaryContentPanel({
 								<Popover>
 									<PopoverTrigger asChild>
 										<button className="flex-shrink-0 p-1.5 rounded-md hover:bg-gray-100 transition-colors">
-											<QrCode className="text-gray-600" size={18} />
+											<QrCode className="text-gray-600 dark:text-content-primary" size={18} />
 										</button>
 									</PopoverTrigger>
 									<PopoverContent
@@ -161,10 +161,10 @@ export function SecondaryContentPanel({
 										align="end"
 									>
 										<div className="flex flex-col items-center gap-3">
-											<div className="text-sm font-semibold text-gray-900">
+											<div className="text-sm font-semibold text-gray-900 dark:text-content-primary">
 												Scan QR Code
 											</div>
-											<div className="bg-white p-2 rounded border border-gray-100">
+											<div className="bg-white dark:bg-surface-raised p-2 rounded border border-gray-100 dark:border-gray-600">
 												<QRCodeComponent
 													value={linkItem.url}
 													size={180}

src/app/src/components/Wizard/WizardLanding.tsx

@@ -60,7 +60,7 @@ export function WizardLanding({
 					isDisabled
 						? "bg-gray-200 text-gray-400 cursor-not-allowed"
 						: isActive
-							? "bg-gray-900 text-white hover:bg-gray-800"
+							? "bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500"
 							: "bg-gray-200 text-gray-700 hover:bg-gray-300"
 				}
 			`}
@@ -102,7 +102,7 @@ export function WizardLanding({
 						</p>
 					)}
 					{activeSubWizard?.description && (
-						<p className="mb-8">{activeSubWizard.description}</p>
+						<p className="mb-8 dark:text-content-primary">{activeSubWizard.description}</p>
 					)}
 					<ValidationBanner validations={validations} />
 					<div className="flex flex-col gap-3 mt-12 max-w-md">

src/app/src/features/Config/components/ActionButton.tsx

@@ -23,7 +23,7 @@ export const ActionButton = React.forwardRef(function ActionButton(
 			ref={ref}
 			onClick={onClick}
 			disabled={disabled}
-			className="inline-flex flex-col disabled:bg-gray-200 disabled:text-gray-300 disabled:cursor-not-allowed items-center justify-center px-5 group group-hover:text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-800"
+			className="rounded-r-lg inline-flex h-full flex-col disabled:bg-gray-200 disabled:text-gray-300 disabled:cursor-not-allowed items-center justify-center px-5 group group-hover:text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-800 dark:disabled:bg-surface-elevated dark:disabled:text-content-secondary"
 			data-testid={testId}
 		>
 			<span className="enabled:group-hover:text-blue-500 text-gray-600 dark:text-content-primary">

src/app/src/features/Config/components/ProfileBar.tsx

@@ -152,13 +152,13 @@ export function ProfileBar() {
 				className={cn(
 					"ring rounded relative ml-4",
 					{ "ring-green-600": settingsAreDirty },
-					{ "ring-gray-300": !settingsAreDirty },
+					{ "ring-gray-300 dark:ring-outline": !settingsAreDirty },
 				)}
 			>
 				<button
 					className={cn(
 						"p-3 text-lg rounded-sm border-gray-500",
-						{ "bg-gray-300 text-gray-500": !settingsAreDirty },
+						{ "bg-gray-300 text-gray-500 dark:bg-surface-elevated dark:text-content-secondary": !settingsAreDirty },
 						{
 							"bg-green-600 text-white": settingsAreDirty,
 						},

src/app/src/features/Config/components/Search.tsx

@@ -44,7 +44,7 @@ export function Search() {
 				<input
 					type="text"
 					id="simple-search"
-					className="bg-gray-50 focus:outline-none border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5"
+					className="bg-gray-50 focus:outline-none border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-surface-elevated dark:border-outline dark:text-content-primary"
 					placeholder="Search Config"
 					value={searchTerm}
 					onChange={onSearchChange}

src/app/src/features/DRO/component/GoTo.tsx

@@ -217,7 +217,7 @@ export function GoTo({ units, wpos, disabled }: GotoProps) {
 									key={key}
 									onClick={() => !isDisabled && onModeChange(key)}
 									className={`flex-1 py-1 text-xs font-medium transition-colors
-                                        ${isActive ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-100"}
+                                        ${isActive ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-100 dark:text-content-primary dark:hover:bg-surface-hover"}
                                         ${isDisabled ? "opacity-40 cursor-not-allowed" : ""}`}
 									disabled={isDisabled}
 									title={

src/app/src/features/Gamepad/JoystickOptions.jsx

@@ -1,5 +1,6 @@
 import { ControlledInput } from "app/components/ControlledInput";
 import { Switch } from "app/components/shadcn/Switch";
+import { getThemeCssColor } from "app/lib/getThemeCssColor";
 import { useGamepadListener } from "app/lib/hooks/useGamepadListener";
 import cloneDeep from "lodash/cloneDeep";
 import get from "lodash/get";

src/app/src/features/Keyboard/Keyboard/EditArea.tsx

@@ -183,7 +183,7 @@ const EditArea = ({ shortcut, shortcuts, edit, onClose }: EditProps) => {
 		let cleanedShortcut = null;
 
 		if (shortcut.keys === "") {
-			return <span className="text-gray-500">None</span>;
+			return <span className="text-gray-500 dark:text-gray-300">None</span>;
 		}
 
 		if (shortcutArray[shortcutArray.length - 1] === "") {
@@ -243,18 +243,18 @@ const EditArea = ({ shortcut, shortcuts, edit, onClose }: EditProps) => {
 
 	return (
 		<>
-			<div className="space-y-6">
+			<div className="mt-2 space-y-6">
 				{/* Header Section */}
-				<div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
+				<div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 dark:bg-surface-elevated rounded-lg">
 					<div>
-						<h4 className="text-sm font-medium text-gray-500 mb-1">Action</h4>
-						<h4 className="text-lg font-semibold text-gray-900">{title}</h4>
+						<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Action</h4>
+						<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h4>
 					</div>
 					<div>
-						<h4 className="text-sm font-medium text-gray-500 mb-1">
+						<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
 							Current Shortcut
 						</h4>
-						<h4 className="text-lg font-semibold text-gray-900">
+						<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
 							{displayShortcut()}
 						</h4>
 					</div>

src/app/src/features/MachineInfo/MachineInfoDisplay.tsx

@@ -189,8 +189,8 @@ export function MachineInfoDisplay({
 			</div>
 			{currentTool >= 0 && (
 				<div className="text-gray-500 flex w-full gap-4">
-					<span>Current tool: </span>
-					<span className="text-black">T{currentTool}</span>
+					<span className="text-gray-500 dark:text-content-primary">Current tool: </span>
+					<span className="text-black dark:text-content-primary">T{currentTool}</span>
 				</div>
 			)}
 			<div className="flex flex-row gap-4 items-center mt-4">