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/TaskStatusDropdownSimple.js

@@ -171,7 +171,7 @@ export default function TaskStatusDropdown({
 		return createPortal(
 			<div 
 				ref={dropdownRef}
-				className="fixed bg-white border border-gray-200 rounded-md shadow-lg z-[9999] min-w-[140px]"
+				className="fixed bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg z-[9999] min-w-[140px]"
 				style={{
 					left: `${dropdownPosition.x}px`,
 					top: `${dropdownPosition.y}px`,
@@ -182,7 +182,7 @@ export default function TaskStatusDropdown({
 						onClick={() => {
 							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}