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/app/settings/page.js

@@ -0,0 +1,64 @@
+"use client";
+
+import { useTranslation } from "@/lib/i18n";
+import PageContainer from "@/components/ui/PageContainer";
+import PageHeader from "@/components/ui/PageHeader";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import ThemeToggle from "@/components/ui/ThemeToggle";
+import LanguageSwitcher from "@/components/ui/LanguageSwitcher";
+
+export default function SettingsPage() {
+	const { t } = useTranslation();
+
+	return (
+		<PageContainer>
+			<PageHeader title={t('settings.title') || 'Settings'} />
+
+			<div className="max-w-2xl mx-auto space-y-6">
+				{/* Appearance Settings */}
+				<Card>
+					<CardHeader>
+						<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+							{t('settings.appearance') || 'Appearance'}
+						</h2>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<div className="flex items-center justify-between">
+							<div>
+								<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+									{t('settings.theme') || 'Theme'}
+								</label>
+								<p className="text-sm text-gray-500 dark:text-gray-400">
+									{t('settings.themeDescription') || 'Choose your preferred theme'}
+								</p>
+							</div>
+							<ThemeToggle />
+						</div>
+					</CardContent>
+				</Card>
+
+				{/* Language Settings */}
+				<Card>
+					<CardHeader>
+						<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+							{t('settings.language') || 'Language'}
+						</h2>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<div className="flex items-center justify-between">
+							<div>
+								<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+									{t('settings.language') || 'Language'}
+								</label>
+								<p className="text-sm text-gray-500 dark:text-gray-400">
+									{t('settings.languageDescription') || 'Select your preferred language'}
+								</p>
+							</div>
+							<LanguageSwitcher />
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</PageContainer>
+	);
+}