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/globals.css

@@ -5,6 +5,91 @@
 :root {
 	--background: #ffffff;
 	--foreground: #171717;
+
+	/* Surface colors */
+	--surface-primary: #ffffff;
+	--surface-secondary: #f9fafb;
+	--surface-tertiary: #f3f4f6;
+	--surface-modal: #ffffff;
+	--surface-card: #ffffff;
+	--surface-hover: #f9fafb;
+	--surface-active: #f3f4f6;
+
+	/* Text colors */
+	--text-primary: #111827;
+	--text-secondary: #6b7280;
+	--text-tertiary: #9ca3af;
+	--text-inverse: #ffffff;
+	--text-muted: #6b7280;
+
+	/* Border colors */
+	--border-default: #d1d5db;
+	--border-hover: #9ca3af;
+	--border-focus: #3b82f6;
+	--border-divider: #e5e7eb;
+
+	/* Interactive colors */
+	--interactive-primary: #3b82f6;
+	--interactive-primary-hover: #2563eb;
+	--interactive-secondary: #6b7280;
+	--interactive-secondary-hover: #4b5563;
+	--interactive-danger: #ef4444;
+	--interactive-danger-hover: #dc2626;
+
+	/* Status colors */
+	--status-success: #10b981;
+	--status-warning: #f59e0b;
+	--status-error: #ef4444;
+	--status-info: #3b82f6;
+
+	/* Shadow colors */
+	--shadow-default: rgba(0, 0, 0, 0.1);
+	--shadow-hover: rgba(0, 0, 0, 0.15);
+}
+
+.dark {
+	--background: #0a0a0a;
+	--foreground: #ededed;
+
+	/* Surface colors */
+	--surface-primary: #1f2937;
+	--surface-secondary: #374151;
+	--surface-tertiary: #4b5563;
+	--surface-modal: #1f2937;
+	--surface-card: #374151;
+	--surface-hover: #4b5563;
+	--surface-active: #6b7280;
+
+	/* Text colors */
+	--text-primary: #f9fafb;
+	--text-secondary: #d1d5db;
+	--text-tertiary: #9ca3af;
+	--text-inverse: #111827;
+	--text-muted: #9ca3af;
+
+	/* Border colors */
+	--border-default: #4b5563;
+	--border-hover: #6b7280;
+	--border-focus: #60a5fa;
+	--border-divider: #374151;
+
+	/* Interactive colors */
+	--interactive-primary: #3b82f6;
+	--interactive-primary-hover: #60a5fa;
+	--interactive-secondary: #6b7280;
+	--interactive-secondary-hover: #9ca3af;
+	--interactive-danger: #ef4444;
+	--interactive-danger-hover: #f87171;
+
+	/* Status colors */
+	--status-success: #10b981;
+	--status-warning: #f59e0b;
+	--status-error: #ef4444;
+	--status-info: #3b82f6;
+
+	/* Shadow colors */
+	--shadow-default: rgba(0, 0, 0, 0.3);
+	--shadow-hover: rgba(0, 0, 0, 0.4);
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -29,6 +114,18 @@ body {
 	background: #f1f1f1;
 }
 
+::-webkit-scrollbar-track:window-inactive {
+	background: #f1f1f1;
+}
+
+.dark ::-webkit-scrollbar-track {
+	background: #374151;
+}
+
+.dark ::-webkit-scrollbar-track:window-inactive {
+	background: #374151;
+}
+
 ::-webkit-scrollbar-thumb {
 	background: #c1c1c1;
 	border-radius: 4px;
@@ -38,6 +135,14 @@ body {
 	background: #a8a8a8;
 }
 
+.dark ::-webkit-scrollbar-thumb {
+	background: #6b7280;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+	background: #9ca3af;
+}
+
 /* Focus styles */
 .focus-ring {
 	@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;