feat: Implement dark mode support across components and UI elements

- Added dark mode styles to TaskStatusDropdown, TaskStatusDropdownDebug, and TaskStatusDropdownSimple components.
- Introduced ThemeProvider and useTheme hook for managing theme state.
- Updated Button, Card, Input, Loading, Navigation, PageContainer, PageHeader, ProjectCalendarWidget, ProjectMap, SearchBar, States, Tooltip, and other UI components to support dark mode.
- Created ThemeToggle component for switching between light and dark modes.
- Enhanced i18n translations for settings related to theme and language preferences.
- Configured Tailwind CSS to support dark mode with class-based toggling.

src/components/ProjectStatusDropdownSimple.js

@@ -114,8 +114,8 @@ export default function ProjectStatusDropdownSimple({
 
 			{/* Simple dropdown for debugging */}
 			{isOpen && (
-				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
-					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
+				<div className="absolute top-full left-0 mt-1 bg-white dark:bg-gray-800 border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
+					<div className="bg-yellow-100 dark:bg-yellow-900 p-2 text-xs text-center border-b dark:border-gray-600">
 						DEBUG: ProjectStatus Dropdown is visible
 					</div>
 					{Object.entries(statusConfig).map(([statusKey, config]) => (
@@ -125,7 +125,7 @@ export default function ProjectStatusDropdownSimple({
 								console.log("ProjectStatus Option clicked:", statusKey);
 								handleChange(statusKey);
 							}}
-							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last-rounded-b-md"
+							className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors first:rounded-t-md last-rounded-b-md"
 						>
 							<Badge variant={config.variant} size="sm">
 								{config.label}