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/ui/Tooltip.js

@@ -67,7 +67,7 @@ export default function Tooltip({ children, content, className = "" }) {
 	const tooltip = isVisible && (
 		<div
 			ref={tooltipRef}
-			className={`fixed z-50 px-3 py-2 text-sm bg-gray-900 text-white rounded-lg shadow-lg border max-w-sm ${className}`}
+			className={`fixed z-50 px-3 py-2 text-sm bg-gray-900 dark:bg-gray-700 text-white rounded-lg shadow-lg border border-gray-700 dark:border-gray-600 max-w-sm ${className}`}
 			style={{
 				top: position.top,
 				left: position.left,
@@ -75,7 +75,7 @@ export default function Tooltip({ children, content, className = "" }) {
 		>
 			{content}
 			{/* Arrow pointing down */}
-			<div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
+			<div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 		</div>
 	);