🔧 Fix Dark Mode Detection and Force Re-render

🌙 Enhanced Dark Mode Detection:
- Multiple fallback sources for theme detection
- Redux state, localStorage, and document attribute checking
- Real-time theme change detection with MutationObserver
- Force re-render mechanism with themeKey state

�� Theme Change Listeners:
- MutationObserver for data-layout-mode attribute changes
- Storage event listener for localStorage colorschema changes
- Automatic re-render when theme switches
- Debug logging for theme state tracking

🎯 Force Re-render Implementation:
- themeKey state to trigger component updates
- Key prop on pagination container for forced re-mount
- Proper cleanup of event listeners and observers
- Enhanced theme detection reliability

🚀 Real-time Theme Switching:
- Immediate visual updates when toggling dark/light mode
- No page reload required for theme changes
- Consistent behavior across all theme switching methods
- Proper fallback chain for theme detection

🔍 Debug Features:
- Console logging for theme state debugging
- Multiple source checking for theme detection
- Theme change event tracking
- Component re-render monitoring

src/feature-module/projects/projecttracker.jsx

@@ -14,8 +14,28 @@ const { Option } = Select;
 const { RangePicker } = DatePicker;
 
 const ProjectTracker = () => {
-  // Get theme from Redux
-  const isDarkMode = useSelector((state) => state.theme?.isDarkMode);
+  // Theme state for force re-render
+  const [themeKey, setThemeKey] = useState(0);
+
+  // Get theme from multiple sources with real-time detection
+  const getIsDarkMode = () => {
+    const reduxTheme = useSelector((state) => state.theme?.isDarkMode);
+    const localStorageTheme = localStorage.getItem('colorschema') === 'dark_mode';
+    const documentTheme = document.documentElement.getAttribute('data-layout-mode') === 'dark_mode';
+
+    return reduxTheme || localStorageTheme || documentTheme;
+  };
+
+  const isDarkMode = getIsDarkMode();
+
+  // Debug theme state
+  console.log('Theme Debug:', {
+    reduxTheme: useSelector((state) => state.theme),
+    localStorage: localStorage.getItem('colorschema'),
+    documentAttribute: document.documentElement.getAttribute('data-layout-mode'),
+    isDarkMode: isDarkMode,
+    themeKey: themeKey
+  });
 
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [filterStatus, setFilterStatus] = useState('All Status');
@@ -153,6 +173,43 @@ const ProjectTracker = () => {
     loadProjects();
   }, []);
 
+  // Listen for theme changes
+  useEffect(() => {
+    const handleThemeChange = () => {
+      // Force re-render when theme changes
+      console.log('Theme changed, forcing re-render');
+      setThemeKey(prev => prev + 1);
+    };
+
+    // Listen for data-layout-mode attribute changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-layout-mode') {
+          handleThemeChange();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-layout-mode']
+    });
+
+    // Also listen for localStorage changes
+    const handleStorageChange = (e) => {
+      if (e.key === 'colorschema') {
+        handleThemeChange();
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
   // Handle pagination change
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -657,6 +714,7 @@ const ProjectTracker = () => {
 
           {/* Custom Pagination */}
           <div
+            key={`pagination-${themeKey}`}
             className={`custom-pagination-container ${isDarkMode ? '' : 'light-mode'}`}
             style={{
               background: isDarkMode